This is an interactive example of a payment form that uses the Rebilly Instruments library.
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 cards, IBANs, and ACH details](/docs/tutorials/test-payment-cards).

iframe
# 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.

Download full app

- 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 your website uses a Content Security Policy (CSP), configure it before you embed the payment form.
  For more information, see [Configure content security policy](/docs/dev-docs/set-up-environment#configure-content-security-policy).

  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:

- 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,
    },
  ];
  ```

- 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 cards, IBANs, and ACH details](/docs/tutorials/test-payment-cards).

## 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/)