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

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 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 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>