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.
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:
fullNamein one input:
...
<input data-rebilly="fullName">
...firstNameandlastNamein two different inputs:
...
<input data-rebilly="firstName">
<input data-rebilly="lastName">
...Add the following data-rebilly attributes to collect additional customer data:
| Attribute | Description | Notes |
|---|---|---|
organization | Organization name | — |
address | Street address | — |
address2 | Additional street address line | — |
city | City | — |
region | State or region | — |
country | Country | — |
postalCode | Postal or ZIP code | Add data-rebilly-label for a custom label |
phoneNumbers | Phone number | Add data-rebilly-label for a custom label |
emails | Email address | Add data-rebilly-label for a custom label |
bic | SWIFT or BIC code | For BBAN methods only |
bankName | Bank name | For IBAN methods only |
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 IDpayment-instrument: The payment instrument details as a stringified object
The token data is sent directly to your backend when the form is posted.
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>