Click to Pay

Introduction

Click to Pay is the consumer-facing implementation of the Secure Remote Commerce (SRC) Framework. It represents the actual checkout button and user interface that consumers see when making a payment online. Click to Pay programmes are created by various industry participants, including global and domestic payment schemes, banks, fintechs and merchants. Consumers enrol in a Click to Pay programme via participating payment card issuers. Once enrolled, a consumer can confidently pay online wherever they see the Click to Pay icon using their preferred card and expect comparable security and convenience as when making in-store purchases.

Developed by Amex, Mastercard, Visa and built upon EMVCo standards, Click to Pay is designed to create an ecommerce checkout experience that delivers the same security, convenience and control as offered in the physical world. Consumers can click to pay quickly and securely when they see Click to Pay icon where Amex, Mastercard, Visa is accepted.

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.

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.

Functions

Push Provisioning (SDK)

Push (Enroll)

Push (enroll) specified card to Click to Pay.

info

• 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.

java

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) {
        ...
    }
});

swift

let cardId = "<value>"
let cardSecret = "<value>"
let cardParams = MppCardDataParameters.withCardSecret(cardId: cardId, cardSecret: cardSecret)

let phone = MppPhone(countryCode: "1", phoneNumber: "2121234567")

let consumerInformation = MppConsumerInformation(
    externalConsumerId: "6f680264-9cad-49c7-a673-fcf8e112ef68",
    firstName: "Jane",
    middleName: "A.",
    lastName: "Doe",
    phone: phone,
    emails: "jane.doe@mail.com",
    locale: "en_US",
    countryCode: "US"
)

let billingAddress = MppBillingAddress(
    line1: "123 Main St.",
    line2: "",
    line3: "",
    city: "New York",
    countrySubdivision: "NY",
    postalCode: "10001",
    country: "US"
)

MeaPushProvisioning.push(MeaPushProvisioning.ClickToPay,
                        cardParams: cardParams,
                        consumerInformation: consumerInformation,
                        billingAddress: billingAddress) { requestTraceId, externalConsumerId, error in
    if let error = error {
        // Handle error.
    } else {
        // Handle success.
    }
}

objective-c

NSString *cardId = @"<value>";
NSString *cardSecret = @"<value>";
MppCardDataParameters *cardParams = [MppCardDataParameters cardDataParametersWithCardSecret:cardId cardSecret:cardSecret];

MppPhone *phone = [MppPhone phoneNumberWithCountryCode:@"1" phoneNumber:@"2121234567"];

MppConsumerInformation *consumerInformation = [MppConsumerInformation
    consumerInformationWithExternalConsumerId:@"6f680264-9cad-49c7-a673-fcf8e112ef68"
    firstName:@"Jane"
    middleName:@"A."
    lastName:@"Doe"
    phone:phone
    email:@"jane.doe@mail.com"
    locale:@"en_US"
    countryCode:@"US"];

MppBillingAddress *billingAddress = [MppBillingAddress
    billingAddressWithLine1:@"123 Main St."
    line2:@""
    line3:@""
    city:@"New York"
    countrySubdivision:@"NY"
    postalCode:@"10001"
    country:@"US"];

[MeaPushProvisioning push:MeaPushProvisioning.ClickToPay
               cardParams:cardParams
      consumerInformation:consumerInformation
           billingAddress:billingAddress
        completionHandler:^(NSString *requestTraceId, NSString *externalConsumerId, MppError *error) {

    if (!error) {
        // Handle success.
    } else {
        // Handle error.
    }
}];

Check

Check if specified card is added to Click to Pay.

java

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.
    }
});

swift

MeaPushProvisioning.check(MeaPushProvisioning.ClickToPay, cardDataParameters: cardParams) { data, error in
    if let error = error {
        // Handle error.
    } else {
        // Handle success.
    }
}

objective-c

[MeaPushProvisioning check:MeaPushProvisioning.ClickToPay
        cardDataParameters:cardParams
         completionHandler:^(MppCheckResponseData *_Nullable data, NSError * _Nullable error) {

    if (!error) {
        // Handle success.
    } else {
        // Handle error.
    }
 }];

Consumer Details Management

