Other form fields
Gather user input
FramePay can automatically gather data from your payment form and pass it on to the Rebilly.createToken()
request.
This is achieved with the use of data-rebilly
attributes on your input fields.
Here are all supported attributes:
fullName
The form should contain 2 fieldsfirstName
+lastName
or onefullName
firstName
lastName
organization
address
address2
city
region
country
postalCode
(optional: add a custom label via thedata-rebilly-label
attribute)phoneNumbers
(optional: add a custom label via thedata-rebilly-label
attribute)emails
(optional: add a custom label via thedata-rebilly-label
attribute)bic
(exclusive to the BBAN and IBAN methods)bankName
(exclusive to the BBAN and 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.
This way, the token data is sent directly to your backend when the form is posted.
Example
This is an example payment form which has gathers user input and has hidden input fields for injecting token data.
<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>