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.
- Mastercard:
externalConsumerId
is generated and provided by Mastercard.
Passnil
ornull
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
- swift
- objective-c
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) {
...
}
});
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.
}
}
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
- swift
- objective-c
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.
}
});
MeaPushProvisioning.check(MeaPushProvisioning.ClickToPay, cardDataParameters: cardParams) { data, error in
if let error = error {
// Handle error.
} else {
// Handle success.
}
}
[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
- swift
- objective-c
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
}
});
MeaPushProvisioning.getConsumerDetails(MeaPushProvisioning.ClickToPay,
paymentNetwork: .visa,
externalConsumerId: externalConsumerId) { details, error in
if let error = error {
// Handle error
} else {
// Handle success
}
}
[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
- swift
- objective-c
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.
}
});
MeaPushProvisioning.updateConsumerDetails(MeaPushProvisioning.ClickToPay,
paymentNetwork: .visa,
consumerInformation: consumerInformation) { data, error in
if let error = error {
// Handle error.
} else {
// Handle success.
}
}
[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
- swift
- objective-c
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.
}
});
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.
}
}
[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.
}
}];
externalCardId
- optional parameter, only for Mastercard.
Opt-out Consumer
Delete consumer information and all cards (payment instruments) related to the profile.
- java
- swift
- objective-c
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.
}
});
MeaPushProvisioning.deleteConsumer(MeaPushProvisioning.ClickToPay,
paymentNetwork: .visa,
externalConsumerId: externalConsumerId) { data, error in
if let error = error {
// Handle error.
} else {
// Handle success.
}
}
[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
- swift
- objective-c
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.
}
});
MeaPushProvisioning.deleteCard(MeaPushProvisioning.ClickToPay,
paymentNetwork: .visa,
externalConsumerId: externalConsumerId,
cardDataParameters: cardParams,
externalCardId: nil) { data, error in
if let error = error {
// Handle error.
} else {
// Handle success.
}
}
[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.
}
}];
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.