Use a package manager

This topic describes how to use the Rebilly Instruments JS library using the @rebilly/instruments npm package.

Prerequisites

To complete this guide, you must have a website ID, an organization ID, and a publishable API key.

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 key, continue to Step 1: Initial setup. If you do not, get your IDs and API key in Set up your environment.

This code walkthrough describes how to implement a payment form using

Step 1: Initial setup

Select an installation option, then install the Rebilly Instruments library and provide the HTML.

Install the library

Install the library using one of the following commands:

npm install @rebilly/instruments
yarn add @rebilly/instruments

Include the HTML mounting points

The default mounting points are .rebilly-instruments and .rebilly-instruments-summary. Add these div elements to where you want the payment form to be displayed.

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

Step 2: Configure the library

This step describes the basic setup for mounting the Rebilly Instruments library.

Add import statement

Add an import statement to the top of your file.

Mount the library

Call RebillyInstruments.mount() with your configuration object to initialize the payment form. This method returns a Promise and accepts a single configuration object.

For more information, see RebillyInstrument.mount().

Provide your Rebilly data

Provide your publishable API key, organization ID, and website ID to connect with the Rebilly API.

For more information, see Prerequisites.

Provide purchase data

Specify the purchase details using one of the following properties:

  • items - for product-based purchases.
  • money - for direct amount purchases.
  • invoiceId - for existing invoice payments.
  • transactionId - for existing transaction payments.

For more information, see Provide purchase data to Rebilly Instruments.

Preview

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>
    <body>
        <div class="rebilly-instruments-summary"></div>
        <div class="rebilly-instruments"></div>
    </body>
</html>