This is an interactive example of a Rebilly hosted payment form. Press **Process payment** to see the hosted form. 
To complete the payment flow, enter any 3-digits for the CVC number.
For more test cards, see [Test cards, IBANs, and ACH details](/docs/tutorials/test-payment-cards).

iframe
# Integrate a hosted payment form

This guide describes how to integrate a hosted payment form into your website using [Express JS](https://expressjs.com/en/starter/installing.html) and [Rebilly JS SDK](https://www.npmjs.com/package/rebilly-js-sdk).
Use payment forms to process payments from your customers.

Hosted payment forms simplify the process of accepting payments.
Rebilly hosts your payment forms and ensures that your payments process is secure and [PCI-compliant](/docs/glossary#payment-card-industry-pci-compliance).

details
summary
Prerequisites
To complete this guide, you must have a website ID, an organization ID, a publishable API key, a product ID, and a pricing plan ID.

You also must have at least one payment gateway configured in your Rebilly account.
If you are testing in the sandbox environment, a test payment gateway called `TestProcessor` is already configured.

To obtain your IDs and API keys, and to create a product and pricing plan, see [Set up your environment](/docs/dev-docs/set-up-environment).
If you have already created a product and pricing plan, and know how to obtain your IDs and API keys, skip this step and continue to [Step 1: Set up the server](#step-1-set-up-the-server).

## 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 --save
```
2. Declare Express and the Rebilly SDK as dependencies.


Set up an Express.js web server that serves static files from a 'client' directory and can parse JSON request bodies.

Provide your secret API key, Organization ID, and website ID.
For more information, see [Prerequisites](/docs/dev-docs/get-started-integrate-hosted-payments#prerequisites).

Set up the Rebilly JS SDK, and provide sandbox mode and API key.

Define a route for handling HTTP GET requests to the `/example` endpoint.
For more information, see [Express example](https://expressjs.com/en/starter/hello-world.html).

Define route for handling HTTP POST requests to the `/payment` endpoint,
and extract parameters from `customerId`, `currency`, `amount`, and `redirectUrl` from the request body.
These values are used to create a transaction.

> **Note:** `redirectUrl` is the URL that the customer is redirected to after a payment is completed.


Create an asynchronous transaction that sends data to the Rebilly API and waits for a response.

Check if the response includes an `approvalUrl`.
This value is the hosted payment form.

If this value is included in the response, redirect the client to the URL to complete the payment.

If this value is not returned, send the transaction details back to the client.

Start an Express server on port `8080`, listen for host and port information from the server, and log a messages to the console.

## Step 2: Set up the HTML page

For this guide, `index.html` and `client.js` must be placed in a `client` directory in the root of your project.

Add client.js to the HTML page.

Add div to the HTML page and assign it the ID `app`.
This is where the payment form will be displayed.

Display the transaction parameters in a code snippet.

Add a button to trigger payment processing.

## Step 3: Set up the client

Locate the button element with the ID `process` in the HTML form.

Add an event listener to the button element to listen for press events.

Disable the button to prevent multiple clicks.

Send a POST request to the `/payment` endpoint.

Provide payment data.

Parse the JSON response from the server.

Redirect the user to the provided URL.

Log any errors that occur during the process.

Re-enable the button after the request is complete.

## Step 4: View the payment form

This section describes how to view the hosted 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/get-started-integrate-hosted-payments#prerequisites).


```bash
node server.js
```