This is an interactive example of a payment form that uses the Rebilly Instruments library. 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 cards, IBANs, and ACH details](/docs/tutorials/test-payment-cards). div iframe # Payment form using a JWT This guide describes how to integrate an embedded payment form into your website using the Rebilly Instruments JavaScript library, [Rebilly JS SDK](https://www.npmjs.com/package/rebilly-js-sdk), and [Express JS](https://expressjs.com/en/starter/installing.html). This guide describes how to configure the payment form to retrieve a customer JWT from a backend endpoint and use the JWT to process payments for both invoices and transactions. details summary Prerequisites To complete this guide, you must have: a website ID, an organization ID, a secret API key, a product ID, pricing plan ID, a customer ID, and an order ID. 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 keys, continue to [Step 1: Set up the server](#step-1-set-up-the-server). If you do not, create a product and pricing plan, and get your IDs and API key in [Set up your environment](/docs/dev-docs/set-up-environment). ## Step 1: Set up the server Set up an Express node app to authenticate the client. 1. Install the required dependencies in your project directory: ```bash npm install express rebilly-js-sdk body-parser --save ``` 2. Declare Express and the Rebilly SDK as dependencies. Configure an Express.js web server to serve static files and parse JSON requests. Add your secret API key, organization ID, and website ID. For more information, see [Prerequisites](/docs/dev-docs/process-a-payment-jwt#prerequisites). Initialize the Rebilly JS SDK with sandbox mode and API key. Create a route for handling HTTP GET requests to the `/checkout` endpoint. For more information, see [Express example](https://expressjs.com/en/starter/hello-world.html). Create a route for handling HTTP POST requests to the `/authenticate` endpoint. This request authenticates the customer. You can use any endpoint. In this example it is called `authenticate`. In the request body, provide a `customerId` and set `mode: "passwordless"` for `rebilly.customerAuthentication.login`. Exchange the login token for a JWT that will be used by the Rebilly Instruments library in the client. In the `scope` object, add your organization ID. For more information, see [Prerequisites](/docs/dev-docs/process-a-payment-jwt#prerequisites). In the `permissions` array, add operation IDs for all actions used in the Rebilly Instruments library in the client. In the `customClaims` object, add your website ID. For more information, see [Prerequisites](/docs/dev-docs/process-a-payment-jwt#prerequisites). You can also add the `invoiceId` or `transactionId` in the `customClaims` object and omit them in the client when mounting the Rebilly Instruments library. Return the JWT token from the token exchange. Start an Express server on port 3000 and log message to the console. ## Step 3: Set up the client For this guide, `index.html` and `client.js` must be placed in a `client` directory in the root of your project. Include the Rebilly Instruments library using a CDN: ```HTML https://cdn.rebilly.com/instruments/@latest/core.js ``` Add `client.js` to the HTML page. Add a div to the HTML page and assign it the ID `app`. This is where the payment form will be displayed. The default mounting points are: - `rebilly-instruments` - `rebilly-instruments-summary` To use custom mounting points, pass a valid CSS class or HTML element to the `RebillyInstrument.mount()` function. ## Step 4: Configure the library This step describes the basic setup for mounting. Get the `customerId` from `URLSearchParams` of the hosting page and send it to the server endpoint to exchange for a customer JWT. For demonstration purposes, this example uses a hardcoded `customerId` value in `client.js`. In a production environment, you must obtain the `customerId` value from the `URLSearchParams` of the hosting page. Initialize the library and configure the experience. This method returns a promise and accepts a single configuration object. For more information, see [RebillyInstruments.mount()](/docs/dev-docs/reference-rebilly-instruments/#rebillyinstrumentsmount). Select one of the following: details summary Process from an invoice Add the `invoiceId` value of an invoice you want to process. To create an order, see [Prerequisites](/docs/dev-docs/process-a-payment-jwt#prerequisites). ```javascript invoiceId: 'an-invoice-id', jwt: 'token', ``` details summary Process from a transaction Add the `transactionId` value of a transaction you want to process. ```javascript transactionId: 'a-transaction-id', jwt: 'token', ``` Set the `apiMode` value as `sandbox` or `live` based on your environment. Website and organization IDs are obtained from the JWT token. A JWT is required to process a purchase based on `invoiceId` or `transactionId`. The following purchase data properties are available: `items`, `money`, `invoiceId`, `transactionId`. For more information, see [Purchase data examples](/docs/dev-docs/example-rebilly-instruments-purchase-data/). It is also possible to obtain the `invoiceId` value from the `jwt` value. For more information, see [Purchase data examples](/docs/dev-docs/example-rebilly-instruments-purchase-data/). ## Step 4: Optional: Include listeners Use the `instrument-ready` and `purchase-completed` events to connect to the Rebilly Instruments library lifecycle. Indicates when an instrument token is created and provides access to the instrument response. [RebillyInstruments.on('instrument-ready')](/docs/dev-docs/reference-rebilly-instruments/#rebillyinstrumentsoninstrument-ready) Indicates when a purchase is completed and provides access to the transaction response. For more information, see [RebillyInstruments.on('purchase-completed')](/docs/dev-docs/reference-rebilly-instruments/#rebillyinstrumentsonpurchase-completed). If you are using a local server, use this listener to view the transaction response in the browser console. ## Step 5: View the payment form This section describes how to view the payment form in a web browser. Run `server.js`. When the server is running, open a browser and visit `http://localhost:3000`. For more information, see [Prerequisites](/docs/dev-docs/process-a-payment-jwt/#prerequisites). ```bash node server.js ``` ## Related topics - [Customize Rebilly Instruments](/docs/dev-docs/customize-rebilly-instruments/) - [Examples](/docs/dev-docs/examples-rebilly-instruments/) - [Reference](/docs/dev-docs/reference-rebilly-instruments/)