Click to Pay: Visa and Mastercard Network Saved Cards

Click to Pay is Visa and Mastercard’s network-level saved-card scheme. Cardholders who have enrolled with their issuer can authenticate and pay without entering card details — the payment sheet is provided by the card network, not your page. Therius supports Click to Pay via CyberSource.

Add Click to Pay to your page

Import createClickToPayButton and point it at a container element. The SDK renders the Click to Pay button and manages the authentication flow entirely.

import { createClickToPayButton } from '@therius/sdk'

createClickToPayButton({
  clientToken,
  container: '#ctp-button',
})

When the shopper completes the Click to Pay authentication flow, the SDK returns a nonce. Pass that nonce to your server to complete the charge.

Charge the nonce on your server

Send the nonce as card.nonceData.nonce on POST /payment/purchase, exactly as you would with a hosted-fields nonce:

{
  "paymentMethod": "click_to_pay",
  "card": {
    "nonceData": {
      "nonce": "<nonce from createClickToPayButton>"
    }
  }
}

Your server submits this to POST /v1/payment/purchase with your private API key. The response is the standard PaymentResult shape.

Handling the result

If the charge returns actionRequired, handle it with sdk.handleAction in the browser:

createClickToPayButton({
  clientToken,
  container: '#ctp-button',
  onNonce: async (nonce) => {
    const result = await sdk.authorize(nonce)
    if (result.actionRequired) {
      const finalResult = await sdk.handleAction(result.actionRequired)
    }
  },
})

sdk.handleAction handles any out-of-band step — including 3DS challenges that Click to Pay networks may trigger — and resolves to the final PaymentResult.

Availability and prerequisites

Click to Pay availability depends on the cardholder’s issuer enrollment and your configured CyberSource connection. If the shopper has not enrolled their card with the Click to Pay scheme, the button will not appear for that shopper.

Check the Connections page for details on enabling the CyberSource connection that powers Click to Pay in your Therius account.

Overview

Card Collection

Wallets & More

Click to Pay: Visa and Mastercard Network Saved Cards

Add Click to Pay to your page

Charge the nonce on your server

Handling the result

Availability and prerequisites

​Add Click to Pay to your page

​Charge the nonce on your server

​Handling the result

​Availability and prerequisites

Add Click to Pay to your page

Charge the nonce on your server

Handling the result

Availability and prerequisites