Multiple payment methods

This topic describes how to combine and use multiple payment methods in the one checkout form.

If you have not used FramePay previously, before you complete this tutorial, add FramePay to a form with one payment method in isolation. For tutorials, see Get started with FramePay.

For most payment methods, input mounting is not required, you only provide the method name when creating the token. However, some payment methods, such as: payment card and bank account, require inputs that must be mounted in your checkout form.

This topic describes how to set up your FramePay form to support the following payment methods:

  • Express method
  • Payment card (requires input mounting).
  • Bank account (requires input mounting).
  • Any other alternative payment method (does not require input mounting).

1. Obtain IDs and a publishable API key

  1. Obtain your organization ID and website ID:
    1. In the left navigation bar, click Settings icon.
    2. Click My organization & websites.
    3. In the Organization info section, note the ID value.
    4. 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.
  2. Obtain your publishable API key:
    1. In the left navigation bar, click Automation icon.
    2. Click Integrations, Custom integrations, and then click API keys.
    3. Optionally, if you have not created a publishable key:
      1. In top right of the screen, click Add API.
      2. In the API Key Type section, select Publishable, then complete the form and click Save API key.
      3. Go back to the API Keys page.
    4. Select a publishable key and copy the Key value.

2. Set up multiple payment methods using FramePay

1

Initial set up

Include the FramePay stylesheet

This adds default styles to FramePay elements on the page.

HTML

Include the FramePay script

This exposes FramePay in the global JS scope as Rebilly.

HTML

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.

HTML

Add mounting points to your form

Add an empty placeholder div with a unique ID for the following payment methods:

  • Express methods (Paypal in this example).
  • Methods that require input elements (payment card and bank account in this case).
HTML
2

Configure FramePay

Initialize

Initialize FramePay with a configuration object.

For more information, see FramePay configuration reference.

JavaScript

Rebilly data

To connect with the Rebilly API, in your configuration object, provide your: publishable API key, organization ID, and website ID.
JavaScript

Transaction data

Provide the transaction data in your configuration object.
JavaScript

Optional: Style FramePay inputs

Customize the card payment and bank account fields to match the look and feel of the rest of your form.

To customize, add the style property in your configuration object.

For all available properties, see Style reference.

JavaScript

Mount the (pre-)selected payment method

After initialization, mount the pre-selected payment method (either card payment or bank account) in their container. Keep track of the current element instances with a cache. This example uses a mountedFrames array as a cache.

Also mount the express methods element in their container.

JavaScript

Handle change when customer selects a different payment method

Note: This step is not necessary for express methods.

When a customer selects a different payment method, destroy the element instances by invoking the .destroy() method.

Then, re-mount the FramePay element for the payment method that was selected by the customer.

JavaScript
3

Get the payment token

Generate a payment token using FramePay.

Express methods

For express methods, when a customer completes the flow, Rebilly creates a payment token.

To retrieve it, listen to the token-ready event.

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

JavaScript

Non-express methods

For non-express methods, to send the form data to FramePay, call Rebilly.createToken().

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

For more information, see Rebilly.createToken(form).

To specify the payment method selected by the customer, when creating the payment token, pass its value as the method property in extraData. This example includes:

  • method: 'payment-method' for card payment.
  • method: 'ach' for bank account.
  • method: 'China UnionPay' for China UnionPay.

For full list of supported methods, see the method payload of the Create payment token operation.

JavaScript

Basic set up complete

To learn more about FramePay, see:

Copy to clipboard
  • JavaScript
  • HTML
  • CSS
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
8 <body>
9 <div class="container mm-example">
10 <div id="paypal-mount"></div>
11
12 <div class="divider"></div>
13
14 <form id="payment-form">
15 <div class="field">
16 <input data-rebilly="firstName" placeholder="First name" />
17 </div>
18 <div class="field">
19 <input data-rebilly="lastName" placeholder="Last name" />
20 </div>
21 <div class="field">
22 <input data-rebilly="emails" placeholder="Email address" />
23 </div>
24
25 <div class="payment-methods">
26 <div class="tabs">
27 <div class="tab">
28 <input type="radio" id="card" name="paymentMethod" value="payment-card" checked />
29 <label class="tab-label" for="card">Payment Card</label>
30 <div class="tab-content">
31 <div id="mounting-point"></div>
32 </div>
33 </div>
34
35 <div class="tab">
36 <input type="radio" id="ach" name="paymentMethod" value="ach" />
37 <label class="tab-label" for="ach">Bank account</label>
38 <div class="tab-content">
39 <div>
40 <div class="field">
41 <label class="label">Account type</label>
42 <div id="bank-account-type"></div>
43 </div>
44 <div class="field">
45 <label class="label">Account number</label>
46 <div id="bank-account-number"></div>
47 </div>
48 <div class="field">
49 <label class="label">Routing number</label>
50 <div id="bank-routing-number"></div>
51 </div>
52 </div>
53 </div>
54 </div>
55
56 <div class="tab">
57 <input type="radio" id="cn-u-pay" name="paymentMethod" value="China UnionPay" />
58 <label class="tab-label" for="cn-u-pay">
59 China UnionPay
60 </label>
61 <div class="tab-content">
62 <div class="flex align-items-center">
63 <div class="text-grey">
64 After submitting your order, you will be redirected to securely complete your purchase.
65 </div>
66 </div>
67 </div>
68 </div>
69 </div>
70 </div>
71
72 <button id="pay-now">Make payment</button>
73 </form>
74 </div>
75 </body>
76</html>

Interactive example

This is an interactive example of a basic checkout form which uses FramePay to tokenize payments from multiple methods

To view console.log messages, click here to open a new window.