Integrate a hosted payment form

This guide describes how to integrate a hosted payment form into your website using Express JS and 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.

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

Set up an Express node app to authenticate the client.

Install dependencies

  1. Install the required dependencies in your project directory:
    npm install express rebilly-js-sdk --save
  2. Declare Express and the Rebilly SDK as dependencies.

Set up the server

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

Provide credentials

Provide your secret API key, Organization ID, and website ID. For more information, see Prerequisites.

Initialize Rebilly JS SDK

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

Define route for GET requests

Define a route for handling HTTP GET requests to the /example endpoint. For more information, see Express example.

Define route for POST requests

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 a transaction

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

Configure the redirect

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.

Listen for requests

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

Optional: Display transaction parameters

Display the transaction parameters in a code snippet.

Add a button

Add a button to trigger payment processing.

Step 3: Set up the client

Locate the process payment button

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

Add an event listener

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

Disable the button

Disable the button to prevent multiple clicks.

Send a POST request

Send a POST request to the /payment endpoint.

Provide required data

Provide payment data.

Parse the response

Parse the JSON response from the server.

Redirect the user

Redirect the user to the provided URL.

Log errors

Log any errors that occur during the process.

Re-enable the button

Re-enable the button after the request is complete.

Preview

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 payment cards, IBANs, and ACH details.

const express = require("express");
const RebillyAPI = require("rebilly-js-sdk").default;

const app = express();
const port = 3000;

app.use(express.static("client"));
app.use(express.json());

const REBILLY_API_SECRET_KEY = "REBILLY_API_SECRET_KEY";
const REBILLY_WEBSITE_ID = "REBILLY_WEBSITE_ID";
const REBILLY_ORGANIZATION_ID = "REBILLY_ORGANIZATION_ID";

const rebilly = RebillyAPI({
  sandbox: true,
  organizationId: REBILLY_ORGANIZATION_ID,
  apiKey: REBILLY_API_SECRET_KEY,
});

app.get("/example", async (req, res) => {
  res.redirect(301, "/index.html");
});

app.post("/payment", async function (req, res) {
  const { customerId, currency, amount, redirectUrl, type } = req.body;

  const transaction = await rebilly.transactions.create({
    data: {
      websiteId: REBILLY_WEBSITE_ID,
      customerId,
      currency,
      amount,
      redirectUrl,
      type,
      paymentInstruction: { methods: [] },
    },
  });

  const approvalUrl = transaction.fields._links.find(
    (link) => link.rel === "approvalUrl",
  );
  if (approvalUrl) {
    res.send(approvalUrl);
  } else {
    res.send(transaction.fields);
  }
});

app.listen(port, () => {
  console.log(`Sandbox listening on port ${port}`);
});