Get Consumer Details

Retreive consumer and cards (payment instrument) information.

java

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
    }
});

swift

MeaPushProvisioning.getConsumerDetails(MeaPushProvisioning.ClickToPay,
                                       paymentNetwork: .visa,
                                       externalConsumerId: externalConsumerId) { details, error in

    if let error = error {
        // Handle error
    } else {
        // Handle success
    }
}

objective-c

[MeaPushProvisioning getConsumerDetails:MeaPushProvisioning.ClickToPay
                            paymentNetwork:PKPaymentNetworkVisa
                        externalConsumerId:externalConsumerId
                        completionHandler:^(MppConsumerDetails *_Nullable details, NSError * _Nullable error) {
    if (!error) {
        // Handle success.
    } else {
        // Handle error.
    }
}];

Update Consumer Details

Update consumer information.

java

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.
    }
});

swift

MeaPushProvisioning.updateConsumerDetails(MeaPushProvisioning.ClickToPay,
                                          paymentNetwork: .visa,
                                          consumerInformation: consumerInformation) { data, error in
    if let error = error {
        // Handle error.
    } else {
        // Handle success.
    }
}

objective-c

[MeaPushProvisioning updateConsumerDetails:MeaPushProvisioning.ClickToPay
                            paymentNetwork:PKPaymentNetworkVisa
                       consumerInformation:consumerInformation
                         completionHandler:^(MppPushResponseData * _Nullable data, NSError * _Nullable error) {
    if (!error) {
        // Handle success.
    } else {
        // Handle error.
    }
}];

Update Card Details

Update card details.

java

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.
    }
});

swift

MeaPushProvisioning.updateCardDetails(MeaPushProvisioning.ClickToPay,
                                      paymentNetwork: .visa,
                                      externalConsumerId: externalConsumerId,
                                      cardDataParameters: cardParams,
                                      cardholderName: cardholderName,
                                      expiryYear: expiryYear,
                                      expiryMonth: expiryMonth,
                                      billingAddress: billingAddress,
                                      externalCardId: externalCardId) { data, error in
    if let error = error {
        // Handle error.
    } else {
        // Handle success.
    }
}

objective-c

[MeaPushProvisioning updateCardDetails:MeaPushProvisioning.ClickToPay
                        paymentNetwork:PKPaymentNetworkVisa
                    externalConsumerId:externalConsumerId
                    cardDataParameters:cardParams
                        cardholderName:cardholderName
                            expiryYear:expiryYear
                           expiryMonth:expiryMonth
                        billingAddress:billingAddress
                        externalCardId:externalCardId
                     completionHandler:^(MppPushResponseData * _Nullable data, NSError * _Nullable error) {

    if (!error) {
        // Handle success.
    } else {
        // Handle error.
    }
}];

info

externalCardId - optional parameter, only for Mastercard.

Opt-out Consumer

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

java

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.
    }
});

swift

MeaPushProvisioning.deleteConsumer(MeaPushProvisioning.ClickToPay,
                                   paymentNetwork: .visa,
                                   externalConsumerId: externalConsumerId) { data, error in

    if let error = error {
        // Handle error.
    } else {
        // Handle success.
    }
}

objective-c

[MeaPushProvisioning deleteConsumer:MeaPushProvisioning.ClickToPay
                     paymentNetwork:PKPaymentNetworkVisa
                 externalConsumerId:externalConsumerId
                  completionHandler:^(MppPushResponseData * _Nullable data, NSError * _Nullable error) {

    if (!error) {
        // Handle success.
    } else {
        // Handle error.
    }
}];

Opt-out Card

Delete card (payment instrument) information from consumer profile.

java

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.
    }
});

swift

MeaPushProvisioning.deleteCard(MeaPushProvisioning.ClickToPay,
                               paymentNetwork: .visa,
                               externalConsumerId: externalConsumerId,
                               cardDataParameters: cardParams,
                               externalCardId: nil) { data, error in
    if let error = error {
        // Handle error.
    } else {
        // Handle success.
    }
}

objective-c

