Set up Plaid

This guide describes how to use the FramePay library to tokenize payment data using Plaid.

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 set up. If you do not, see Set up your environment.

Step 1: Initial set up

Set up the FramePay library and create the necessary HTML structure.

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

Specify an empty HTML element where the FramePay library renders the Plaid button.

Edit your checkout form to add a new HTML element with a unique ID.

Step 2: Configure FramePay

This step describes the basic set up for mounting the Plaid button.

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

Transaction data

Provide the transaction data. Plaid requires amount and currency values.

Step 3: Get the payment token

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

Mount the Plaid button

Mount the Plaid button in the container element.

For more information, see:

Listen for the generated payment token

When a customer submits the Plaid payment flow, Rebilly creates a payment token. Listen for the token-ready event to retrieve it.

At this point, you can use the token for other operations, such as creating a payment instrument or transaction.

For more information, see Framepay.on('token-ready', ...).

Preview

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.

<!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="plaid-form">
            <input data-rebilly="firstName" placeholder="First Name" />
            <input data-rebilly="lastName" placeholder="Last Name" />
            <input data-rebilly="address" placeholder="Address" />
            <input data-rebilly="city" placeholder="City" />
            <div id="mounting-point"></div>
        </form>
    </body>
</html>