Last updated 2 months ago

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.

Update your customer's payment cards Exp. date and CVV.

 

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 you want to update
  3. Generate the token
  4. Finish the update flow

Set up FramePay

FramePay is part of Rebilly.js. Add the code below to your page to enable it.

<link href="https://framepay.rebilly.com/rebilly.css" rel="stylesheet">
<script src="https://framepay.rebilly.com/rebilly.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.

HTMLJavaScript
<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>
(function () {
    Rebilly.initialize({
        publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs'
    });

    var form = document.querySelector('form');

    Rebilly.on('ready', function () {
        var exp = Rebilly.card.mount('#exp', 'cardExpiry');
        var cvv = Rebilly.card.mount('#cvv', 'cardCvv');

        exp.on('change', function (e) {
            // Handle field errors
        });

        cvv.on('change', function (e) {
            // Handle field errors
        });
    });

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

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

Generate the token

On the JavaScript function where FramePay was initialized, trigger Rebilly.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();

    Rebilly.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