# 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

This step describes how to set up the client using a Content Delivery Network (CDN).

Include the Rebilly Instruments library using a CDN:


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

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.

## 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/)