Form set up

The Get started guides describe how FramePay gathers data from your checkout form when you pass it to the Framepay.createToken() method.

You need to use data-rebilly attributes on the input fields of your checkout form.

Customer data attributes

Required attributes

Payment methods, such as: payment card, bank account, and Plaid require customer information. For these methods, the minimum required data is the name of your customer.

Choose between the following options:

• fullName in one input:

...
<input data-rebilly="fullName">
...

• firstName and lastName in two different inputs:

...
<input data-rebilly="firstName">
<input data-rebilly="lastName">
...

Optional attributes

Optionally, add the following data-rebilly attributes to your inputs:

• organization
• address
• address2
• city
• region
• country
• postalCode (optional: add a custom label using the data-rebilly-label attribute)
• phoneNumbers (optional: add a custom label using the data-rebilly-label attribute)
• emails (optional: add a custom label using the data-rebilly-label attribute)
• bic (exclusive to the BBAN methods)
• bankName (exclusive to the IBAN methods)

Inject token data

FramePay can inject the newly created token into your payment form. This is useful for sending the token ID or payment instrument details directly to your own backend, as part of the payment form submission.

This is achieved with the use of hidden input fields, that have specific data-rebilly attributes.

Here are the two supported attributes:

• token The token ID.
• payment-instrument The payment instrument details as a stringified object.

The token data is sent directly to your backend when the form is posted.

Example

This is an example of a checkout form with visible and hidden customer inputs:

<form>
  <fieldset>
    <div class="field">
      <!-- FramePay will automatically gather this input field's value. -->
      <input data-rebilly="firstName" placeholder="First Name" />
    </div>
    <div class="field">
      <!-- FramePay will automatically gather this input field's value. -->
      <input data-rebilly="lastName" placeholder="Last Name" />
    </div>
    <div class="field">
      <!-- FramePay will automatically gather this input field's value. -->
      <input data-rebilly="emails" placeholder="Email" />
    </div>
    <div class="field">
      <!-- FramePay will automatically gather this input field's value. -->
      <input data-rebilly="phoneNumbers" data-rebilly-label="Custom label" placeholder="Phone" />
    </div>

    <!-- The following fields are not visible to the end user.
             Instead, FramePay will populate those fields with token data. -->
    <input type="hidden" data-rebilly="token" name="rebilly-token" />
    <input type="hidden" data-rebilly="payment-instrument" name="rebilly-payment-instrument" />
  </fieldset>
  <button>Pay</button>
</form>