[MeaPushProvisioning deleteCard:MeaPushProvisioning.ClickToPay
                 paymentNetwork:PKPaymentNetworkVisa
             externalConsumerId:externalConsumerId
             cardDataParameters:cardParams
                 externalCardId:externalCardId
              completionHandler:^(MppPushResponseData * _Nullable data, NSError * _Nullable error) {

    if (!error) {
        // Handle success.
    } else {
        // Handle error.
    }
}];

info

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.

Push (Enroll Synchronous)

Push (enroll) specified card to Click to Pay. The request includes both consumer and card information.

POST /mpp/tokenmanage/v1/tokenization/clicktopay/push/withSecret

Request Headers

Key	Description
Content-Type	application/json
Mea-Tracep-Id	UUID value used to trace and correlate requests from an end-user to other services.
Mea-Api-Key-Id	API Key ID provided during client onboarding.
Mea-Secret	Used to validate if request is authentic. See Mea-Secret Calculation.

Content-Type: application/json
Mea-Trace-Id: e01bd3df-4a75-4cae-baeb-094ef965c111
Mea-Api-Key-Id: 18e05e04-a54d-479c-a85f-b7f6c7531111
Mea-Secret: 39F15E67...

Request Body

Param	Description
externalConsumerId	Consumer Reference ID. Mandatory for Visa. Not required for Mastercard.
encryptedPayload.encryptedData	Consumer and Card information in encrypted format.
encryptedPayload.publicKeyFingerprint	Encryption public key fingerprint.
encryptedPayload.encryptedKey	Encrypted key.
encryptedPayload.iv	Encryption initialization vector.

{
    "externalConsumerId": "12321837-d597-4f0f-89e4-930c1a7b9123",
    "encryptedPayload": {
        "encryptedData": "1adfab...",
        "publicKeyFingerprint": "C0123E68F539C1461C7208B0BC26A1DD6D56DBB8A3CC585918E3967ED65BF3F6",
        "encryptedKey": "D920FAB11111352DED2BA0438F177B4449778FEFFD700268F57A2CC453E3BE08C2BD4768886E5D61A3DF0AFB7462B6BF534004FF6B0E5FE6F5A607AE4CA799BECC3263AAD1486688BEF250D0F2781FC42A7D2159446632E5020CE3DF4DE2AED943D743521FC437A226BFABC97BD141D688A0889F63AC600B7DEF85DCF0898316779A62FA8205B9DFD98B9218D8D086BD0D057D0C4B8928B52129E76E4E31D54B74D63E67AADA67DCD2E101AD66F8564B7AF084B28D7E1617A9F3130BCFCE77F1F894038017350F7663D81FD80EACDE5DCB8B609FC36CFCFF353DA1973F9B8362F5CF232E667D2F125F0193F7CDE1436E4976E7B27DF52D2AA28202AC7225A490",
        "iv": "31323334353637383930313233343536"
    }
}

encryptedData plain-text:

{
    "consumerInformation": {
        "firstName": "John",
        "middleName": "B.",
        "lastName": "Doe",
        "phones": [
            {
                "countryCode" : "1650",
                "phoneNumber" : "4005555"
            }
        ],
        "emails": [
            "johnbdoe@mailexample.com"
        ],
        "locale": "en_US",
        "countryCode": "US"
    },
    "cards": [
        {
            "cardId": "1234567891ABC",
            "cardSecret": "001#12345678",
            "billingAddress": {
                "addressLine1": "1000 Market Streets",
                "addressLine2": "Building 56",
                "addressLine3": "Suite 101",
                "city": "San Francisco",
                "postalCode": "94105",
                "countrySubdivision": "CA",
                "country": "US"
            }
        }
    ]
}

Response Headers

Content-Type: application/json
Mea-Trace-Id: e01bd3df-4a75-4cae-baeb-094ef965c111

Response Body

{
    "data": {
        {
            "requestTraceId": "351562ba-83cf-11ee-b962-0242ac120002",
            "externalConsumerId": "12321837-d597-4f0f-89e4-930c1a7b9123",
            "srcCardId": "2a1a5f5f-be13-4068-b018-d27d030ceefa"
        }
    }
}

Sequence Diagram

Consumer Details Management (API)

Post enablement, the Consumer Details Management APIs enable to manage profiles and cards stored in the directory.