Skip to main content

Click to Pay

Introduction​

Click to Pay is the consumer-facing implementation of the Secure Remote Commerce (SRC) Framework, providing a streamlined checkout experience for online payments. It's the actual checkout button and user interface that consumers see when making payments online.

Key Benefits:

  • Security: Built on EMVCo standards with the same level of security as in-store purchases
  • Convenience: One-click checkout without entering card details repeatedly
  • Universal: Supported by Mastercard, and Visa globally
  • Control: Consumers maintain full control over their payment preferences

How It Works​

Consumers enroll in Click to Pay through participating card issuers. Once enrolled, they can securely pay online wherever they see the Click to Pay icon using their preferred card.

Developed by: Mastercard, Visa
Built on: EMVCo standards

Click to Pay includes the following functionalities:

  • Auto Enrollment (Issuer initiated)
    Issuer initiated enrollment where cardholders are auto-enrolled into Click to Pay without taking any action.
  • Push Provisioning (Cardholder initiated)
    Cardholder initiated enrollment on Issuer’s app or website, where consumers take specific action to complete the enrollment.
  • Consumer Details Management (Lifecycle Management)
    Post enrollment, Consumer Details Management API integration provides actions to manage consumer Click to Pay profiles and cards.

Secure Remote Commerce​

The EMV SRC Specifications provide a common baseline for the development of Click to Pay e-commerce payment solutions. An Application Programming Interface (API) Specification and Java Script Software Development Kit (SDK) Specification support common integration, while User Interface Guidelines and Requirements promote a consistent user experience.

Resource: https://www.emvco.com/emv-technologies/secure-remote-commerce/

User Experience​

Push Provisioning​

1. When user logs into the app and views card, Add to Click to Pay button is displayed together with other digital wallet enrollment options.
2. User initiates push provisioning by tapping Add to Click to Pay button, user is prompted with high level Click to Pay information.
3. User proceeds and reviews personal information.
4. User might have to give consent to sharing PII with Click to Pay.
5. Click to Pay push provisioning is completed, and Click to Pay options are displayed for the specific card.

Click to Pay UX

Consumer Details Management​

1. When user logs into the app and views card, Click to Pay options are displayed for the specific card.
2. When user taps Click to Pay options, Click to Pay consumer details and card billing address is displayed.
3. User can update consumer details and billing address.
4. User can suspend Click to Pay for the selected card.
5. User can opt-out of Click to Pay entirely.

Click to Pay UX

Functions​

This section covers the SDK methods and API endpoints available for Click to Pay integration.

Push Provisioning (SDK)​

Push (Enroll)​

Push (enroll) specified card to Click to Pay.

Important
  • Mastercard: externalConsumerId is generated and provided by Mastercard.
    Pass nil or null as the value of the parameter, depending on the language.
  • Visa: externalConsumerId is generated and provided by the Issuer's app.
  • Billing Address line1, line2, line2, line3 length must not exceed 64 characters.
String cardId = "<value>";
String cardSecret = "<value>";
MppCardDataParameters cardParams = MppCardDataParameters.withCardSecret(cardId, cardSecret);

MppPhone phone = new MppPhone("1", "2121234567");

MppConsumerInformation consumerInformation = new MppConsumerInformation(
    "6f680264-9cad-49c7-a673-fcf8e112ef68", "Jane", "A.", "Doe", phone, "jane.doe@mail.com", "en_US", "US"
);

MppBillingAddress billingAddress = new MppBillingAddress(
    "123 Main St.", "", "", "New York", "NY", "10001", "US"
);

MeaPushProvisioning.push(MeaPushProvisioning.ClickToPay, cardParams, consumerInformation, billingAddress, new MppPushListener() {
    @Override
    public void onSuccess(String requestTraceId, String externalConsumerId) {
        ...
    }

    @Override
    public void onFailure(MppError error) {
        ...
    }
});

Check​

Check if specified card is added to Click to Pay.

MeaPushProvisioning.check(MeaPushProvisioning.ClickToPay, cardParams, new MppGetTokensListener() {
    @Override
    public void onSuccess(MppPaymentNetwork paymentNetwork, String lastFourDigits, @Nullable List<String> tokensIdList) {
        // Handle success.
    }

    @Override
    public void onFailure(@NonNull MppError error) {
        // Handle error.
    }
});

Consumer Details Management​

Get Consumer Details​

Retrieve consumer and cards (payment instrument) information.

MeaPushProvisioning.getConsumerDetails(MeaPushProvisioning.ClickToPay, MppPaymentNetwork.VISA, externalConsumerId, new MppConsumerDetailsListener() {
    @Override
    public void onSuccess(@NonNull MppConsumerDetails consumerDetails) {
        // Handle success
    }

    @Override
    public void onFailure(@NonNull MppError error) {
        // Handle error
    }
});

