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.

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. If you do not, create a product and pricing plan, and get your IDs and API key in Set up your environment.

Step 1: Set up the HTML page

Include the library

Include the Rebilly Instruments library using the Rebilly CDN:

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

Include your Rebilly Instruments initialization script

Add the defer attribute to load the script after the HTML.

Specify mounting controls

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

Initialize 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().

Provide Rebilly account data

To initialize Rebilly Instruments, provide your:

  • Publishable API key
  • Organization ID
  • website ID

To obtain IDs and API keys, see Prerequisites.

Provide purchase data

Select one of the following:

Purchase a product

Provide the planId and quantity properties. To create a pricing plan, see Prerequisites.

items: [
  {
    planId: 'rebilly-e-book',
    quantity: 1,
  },
];
Payment of a set amount

Provide the money property and the purchase amount.

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

The following purchase data properties are available: items, money, invoiceId, transactionId. For more information, see Purchase data examples.

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.

Step 3: Optional: Include listeners

instrument-ready

Indicates when an instrument token is created, and provides access to the instrument response. RebillyInstruments.on('instrument-ready')

purchase-completed

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

For more information, see RebillyInstruments.on('purchase-completed').

Step 4: Run the application

Run a web server

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:

python -m http.server 8000

Make a test payment

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.

Preview

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 payment cards, IBANs, and ACH details.

<!doctype html>
<html lang="en">
    <head>
        <title>Payment form</title>
        <script src="https://cdn.rebilly.com/instruments/@latest/core.js" type="text/javascript"></script>
        <script src="./index.js" type="text/javascript" defer></script>
    </head>
    <body>
        <div class="rebilly-instruments-summary"></div>
        <div class="rebilly-instruments"></div>
    </body>
</html>