Set up Rebilly Instruments

This topic describes how to set up the Rebilly Instruments JS library.

Important

Before you start this tutorial, if you have not already done so, set up a payment gateway. An active gateway is required.

1. Obtain IDs and a publishable API key

  1. Obtain your organization ID and website ID:
    1. In the left navigation bar, click Settings icon.
    2. Click My organization & websites.
    3. In the Organization info section, note the ID value.
    4. In the Website section, note the ID value. A website and organization is created automatically when you sign up to Rebilly. For more information, see Organizations and websites.
  2. Obtain your publishable API key:
    1. In the left navigation bar, click Automation icon, then click API keys.
    2. Optionally, if you have not created a publishable key:
      1. In top right of the screen, click Add API.
      2. In the API Key Type section, select Publishable, then complete the form and click Save API key.
      3. Go back to the API Keys page.
    3. Select a publishable key and copy the Key value.

2. Set up Rebilly Instruments

In this step you will implement a basic Rebilly Instruments set up. Select one of the following options to install the library.

Use package manager
Use Content Delivery Network (CDN)
1

Initial setup

Install the library and provide the HTML.

Install the library

Install the Rebilly Instrument library using NPM or Yarn

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

Include the HTML mounting points

The default mounting points are rebilly-instruments and rebilly-instruments-summary. To provide your own mounting points, pass a valid CSS class or a HTML element to the RebillyInstrument.mount() options.

HTML
2

Configure the library

This step describes the basic set up for mounting.

Mount

Use this method to initialize the library and to configure the experience. This method returns a Promise and accepts a single configuration object.

RebillyInstrument.mount()
JavaScript

Rebilly data

Provide your publishable API key, organization id, and website id, to connect with the Rebilly api.
JavaScript

Purchase data

Provide details of the purchase amount, using one of following properties:

  • items
  • money
  • invoiceId
  • transactionId

For more information, see Provide purchase data to Rebilly Instruments

JavaScript
3

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')
JavaScript

purchase-completed

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

RebillyInstruments.on('purchase-completed')
JavaScript

Basic set up complete

You now have a basic Rebilly Instruments integration.

To learn more about Rebilly Instruments, see:

Copy to clipboard
  • JavaScript
  • HTML
1import RebillyInstruments from '@rebilly/instruments';
2// Mount Rebilly Instruments
3RebillyInstruments.mount({
4  publishableKey: 'pk_sandbox_123',
5  organizationId: 'org-123',
6  websiteId: 'my-website-id',
7  apiMode: 'sandbox',
8  items: [
9    {
10      planId: 'my-plan-id',
11      quantity: 1
12    },
13  ]
14});
15// Optional
16RebillyInstruments.on('instrument-ready', (instrument) => {
17  console.info('instrument-ready', instrument);
18});
19RebillyInstruments.on('purchase-completed', (purchase) => {
20  console.info('purchase-completed', purchase);
21});
1

Initial setup

Install the library and provide the HTML.

Install the library

Install the Rebilly Instrument library using the following script and add it to your HTML file:

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

To use a previous version of the library, use:

https://cdn.rebilly.com/instruments/@VERSION_NUMBER/core.js
HTML

Include the HTML mounting points

The default mounting points are rebilly-instruments and rebilly-instruments-summary. To provide your own mounting points, pass a valid CSS class or a HTML element to the RebillyInstrument.mount() options.

HTML
2

Configure the library

This step describes the basic set up for mounting.

Mount

Use this method to initialize the library and to configure the experience. This method returns a Promise and accepts a single configuration object.

RebillyInstrument.mount()
JavaScript

Rebilly data

Provide your publishable API key, organization id, and website id, to connect with the Rebilly api.
JavaScript

Purchase data

Provide details of the purchase amount, using one of following properties:

  • items
  • money
  • invoiceId
  • transactionId

For more information, see Provide purchase data to Rebilly Instruments

JavaScript
3

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')
JavaScript

purchase-completed

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

RebillyInstruments.on('purchase-completed')
JavaScript

Basic set up complete

You now have a basic Rebilly Instruments integration.

To learn more about Rebilly Instruments, see:

Copy to clipboard
  • JavaScript
  • HTML
1<!doctype HTML>
2<HTML>
3  <head>
4    <script src="https://cdn.rebilly.com/instruments/@latest/core.js" type="text/javascript"></script>
5  </head>
6  <body>
7    <div class="rebilly-instruments-summary"></div>
8    <div class="rebilly-instruments"></div>
9  </body>
10</HTML>

Interactive example