These docs are intended for a developer audience.
Set up Rebilly Instruments
This topic describes how to set up the Rebilly Instruments JS library.
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
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:
- In the left navigation bar, click Settings .
- In the Management section, click My organization & websites.
- In the Organization details section, note the ID value.
- In the Website section, note the ID value.
- Obtain your publishable API key:
- In the left navigation bar, click Automations .
- In the Development section, click API keys.
- Optionally, if you have not created a publishable key:
- In top right of the screen, click Add API.
- In the API key type section, select Publishable, then complete the form and click Save API key.
- Go back to the API Keys page.
- 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.
Initial setup
Select an installation option, then install the 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
.
To provide custom mounting points, pass a valid CSS class or a HTML element to the RebillyInstrument.mount()
function, as a parameter.
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.
For more information, see RebillyInstrument.mount().
Rebilly data
Provide your publishable API key, organization ID, and website ID, to connect with the Rebilly API.
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
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.
For more information, see 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').
Basic set up complete
You now have a basic Rebilly Instruments integration. To learn more about Rebilly Instruments, see:
- HTML
- JavaScript
1<!doctype HTML>2<HTML>3 <body>4 <div class="rebilly-instruments-summary"></div>5 <div class="rebilly-instruments"></div>6 </body>7</HTML>
1import RebillyInstruments from '@rebilly/instruments';2// Mount Rebilly Instruments3RebillyInstruments.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: 112 },13 ]14});15// Optional16RebillyInstruments.on('instrument-ready', (instrument) => {17 console.info('instrument-ready', instrument);18});19RebillyInstruments.on('purchase-completed', (purchase) => {20 console.info('purchase-completed', purchase);21});