Developer docs
/
Integrate self-hosted payment forms
/
Examples
/
Use a package manager
Last updated
These docs are intended for a developer audience.Dismiss

Use a package manager

This topic describes how to use the Rebilly Instruments JS library with a package manager.

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.

  1. Log in or sign up to Rebilly.
  2. 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.
  3. 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.

2. Set up Rebilly Instruments

In this step you will implement a basic Rebilly Instruments set up using the @rebilly/instruments npm package.

1

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
index.js

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.

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

For more information, see RebillyInstrument.mount().

index.js

Rebilly data

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

index.js

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

index.js
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.

For more information, see 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
4

Basic set up complete

You now have a basic Rebilly Instruments integration. To learn more about Rebilly Instruments, see:

Copy to clipboard
  • index.html
  • index.js
1import RebillyInstruments from '@rebilly/instruments';
2// Mount Rebilly Instruments
3RebillyInstruments.mount({
4  organizationId: "test-org-2019-12-07",
5  publishableKey: "pk_sandbox_WcUZLs3xwB7dubewna3zJA75wdMBEHeWHOyQww8",
6  websiteId: "example",
7  apiMode: 'sandbox',
8  items: [
9    {
10      planId: "rebilly-e-book",
11      quantity: 1,
12    },
13  ],
14});
Previous page
Next page