Clearpay Buttongetting-started-clearpay-button

Process the Credit Card

The Clearpay Button works with a virtual Visa credit card.

To process the credit card, use the ClearpayButton.onComplete property that allows a custom function to be defined.

Once defined, the custom function is called when the Clearpay checkout is completed. This custom function is passed an event with a data property. This data property contains the virtual card object and status as sub-properties.

All successful Clearpay checkouts have a status of “SUCCESS”.
event.data.status = "SUCCESS".

Recommendation

For the best customer experience, hide the credit card information and auto-submit the order within the onComplete function.

To process the credit card, modify the code sample below to match your credit card fields:

1ClearpayButton.onComplete = function (event) {
2 const { status, virtualCard, token, authToken } = event.data;
3 // The customer confirmed the payment schedule.
4 // The virtualCard details can be inserted into your checkout
5 if (status === 'SUCCESS') {
6 const { cardNumber, cvc, expiryMonth, expiryYear } = virtualCard;
7 document.getElementById('creditCardNumber').value = cardNumber;
8 document.getElementById('creditCardCvc').value = cvc;
9 document.getElementById('creditCardExpiryMonth').value = expiryMonth;
10 document.getElementById('creditCardExpiryYear').value = expiryYear;
11 // Trigger the submit of your credit card form for the customer
12 document.getElementById('creditCardForm').submit()
13 } else {
14 // The customer cancelled the payment or closed the popup window.
15 }
16};
Note

The virtual Visa card must be authorized less than 60 mins after the card is returned to the merchant.

Billing Address

Use the customer’s home address as the billing address for the credit card.

Data Objects

Virtual Card Object

AttributeTypeDescription
cardTypestringVisa
cardNumberstring16 digit card number
e.g. 4111 1111 1111 1111
cvcstringe.g. 123
expiryMonthstringe.g. 12
expiryYearstringe.g. 2022

Checkout Tokens

AttributeTypeDescription
tokenstringThe Afterpay Order Token
authTokenstringThe Virtual Card Auth Token

Error Handling

You can add an error handling function to return information about failed checkouts. See the Error Handling for more information.

Return to the Clearpay Button guide menu