# Integrate a payment form

This guide describes how to integrate an embedded payment form into your website using the Rebilly Instruments JavaScript library. This guide describes how to process the purchase of a product and a purchase of a set amount.

When this guide is completed, a customer is created in your Rebilly sandbox account after the initial checkout.

details
summary
Prerequisites
To complete this guide, you must have: a website ID, an organization ID, a publishable API key, a product ID, and a pricing plan ID.

You must also have a payment gateway configured in your Rebilly account. For sandbox testing, the `TestProcessor` gateway is pre-configured.

If you already have your IDs and API keys, continue to [Step 1: Set up the HTML page](#step-1-set-up-the-html-page). If you do not, create a product and pricing plan, and get your IDs and API key in [Set up your environment](/docs/dev-docs/set-up-environment).

## Step 1: Set up the HTML page

Include the Rebilly Instruments library using the Rebilly CDN:


```HTML
https://cdn.rebilly.com/instruments/@latest/core.js
```

Add the [defer](https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/defer) attribute to load the script after the HTML.

The default mounting points are `.rebilly-instruments` and `.rebilly-instruments-summary`.

To provide custom mounting points, pass a valid CSS class or HTML element to the `RebillyInstrument.mount()` function.

## Step 2: Configure the library

Use this method to initialize the library and to configure the experience. This method returns a `Promise` and accepts a single `configuration` object.

For more information, see [RebillyInstrument.mount()](/docs/dev-docs/reference-rebilly-instruments/#rebillyinstrumentsmount).

To initialize Rebilly Instruments, provide your:

- Publishable API key
- Organization ID
- website ID


To obtain IDs and API keys, see [Prerequisites](/docs/dev-docs/integrate-a-payment-form#prerequisites).

Select one of the following:

details
summary
Purchase a product
Provide the `planId` and `quantity` properties. To create a pricing plan, see [Prerequisites](/docs/dev-docs/integrate-a-payment-form#prerequisites).


```javascript
items: [
  {
    planId: 'rebilly-e-book',
    quantity: 1,
  },
];
```

details
summary
Payment of a set amount
Provide the `money` property and the purchase amount.


```javascript
money: {
    amount: 100,
    currency: 'USD'
}
```

The following purchase data properties are available: `items`, `money`, `invoiceId`, `transactionId`. For more information, see [Purchase data examples](/docs/dev-docs/example-rebilly-instruments-purchase-data/).

A JWT is required to process a purchase based on `invoiceId` or `transactionId`. To complete this type of purchase, see [Payment form using a JWT](/docs/dev-docs/process-a-payment-jwt/).

## Step 3: Optional: Include listeners

Indicates when an instrument token is created, and provides access to the instrument response.
[RebillyInstruments.on('instrument-ready')](/docs/dev-docs/reference-rebilly-instruments/#rebillyinstrumentsoninstrument-ready)

Indicates when a purchase is completed, and provides access to the transaction response.

For more information, see [RebillyInstruments.on('purchase-completed')](/docs/dev-docs/reference-rebilly-instruments/#rebillyinstrumentsonpurchase-completed).

## Step 4: Run the application

A web server must be used to preview the project. Web browsers blocks API requests due to CORS restrictions.

To run a local server with Python 3, run:


```bash
python -m http.server 8000
```

Open a web browser and navigate to `http://localhost:8000/` to see the payment form.

Complete the payment flow using this test card number: `4111 1111 1111 1111`. Use any future expiration date and any 3 digits for the CVC number. For more test cards, see [Test payment cards, IBANs, and ACH details](/docs/tutorials/test-transactions#test-payment-cards-ibans-and-ach-details).

## Related topics

- [Customize Rebilly Instruments](/docs/dev-docs/customize-rebilly-instruments/)
- [Examples](/docs/dev-docs/examples-rebilly-instruments/)
- [Reference](/docs/dev-docs/reference-rebilly-instruments/)
- [Process a payment JWT](/docs/dev-docs/process-a-payment-jwt/)