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 fields firstName + lastName or one fullName
• firstName
• lastName
• organization
• address
• address2
• city
• region
• country
• postalCode (optional: add a custom label via the data-rebilly-label attribute)
• phoneNumbers (optional: add a custom label via the data-rebilly-label attribute)
• emails (optional: add a custom label via the data-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>