Update Consumer Details​

Update consumer information.

MeaPushProvisioning.updateConsumerDetails(MeaPushProvisioning.ClickToPay, MppPaymentNetwork.VISA, consumerInformation, new MppPushResponseDataListener() {
    @Override
    public void onSuccess(@NonNull MppPushResponseData data) {
        // Handle success.
    }

    @Override
    public void onFailure(@NonNull MppError error) {
        // Handle error.
    }
});

Update Card Details​

Update card details.

MeaPushProvisioning.updateCardDetails(MeaPushProvisioning.ClickToPay,
                                      MppPaymentNetwork.VISA,
                                      externalConsumerId,
                                      cardParams,
                                      cardholderName,
                                      expiryYear,
                                      expiryMonth,
                                      billingAddress,
                                      externalCardId,
                                      new MppPushResponseDataListener() {
    @Override
    public void onSuccess(@NonNull MppPushResponseData data) {
        // Handle success.
    }

    @Override
    public void onFailure(@NonNull MppError error) {
        // Handle error.
    }
});
Important

externalCardId - optional parameter, only for Mastercard.

Opt-out Consumer​

Delete consumer information and all cards (payment instruments) related to the profile.

MeaPushProvisioning.deleteConsumer(MeaPushProvisioning.ClickToPay,
                                   MppPaymentNetwork.VISA,
                                   externalConsumerId,
                                   new MppPushResponseDataListener() {
    @Override
    public void onSuccess(@NonNull MppPushResponseData data) {
        // Handle success.
    }

    @Override
    public void onFailure(@NonNull MppError error) {
        // Handle error.
    }
});

Opt-out Card​

Delete card (payment instrument) information from consumer profile.

MeaPushProvisioning.deleteCard(MeaPushProvisioning.ClickToPay,
                               MppPaymentNetwork.VISA,
                               externalConsumerId,
                               cardParams,
                               externalCardId,
                               new MppPushResponseDataListener() {
    @Override
    public void onSuccess(@NonNull MppPushResponseData data) {
        // Handle success.
    }

    @Override
    public void onFailure(@NonNull MppError error) {
        // Handle error.
    }
});
Important

externalCardId - optional parameter, only for Mastercard.

Auto Enrollment (API)​

Auto enrollment provides Click to Pay pre-activation. For Mastercard cards auto enrollment is optional, for Visa cards auto enrollment is required in regions according to Visa mandates and local regulations.

Auto enrollment is ensured by Issuer backend to MeaWallet backend requests.

API Reference​

See API Reference: Click to Pay - Enroll API

Important

API Reference specifies encryptedData field in plain-text. Request body structure should comply with the structure below.

ParamDescription
externalConsumerIdConsumer Reference ID. Mandatory for Visa. Not required for Mastercard.
encryptedPayload.encryptedDataConsumer and Card information in encrypted format.
encryptedPayload.publicKeyFingerprintEncryption public key fingerprint.
encryptedPayload.encryptedKeyEncrypted key.
encryptedPayload.ivEncryption initialization vector.
{
    "externalConsumerId": "12321837-d597-4f0f-89e4-930c1a7b9123",
    "encryptedPayload": {
        "encryptedData": "1adfab...",
        "publicKeyFingerprint": "C0123E68F539C1461C7208B0BC26A1DD6D56DBB8A3CC585918E3967ED65BF3F6",
        "encryptedKey": "D920FAB11111352DED2BA0438F177B4449778FEFFD700268F57A2CC453E3BE08C2BD4768886E5D61A3DF0AFB7462B6BF534004FF6B0E5FE6F5A607AE4CA799BECC3263AAD1486688BEF250D0F2781FC42A7D2159446632E5020CE3DF4DE2AED943D743521FC437A226BFABC97BD141D688A0889F63AC600B7DEF85DCF0898316779A62FA8205B9DFD98B9218D8D086BD0D057D0C4B8928B52129E76E4E31D54B74D63E67AADA67DCD2E101AD66F8564B7AF084B28D7E1617A9F3130BCFCE77F1F894038017350F7663D81FD80EACDE5DCB8B609FC36CFCFF353DA1973F9B8362F5CF232E667D2F125F0193F7CDE1436E4976E7B27DF52D2AA28202AC7225A490",
        "iv": "31323334353637383930313233343536"
    }
}
Sequence Diagram​

Click to Pay Enroll API

Consumer Details Management (API)​

Post enablement, the Consumer Details Management API enables management of profiles and cards stored in the directory.

API Reference​

See API Reference: Click to Pay - Consumer API