Integrate a payment form

This guide describes how to:

Integrate a payment form into your website using the Rebilly Instruments JavaScript library.
How to process the purchase of a product.
How to process a purchase of a set amount.

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

Use payment forms to process payments from your customers. To interact with an example payment form, see the Preview tab, in the Set up a payment form section.

To complete this guide, an active gateway is required. If you are testing in the sandbox environment, a test payment gateway called TestProcessor is already configured. For more information, see Set up a payment gateway.

Payment methods that are displayed in the payment form are based on the gateway configuration. For more information, see Set up a payment gateway.

Prerequisites

Complete this section to create resources and gather your website ID, organization ID, and secret API key. These resources and details are required to complete this guide using your Rebilly sandbox environment. If you have already created these resources, skip this step and continue to Set up a payment form.

Expand to complete

1) Obtain IDs and API keys

This step describes how to obtain your website ID, organization ID, and API keys from your Rebilly sandbox account.

When you first log in to Rebilly, you create an organization as part of the setup process. A default website is created when a new organization is created. For more information, see Organizations and websites.

Log in or sign up to Rebilly.
Obtain your organization ID and website ID
1. In the left navigation bar, press Settings .
2. In the Management section, press My organization & websites.
3. In the Organization details section, note the ID value.
4. In the Website section, note the ID value.
Obtain your publishable API key
1. In the left navigation bar, press Automations .
2. In the Development section, press API keys.
3. Optionally, if you have not created a publishable key:
  1. In top right of the screen, press Create API key.
  2. In the API key type section, select Publishable.
  3. Optionally, in the Organizations dropdown, select the organizations that can use the API key.
  4. Optionally, in the Allowed IPs field, enter the IP addresses that are permitted to use the API key.
  5. Press Save API key.
  6. Go to the API keys page.
4. Select a publishable key and copy the Key value.
Obtain your secret API key
1. In the left navigation bar, press Automations .
2. In the Development section, press API keys.
3. Optionally, if you have not created a secret key:
  1. In top right of the screen, press Create API key.
  2. In the API key type section, select Secret.
  3. Optionally, in the Organizations dropdown, select the organizations that can use the API key.
  4. Optionally, in the Allowed IPs field, enter the IP addresses that are permitted to use the API key.
  5. Press Save API key.
  6. Go to the API keys page.
4. Select a secret key and copy the Key value.

2) Create a product

This API interaction creates a product in your Rebilly sandbox account. For more information, see Create a product.

To create a product you must have your Rebilly website ID, organization ID, and secret API key. For more information, see Obtain IDs and API keys.

How to use the interactive example

Enter your organization ID:
1. Beneath the Environment field, press {{server}}.
2. Beneath the URL, press Show nested variables, then press Edit.
3. In the Value field, enter your organization ID and press Save.
Enter your secret API key:
1. Press Security.
2. In the API key field, press {{SecretApiKey}}, then press Set value.
3. In the Value field, enter your secret Rebilly sandbox API key and press Save. For more information, see Prerequisites.
Optionally, to change the product details, press Body.
Press Send.
The id value from this response is used in Step 3.

3) Create a pricing plan

This API interaction creates a pricing plan for a product in your Rebilly sandbox account. For more information, see Create a plan.

To create a pricing plan, you must have a product ID. For more information, see Create a product.

How to use the interactive example

Enter your organization ID:
1. Beneath the Environment field, press {{server}}.
2. Beneath the URL, press Show nested variables, then press Edit.
3. In the Value field, enter your organization ID and press Save.
Enter your secret API key:
1. Press Security.
2. In the API key field, press {{SecretApiKey}}, then press Set value.
3. In the Value field, enter your secret Rebilly sandbox API key and press Save. For more information, see Prerequisites.
Enter the product ID from the Step 2 response.
1. Press Body.
2. In the productId field, enter the id value from the Step 2 response.
3. Optionally, change the plan details.
Press Send.

Set up a payment form

This section describes how to create a payment form and integrate it into your website. This section also describes how to purchase a product and how to create a purchase of a set amount.

Initial setup

Include the library and provide the HTML.

Include the library

Include the Rebilly Instruments library using the Rebilly CDN:

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

index.html

Include your Rebilly Instruments initialization script

Use the defer attribute to ensure the script is executed after the HTML is loaded.

index.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 a HTML element to the RebillyInstrument.mount() function, as a parameter.

index.html

Configure the library

This step describes the basic setup for mounting.

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

index.js

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.

index.js

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, Process payment from an invoice.

index.js

Optional: Include listeners

Use the instrument-ready and purchase-completed to connect to the lifecycle of the library.

instrument-ready

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

index.js

purchase-completed

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

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

index.js

Run the application

Host the files with a local server.

Run a web server

A web server must be used to preview the project, as the browser will block API requests due to CORS.

To run a local server with Python 3, run:

python -m http.server 8000

Make a test payment

Open a browser and navigate to http://localhost:8000/ to see the Rebilly Instruments form.

To complete the payment flow, use this test card number: 4111 1111 1111 1111, with any future expiration date, and any 3-digits for the CVC number. For more test cards, see Test payment cards and IBANs.

Basic set up complete

You now have a basic payout form integration. To learn more, see:

Copy to clipboard

index.html
index.js

1<!doctype html>
2<html lang="en">
3    <head>
4        <title>Payment form</title>
5        <script src="https://cdn.rebilly.com/instruments/@latest/core.js" type="text/javascript"></script>
6        <script src="./index.js" type="text/javascript" defer></script>
7    </head>
8    <body>
9        <div class="rebilly-instruments-summary"></div>
10        <div class="rebilly-instruments"></div>
11    </body>
12</html>

1RebillyInstruments.mount({
2    organizationId: "test-org-2019-12-07",
3    publishableKey: "pk_sandbox_WcUZLs3xwB7dubewna3zJA75wdMBEHeWHOyQww8",
4    websiteId: "example",
5    apiMode: 'sandbox',
6    items: [
7        {
8            planId: 'rebilly-e-book',
9            quantity: 1
10        },
11    ]
12});
13// Optional
14RebillyInstruments.on('instrument-ready', (instrument) => {
15    console.info('instrument-ready', instrument);
16});
17RebillyInstruments.on('purchase-completed', (purchase) => {
18    console.info('purchase-completed', purchase);
19});

Our Solutions

Products

Features

Solutions

About

Integrate a payment form

Prerequisites

1) Obtain IDs and API keys

2) Create a product

3) Create a pricing plan

Set up a payment form

Initial setup

Include the library

Include your Rebilly Instruments initialization script

Specify mounting controls

Configure the library

Initialize the library

Provide Rebilly account data

Provide purchase data

Optional: Include listeners

instrument-ready

purchase-completed

Run the application

Run a web server

Make a test payment

Basic set up complete

Was this helpful?

Our Solutions

Products

Features

Integrate a payment form

Prerequisites

1) Obtain IDs and API keys

2) Create a product

3) Create a pricing plan

Set up a payment form

Initial setup

Include the library

Include your Rebilly Instruments initialization script

Specify mounting controls

Configure the library

Initialize the library

Provide Rebilly account data

Provide purchase data

Optional: Include listeners

instrument-ready

purchase-completed

Run the application

Run a web server

Make a test payment

Basic set up complete

Related topics

Was this helpful?