Click to Pay

​

Key features and benefits

• Ease of Use: It enables consumers to make online purchases with a single click, eliminating the need to enter credit card details for each purchase manually.
• Enhanced Security: Utilizes modern authentication standards to minimize fraud risk. This may include methods such as two-factor authentication or payment tokens.
• Consistent Across Various Sites: Offers a similar payment experience across all websites that support this technology, meaning consumers don’t have to learn different processes for each online store.
• Integration with Card Brands: Being backed by major card brands, Click to Pay is widely accepted and trusted.
• Mobile and Desktop Compatibility: Designed to work across various devices, it facilitates online shopping on both desktops and mobile devices.

​

Integration

1. Create a connection in the Yuno dashboard using your Click to Pay credentials.
   
2. Define the payment method route in the Routing section to enable it in the Checkout Builder.
   
3. Enable Click to Pay in the Checkout builder.
   
4. Define the Card route: Taking in consideration that Click to Pay is a wallet that stores credit card information, the route where you will need to define the providers for each scenario is the same as the Card payment method.

​

Checkout Flows

​

1. Standalone Payment Method (APM Flow)

• Mandatory Enrollment: Account creation is mandatory for all users.
• Payload Requirement: Requires a C2P-specific payload.
• Visibility: Best for merchants who want Click to Pay prominently featured.

​

2. Embedded in Card (Golden Flow)

• Optional Enrollment: Enrollment is via a checkbox. If declined, the user proceeds with manual card entry (the transaction still shows CLICK_TO_PAY in the one-time token (OTT)).
• Visibility: Best for low-friction UX where enrollment feels optional.

​

Card vaulting on successful payment

​

Payment status lifecycle

• READY_TO_PAY — or PENDING with sub-status WAITING_ADDITIONAL_STEP or DELAYED_PROVIDER_RESPONSE — means the provider requires an additional step (for example 3DS, a redirect, or a provider OTP), and the SDK executes it.
• Any other status means the payment is already resolved, and the SDK reports the final status.

​

Activation Guide

​

Option 1: Click to Pay Only (APM)

1. Request the DPA ID from the card network (for example, Mastercard).
2. Add the Click to Pay connection in the Yuno dashboard using the DPA ID.
3. Add the card connection that will process these cards.
4. Define the payment method route in Routing and enable Click to Pay in the Checkout Builder.

​

Option 2: Click to Pay + Passkey

1. Request the DPA ID from the card network (for example, Mastercard).
2. Add the Click to Pay connection using the DPA ID.
3. Add the card connection and configure the Acquirer BIN.
4. Request the Yuno backend team to enable the Passkey and Dual Payload flags.
5. Create checkout sessions with a price for Passkey to work correctly.

​

Option 3: Click to Pay + Golden Flow

1. Request the DPA ID from the card network (for example, Mastercard).
2. Add the Click to Pay connection using the DPA ID.
3. Add the card connection that will process these cards.
4. Request the Yuno backend team to enable the Golden Flow flag.

​

Option 4: Click to Pay + Golden Flow + Passkey

1. Request the DPA ID from the card network (for example, Mastercard).
2. Add the Click to Pay connection.
3. Add the card connection and configure the Acquirer BIN.
4. Request the Yuno backend team to enable Passkey, Dual Payload, and Golden Flow flags.
5. Create checkout sessions with a price for Passkey to work correctly.

​

Click to Pay on VTEX

​

SDK integration (Click to Pay Passkey)

{
  "callback_url": "myapp://pay/ctp"
}

​

Mobile: handling the response (OTT and deeplink)

• has_error — an error occurred or the shopper canceled. Read the message parameter and show the error.
• one_time_token — the transaction succeeded and the OTT is contained in the URL.

1. Send it to your backend to create the payment via the Create payment endpoint.
2. Continue the flow in the SDK with continuePayment to finalize the transaction.

• iOS — in application(_:open:options:). Call Yuno.receiveDeeplink(url) to close the Passkey browser, then read the parameters from url.
• Flutter — in your deeplink handler. await Yuno.receiveDeeplink(url: uri) to close the Passkey browser, then read the parameters from uri.
• Android — the deeplink relaunches your Activity (there is no SDK close call). Read the parameters from intent.data in onCreate/onNewIntent. The receiving activity must declare an intent-filter in AndroidManifest.xml matching the scheme/host/path of your callback_url.

func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
    guard url.scheme == "myapp" else { return false }
    Yuno.receiveDeeplink(url) // closes the Passkey browser

    let items = URLComponents(url: url, resolvingAgainstBaseURL: false)?.queryItems
    if items?.contains(where: { $0.name == "has_error" }) == true {
        // handle error (read the `message` parameter)
    } else if let ott = items?.first(where: { $0.name == "one_time_token" })?.value {
        // send `ott` to your backend, then continue the flow in the SDK
    }
    return true
}

Future<void> _handleDeepLink(Uri uri) async {
    await Yuno.receiveDeeplink(url: uri); // closes the Passkey browser

    if (uri.queryParameters.containsKey('has_error')) {
        // handle error (read the `message` parameter)
    } else {
        final ott = uri.queryParameters['one_time_token'];
        if (ott != null) {
            // send `ott` to your backend, then continue the flow in the SDK
        }
    }
}

override fun onNewIntent(intent: Intent) {
    super.onNewIntent(intent)
    val uri = intent.data ?: return

    when {
        uri.getBooleanQueryParameter("has_error", false) ->
            showError(uri.getQueryParameter("message") ?: "Operation canceled")

        uri.getQueryParameter("one_time_token") != null -> {
            val ott = uri.getQueryParameter("one_time_token")
            // send `ott` to your backend, then continue the flow in the SDK
        }
    }
}

​

Authentication method

​

Card type filter and CVV behavior