Introduction

Click to Pay (C2P) is an industry-wide digital checkout solution introduced by major card networks to provide consumers with a faster, safer, and consistent online payment experience. It allows cardholders to securely store their payment credentials in a digital profile and use them across participating merchants without re-entering card details. The upcoming mandate requires merchants to support this standard for compliant and seamless checkout.

For merchants using the Hosted Payment Page (HPP), Click to Pay will be automatically handled by Telr. However, merchants using Seamless Integration or Remote MPI Integration will need to make frontend integration changes and use the respective API for processing payments.

Frontend Integration

Merchants must integrate the Mastercard SRC SDK and embed Click to Pay (C2P) UI components on their checkout page.

Useful References:

1. Click to Pay Use Cases
2. SDK Reference
3. UI Components

SDK Initialization

Initialize the Mastercard SRC SDK as early as possible in the checkout flow and call the init() method immediately after loading the SDK.

Use the SRC DPA ID to initialize the Mastercard SDK:

Sandbox

Request the sandbox DPA ID from Telr Support.

<script src="https://sandbox.src.mastercard.com/srci/integration/2/lib.js?srcDpaId={{DPAID}}&locale=en_AE" async></script>

Production

Use the SRC DPA ID available in your Telr merchant dashboard.

<script src="https://src.mastercard.com/srci/integration/2/lib.js?srcDpaId={{DPAID}}&locale=en_AE" async> </script>

UI Component Initialization

<script type="module" src="https://src.mastercard.com/srci/integration/components/src-ui-kit/src-ui-kit.esm.js" async></script>
<link rel="stylesheet" href="https://src.mastercard.com/srci/integration/components/src-ui-kit/src-ui-kit.css" async>

Sample request payloads

const params = {
        srcDpaId: "{{DPAID}}",
        dpaData: {
            dpaName: storeName
        },
        dpaTransactionOptions: {
            dpaLocale: "en_AE",
            paymentOptions: [
                {
                    dynamicDataType: "CARD_APPLICATION_CRYPTOGRAM_SHORT_FORM"
                }
            ]
        },
        cardBrands: ["mastercard","visa"],
        checkoutExperience : "WITHIN_CHECKOUT"
    };

{
  "windowRef": document.getElementById('clicktopay_frame').contentWindow;,
  "dpaTransactionOptions": {
    "confirmPayment": false,
    "paymentOptions": [
      {
        "dynamicDataType": "CARD_APPLICATION_CRYPTOGRAM_SHORT_FORM"
      }
    ]
  },
  "srcDigitalCardId": {{selectedCardId}},
  "rememberMe": true
}

Replace 'selectedCardId' with the card id selected by user.

Test cards for frontend testing

• 5186001700008785
• 5186001700009726

📘

Click to Pay (C2P) must only be used for one-time checkout transactions. It does not support recurring or subscription use cases (MIT/CIT payments).