Set up a payment card method

This guide describes how to add the FramePay JavaScript library to a checkout form and use it to tokenize payment card information.

Prerequisites

To complete this guide, you must have: an organization ID, a website ID, and a publishable API key.

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 key, continue to Step 1: Initial setup. If you do not, see Set up your environment.

Step 1: Initial setup

Set up the FramePay library and provide the HTML.

Include the FramePay stylesheet

Add the default styles for the FramePay library elements on the page.

Include the FramePay script

Expose the FramePay library in the global JS scope as Framepay.

Create your checkout form

Create a checkout form on your page.

Define the data-rebilly attributes on your input fields. This instructs the FramePay library to automatically gather data from your checkout form.

Include the HTML mounting points

Add an empty HTML element with a unique ID to your form.

FramePay renders the card input field inside this container.

Step 2: Configure FramePay library

This step describes the basic setup for mounting.

Initialize

Create a configuration object and initialize the FramePay library with it.

For more information, see FramePay configuration reference.

Rebilly data

Provide your publishable API key, organization ID, and website ID to connect with the Rebilly API. For more information, see FramePay configuration reference.

Transaction data

Provide the transaction data. A transaction for a payment card requires amount and currency values.

Step 3: Get the payment token

Mount the FramePay library on your page and listen for a payment token.

Mount the card field

After initialization, mount the card field in the container element.

Create a payment token

When you mount your card element, your customer can complete the form.

To send the form data to the FramePay library, call Framepay.createToken().

  • If the form data is valid, you receive a successful result with a new payment token.
  • If the form data is invalid, you receive an error explaining why.

For more information, see: Framepay.createToken(form).

Preview

This is an interactive example of a basic checkout form that uses the FramePay library to tokenize payment cards. 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 payment cards, IBANs, and ACH details.

To view console.log messages, open the example in a new window.

<!doctype html>
<html>
    <head>
        <link href="https://framepay.rebilly.com/framepay.css" rel="stylesheet" />
        <script src="https://framepay.rebilly.com/framepay.js"></script>
        <script src="./client.js" defer></script>
    </head>
    <body>
        <form id="payment-form">
            <input data-rebilly="firstName" placeholder="First Name" />
            <input data-rebilly="lastName" placeholder="Last Name" />

            <div id="mounting-point"></div>
        </form>
    </body>
</html>