Test Your Click to Pay Drop-In UI Configuration

This section contains information about testing your Click to Pay Drop-In UI configuration.

This tutorial assumes you have already completed setup and have your Click to Pay Drop-In UI capture context and SDK configured. For initial setup steps, see Get Started with Click to Pay Drop-In UI.

Test Payment Details

Use these test card numbers to test your Click to Pay Drop-In UI configuration.

Combine the BIN with the card number when sending to Click to Pay Drop-In UI.

Visa Click to Pay Drop-In UI Test Cards

These Visa test cards can be added to your Click to Pay Drop-In UI wallet.

Replace the X in the card number with 4.

You can manage your Visa Click to Pay Drop-In UI test cards and account here:

• Production: https://src.visa.com/login
• Test: https://sandbox.src.visa.com/login

To manage Visa test cards for customer authentication, contact your implementation consultant or technical account manager.

This table lists the Visa test card numbers:

These Visa test card numbers can be used to test ECI05 frictionless authentication. Replace the X in the card number with 4:

These Visa test card numbers can be used to enroll in Passkey Service. Replace the X in the card number with 4:

Mastercard Test Cards

Mastercard test cards can be added to your Click to Pay Drop-In UI wallet. You must retrieve Mastercard test cards from their Click to Pay Drop-In UI test page: Mastercard test cards.

For Mastercard Click to Pay Drop-In UI, a Mastercard window opens and prompts you to enter additional information.

Mastercard has different test cards for retrieving tokenized and non-tokenized data. recommends using these test cards:

• Test cards to retrieve PAN data: use these cards when the customer is completing checkout as a one-time guest and does not have a Click to Pay Drop-In UI account or want to create one.
• Test cards to retrieve token data: use these cards for tokenized Click to Pay Drop-In UI transactions.
• Test cards eligible for tokenization: use these test cards to attempt Click to Pay Drop-In UI authentication when Click to Pay Drop-In UI authentication is enabled.

You can manage your Mastercard Click to Pay Drop-In UI test cards and account here:

• Production: https://src.mastercard.com/profile/enroll
• Test: https://sandbox.src.mastercard.com/profile/enroll

Mastercard authentication test cards are available on the Mastercard Checkout Solutions page in the Mastercard Developer Center.

Error Handling

The Unified Checkout SDK uses a structured error object for all error scenarios. The SDK returns errors as exceptions from asynchronous methods and also returns them as events for centralized handling.

UnifiedCheckoutError

All SDK errors are instances of UnifiedCheckoutError with these properties:

Detecting Errors

Errors might be serialized through postMessage. recommends using the name property instead of instanceof:

try {  const result = await checkout.mount('#buttons');} catch (error) {  if (error.name === 'UnifiedCheckoutError') {    // Access error.reason, error.message, error.details  }}

A helper function can also be written for reuse:

function isUnifiedCheckoutError(obj) {  return (    obj !== null &&    typeof obj === 'object' &&    obj.name === 'UnifiedCheckoutError' &&    typeof obj.reason === 'string' &&    typeof obj.message === 'string'  );}

Error Handling Patterns

Try/Catch

try {  const client = await VAS.UnifiedCheckout(sessionJWT);  const checkout = await client.createCheckout();  const result = await checkout.mount('#buttons');} catch (error) {  console.error(error.reason, error.message);}

Promise .catch()

VAS.UnifiedCheckout(sessionJWT)  .then(client => client.createCheckout())  .then(checkout => checkout.mount('#buttons'))  .catch(error => console.error(error.reason, error.message));

Centralized Error Logging Using Events

Errors from all integrations are also emitted at the client level. The client.on('error') event supports centralized logging:

const client = await VAS.UnifiedCheckout(sessionJWT);client.on('error', (err) => {  errorReporter.send({    source: err.source,   // "checkout", "trigger", "button", or "client"    code: err.code,    message: err.message  });});

recommends this approach because it catches errors from all checkouts, triggers, and buttons created from this client instance.

Error Codes

Initialization Errors

These errors are returned during VAS.UnifiedCheckout(sessionJWT):

Mount Errors

These errors are returned during checkout.mount() or trigger.mount():

Checkout Errors

This table lists the reason values returned during checkout:

Trigger Errors

This table lists the reason value returned for a trigger operation error:

Payment-Specific Errors

This table lists reason values for payment-specific errors:

General Errors

This table lists the reason code returned for an unspecified error: