API ReferencesGithubSupport CenterStatus pageBecome a Partner

Configuring the Add Payment Method Button

To configure the Add payment method button on your website to save a card token without processing a transaction:

1

Copy the following example code.

<script>
       Clearent.payButton({
        "card-token-only": true,
        "heading-text": "Enter card information below",
        "card-acceptance-label": ""
        });
</script>
2

Paste it into your web page.

The Add payment method button appears on your website to allow customers to add a payment method for future purchases.

Add payment method button

When customers select the Add payment method button, a hosted page opens to save their card information. The hosted page includes fields for card details and an optional billing address section.

Payment form with the optional billing address

Providing the Saved Payment Methods

You can provide saved payment methods to your customers for easier checkout process:

Call the ClearentOnSuccess function, including the following parameters:

  • Token: The token returned from a sale request, or the token returned from a sale request with the save card option.

  • Card Type: The type of card used in the previous transaction.

  • Description: The description returned from a sale request with the save card option. See Configuring Payment Page with the Save Card Option for more information.

<script>
    function ClearentOnSuccess(responseRaw, ResponseJSON) {
        // If you set the card-token-only option on your page, you can get the
        // token information back like this.
        if (ResponseJSON.payload && ResponseJSON.payload.tokenResponse) {
            var tokenResponse = ResponseJSON.payload.tokenResponse;
            console.log('token-id = ' + tokenResponse['token-id']);
            console.log('token card-type = ' + tokenResponse['card-type']);
            console.log('token description = ' + tokenResponse['description']);
        }
        // If you set the show-save-card-option on your page AND the user chose
        // to save their card, you can get the token information back like this.
        if (ResponseJSON.links) {
            var links = ResponseJSON.links;
            for (var i = 0; i < links.length; i++) {
                if (links[i]['rel'] == "token") {
                    console.log('token-id = ' + links[i]['id']);
                }
            }
        }
    }

Providing the Saved Card Options

You can provide the below saved card options to your customers using the Clearent.addToken() method:

  • Enter Card Manually: This option allows your customers to enter card information manually if they do not want to use a saved card.

  • Card Description: This option displays the card description provided from the addToken method. See Configuring Payment Page with the Save Card Option for more information.

  • Card type ending in [last four digits of card]: This option displays the card type and card number (last four digits) from the addToken method if the description was not provided for a saved card.

  • Card ending in [last four digits of card]: This option displays the card number (last four digits) from the addToken method if the description was not provided for a saved card.

<script>
       Clearent.setProperty("pk", "307a301406072a864.....8ce3d076fde833c136b");
       Clearent.addToken({"token":"1100005218649761111","cardType":"VISA"});
       Clearent.addToken({"token":"1312451222335452217","cardType":"MasterCard"});
       Clearent.addToken({"token":"1142451131215453214","description":"Vacation card"});
       Clearent.addToken({"token":"1412451141215454218","cardType":"Visa","description":"Business travel card"});
       Clearent.addToken({"token":"1512451151215455211"});
       Clearent.addToken({"token":"1612451161215456216"});
       Clearent.payButton({"amount": "64.50"});
</script>

The following payment popup with the saved card options dropdown list will be displayed for the Card Number field on your website.

Payment form
PreviousConfiguring Payment Page with the Save Card OptionNextStyling Your Brand on the Payment Page

Last updated

Was this helpful?