Updating payment instruments

Keeping customers' payment card information up to date is very important. With FramePay, updating payment card information is simple, safe, and secure. Use a separated fields form to update the expiration date, CVV, or billing address.

It is possible to update only one field too (e.g. CVV).

The process is similar to creating a payment instrument using the generated FramePay token. To update a payment instrument:

1. Set up FramePay.
2. Create a form with the fields that you want to update.
3. Generate the token.
4. Finish the update flow.

Set up FramePay

Add the code below to your page to enable Framepay.

<link href="https://framepay.rebilly.com/framepay.css" rel="stylesheet" />
<script src="https://framepay.rebilly.com/framepay.js"></script>

Create a form with the fields you want to update

This step is similar to setting up a checkout form, but you will use a separated form style to capture the fields you want to update. You can also update the billing address by adding fields with inputs that include the data-rebilly data attribute.

<form>
    <fieldset>
        <div class="fields">
            <div class="field">
                <label for="exp">Exp. Date</label>
                <div id="exp">
                    <!-- FramePay will inject the payment card exp. field here -->
                </div>
                <div class="error"></div>
            </div>
            <span></span>
            <div class="field">
                <label for="cvv">CVV</label>
                <div id="cvv">
                    <!-- FramePay will inject the payment card CVV field here -->
                </div>
                <div class="error"></div>
            </div>
        </div>
    </fieldset>
    <button type="submit">Update payment card</button>
</form>

Generate the token

On the JavaScript function where FramePay was initialized, trigger Framepay.createToken to generate and inject the payment token into your form. We will use this token later to update the payment instrument.

form.addEventListener('submit', function (e) {
    e.preventDefault();
    e.stopPropagation();

    Framepay.createToken(form)
        .then(result => {
            console.log('FramePay success', result);
            window.parent.postMessage('success', '*')
        })
        .catch(error => {
            console.log('FramePay error', error);
            window.parent.postMessage('error', '*')
        });
});

Finish the update flow

Now that your FramePay token is generated, use any of the Rebilly's backend SDKs to finish the update process.

The update process only requires the id of the payment instrument you want to update and the token generated by FramePay.

Rebilly API SDKs

• Rebilly SDK for PHP
• Rebilly SDK for Node.js