Set up Plaid
This topic describes how to use FramePay to tokenize payments made using Plaid.
1. Obtain IDs and a publishable API key
- Obtain your organization ID and website ID:
- In the left navigation bar, click
. - Click My organization & websites.
- In the Organization info section, note the ID value.
- In the Website section, note the ID value. A website and organization is created automatically when you sign up to Rebilly. For more information, see Organizations and websites.
- In the left navigation bar, click
- Obtain your publishable API key:
- In the left navigation bar, click
, then click API keys. - Optionally, if you have not created a publishable key:
- In top right of the screen, click Add API.
- In the API Key Type section, select Publishable, then complete the form and click Save API key.
- Go back to the API Keys page.
- Select a publishable key and copy the Key value.
- In the left navigation bar, click
2. Set up Plaid
This step describes how to use FramePay to tokenize payments made using Plaid.
Initial set up
Set up the library and provide the HTML.
Include the FramePay stylesheet
This adds default styles to FramePay elements on the page.
Include the FramePay script
This exposes FramePay in the global JS scope as Rebilly.
Create your checkout form
FramePay automatically gathers data from your checkout form.
To enable this, you must use data-rebilly attributes on your input fields.
Include the HTML mounting points
You must specify an empty HTML element where FramePay renders the Plaid button.
Edit your checkout form to add new HTML element with a unique ID.
Configure FramePay
This step describes the basic set up for mounting.
Initialize
Initialize FramePay with a configuration object.
Rebilly data
Transaction data
Provide the transaction data. Plaid requires amount and currency.
Get the payment token
Mount FramePay onto your page and listen for a payment token.
Mount the Plaid button
After initialization, mount the Plaid button in the container element.
Listen for the generated payment token
When a customer submits the Plaid form, Rebilly creates a payment token.
To retrieve it, listen for the token-ready event.
Basic set up complete
To learn more about Plaid and FramePay, see:
- JavaScript
- HTML
1Rebilly.initialize({2 publishableKey: 'pk_sandbox_123',3 organizationId: 'org-123',4 websiteId: 'website-123',5 transactionData: {6 currency: 'USD',7 amount: 10,8 },9});10Rebilly.on('ready', function () {11 const form = document.getElementById('plaid-form');12 const extraData = {};13 const plaid = Rebilly.plaid.mount('#mounting-point',14 {form, extraData});15});16Rebilly.on('token-ready', (data) => {17 // At this point you can handle the payment token18 // the way you normally would19 console.log('Payment token:', data);20});1<!doctype HTML>2<HTML>3<head>4 <link href="https://framepay.rebilly.com/rebilly.css" rel="stylesheet">5 <script src="https://framepay.rebilly.com/rebilly.js"></script>6</head>7<body>8<form id="plaid-form">9 <input data-rebilly="firstName" placeholder="First Name" />10 <input data-rebilly="lastName" placeholder="Last Name" />11 <input data-rebilly="address" placeholder="Address" />12 <input data-rebilly="city" placeholder="City" />13 <div id="mounting-point"></div>14</form>15</body>16</HTML>