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. Due to local regulations auto enrollment cannot be provided in certain countries, for example, Bulgaria.
• 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, Lifecycle 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

Auto Enrollment

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 Provisioning

Push (Enroll)

Push (enroll) specified card to Click to Pay.

info

Mastercard: externalConsumerId is generated and provided by Mastercard.
Visa: externalConsumerId is generated and provided by the Issuer's app.

java

String cardId = "<value>";
String cardSecret = "<value>";
MppCardDataParameters cardParams = MppCardDataParameters.withCardSecret(cardId, cardSecret);

MppPhoneNumber phoneNumber = new MppPhoneNumber(1, 2121234567);

MppConsumerInformation consumerInformation = new MppConsumerInformation(
    "6f680264-9cad-49c7-a673-fcf8e112ef68", "Jane", "A.", "Doe", phoneNumber, "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 phoneNumber = MppPhoneNumber(countryCode: 1, phoneNumber: 2121234567)

let consumerInformation = MppConsumerInformation(
    externalConsumerId: "6f680264-9cad-49c7-a673-fcf8e112ef68",
    firstName: "Jane",
    middleName: "A.",
    lastName: "Doe",
    phones: phoneNumber,
    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(tokenRequestorId: 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];

MppPhoneNumber *phoneNumber = [MppPhoneNumber phoneNumberWithCountryCode:1 phoneNumber:2121234567];

MppConsumerInformation *consumerInformation = [MppConsumerInformation
    consumerInformationWithExternalConsumerId:@"6f680264-9cad-49c7-a673-fcf8e112ef68"
    firstName:@"Jane"
    middleName:@"A."
    lastName:@"Doe"
    phone:phoneNumber
    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 pushWithTokenRequestorId: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

String cardId = "<value>";
String cardSecret = "<value>";
MppCardDataParameters cardParams = MppCardDataParameters.withCardSecret(cardId, cardSecret);

MeaPushProvisioning.check(MeaPushProvisioning.ClickToPay, cardParams, ...);

Get Eligible Token Requestors

Retrieve information about eligible Token Requestors, which support push provisioning.

info

Mastercard only.

java

MeaPushProvisioning.getEligibleTokenRequestors(cardParams, ...)

Get Asset

Retrieve static assets, such as the Token Requestor logo. Every asset is referenced using an asset ID.

info

Mastercard only.

java

MeaPushProvisioning.getAsset(assetId, ...)

Consumer Details Management

Get Consumer Details

Retreive consumer and cards (payment instrument) information.

java

MeaPushProvisioning.getConsumerDetails(...)

Update Consumer Details

Update consumer information.

java

MeaPushProvisioning.updateConsumerDetails(...)

Update Card Details

Update card details.

java

MeaPushProvisioning.updateCardDetails(...)

Opt-out Consumer

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

java

MeaPushProvisioning.deleteConsumer(...)

Opt-out Card

Delete card (payment instrument) information from consumer profile.

java

MeaPushProvisioning.deleteCard(...)