Enabling Click to Pay
Enable Click to Pay in your Copy & Pay widget
Add CLICK_TO_PAY to the list of supported payment brands when loading the payment widget.
<form class=”paymentWidgets”
data-brands=”CLICK_TO_PAY VISA MASTER
”>
</form>Provide the shopper’s email address
Click to Pay uses the shopper’s email address to identify whether they are enrolled and to authenticate them when required.
Please ensure that the shopper’s email address is available during checkout before initiating the payment.
Handle Click to Pay widget events
The payment widget will generate events during the Click to Pay journey, for example:
- Shopper is not enrolled in Click to Pay
- One-time password (OTP) verification is required
- No saved cards are available
- Shopper cancels the Click to Pay flow
- An error occurs during the Click to Pay process
Your integration should handle these events appropriately, for example by:
- displaying informative messages to the shopper;
- showing or hiding the standard card entry form when appropriate;
- allowing the shopper to continue with a standard card payment if Click to Pay cannot be completed.
Test your integration
Before enabling Click to Pay in production, we recommend testing the integration using the available Click to Pay test cards and scenarios to ensure the checkout experience behaves as expected.
Developers reference
Payment types
| Payment type | Supported | Comments |
|---|---|---|
| Token Fetch (TF) | Yes | Intermediate transaction to get a card or token details from Mastercard Click to Pay system. |
Copy and Pay WPWL Options for Click to Pay Customisation
| Property | Values | Default value | Description |
|---|---|---|---|
| darkTheme | false, true | false | To allow dark theme; when set to ‘true’ all the components will be rendered in dark theme |
| disappearErrorMessageTime | milliseconds | 7000 | To hide the below error message after specified period for customer not enrolled flows. clickToPayCustomerNotEnrolled: “Looks like you haven’t enrolled with Click to Pay. Enter card details to save your information with Click to Pay” |
| Property | Values | Default value | Description |
|---|---|---|---|
| displayCardListByDefault | false, true | true | To display card list default when shopper is recognised by cookies |
| displayCancelOption | false, true | false | To display cancel option on card list component |
| displayAddCard | false, true | true | To display add card option to shopper in card list |
| displayPreferredCard | false, true | true | To display preferred card by default and other cards displayed when shopper clicked on “View all cards” in the card list component |
| displaySignOut | false, true | true | To display sign out “Not your cards” option |
| displayHeader | false, true | false | To display click to pay header |
| cardSelectionType | gridView, radioButton | gridView | To allow grid or radio button selection of cards in the list |
| unacceptedCard | CREDIT, DEBIT | ” | To allow unaccepted cards by merchants/ PSPs |
| Property | Values | Default value | Description |
|---|---|---|---|
| displayOtpScreenByDefault | false, true | true | To show OTP input screen default is no cookies recognised and email address received in checkout request is enrolled |
| displayCancelOption | false, true | true | To display cancel option |
| displayHeader | false, true | true | To display click to pay header |
| type | <blank>(”), overlay | <blank>(”) | To allow OTP screen as an overlay or inline to the widget |
| autoSubmit | false, true | false | To auto submit OTP entered by shopper |
| hideLoader | false, true | false | To hide loader on OTP screen when processing |
| displayRememberMe | false, true | true | To show remember me option; next time the device will be recognised by cookies |
| Property | Values | Default value | Description |
|---|---|---|---|
| height | Any value between 40 and 60 | 40 | To modify the height of SRC click to pay mark |
| width | Any value between 126 (3 brands or fewer) or 178 (4 brands), and 500 | 200 | To modify the width of SRC click to pay mark |
| darkTheme | false, true | false | To allow dark theme; when set to ‘true’ click to pay SRC Mark will be rendered in dark theme (click to pay and visa logo as white) |
| Property | Values | Default value | Description |
|---|---|---|---|
| displayCloseButton | false, true | true | To display cancel option |
| displayOkButton | false, true | true | To display OK button |
| Property | Values | Default value | Description |
|---|---|---|---|
| height | Value, min 480 | 600 | To add height to DCF screen; minimum 480 |
| width | Value, min 320 | 480 | To add width to DCF screen; minimum 320 |
| windowTarget | window target options | _blank | To add how DCF screen will open when userExperience is selected as popup |
| userExperience | <blank>(”), popup | <blank>(”) | To open DCF screen as popup or inline; default it will open as inline |
WPWL option sample
{
"clickToPay" = {
"darkTheme": false,
"cardList": {
"displayCardListByDefault": true,
"displayCancelOption": false,
"displayAddCard": true,
"displayPreferredCard": true,
"displaySignOut": true,
"displayHeader": false,
"cardSelectionType": 'gridView',
"unacceptedCard": ''
},
"otpScreen": {
"displayOtpScreenByDefault": true,
"displayCancelOption": true,
"displayHeader": true,
"type": 'overlay',
"autoSubmit": false,
"hideLoader": false,
"displayRememberMe": true
},
"srcMark": {
"height": '40',
"width": '200',
"darkTheme": false
},
"learnMore": {
"displayCloseButton": true,
"displayOkButton": true,
},
dcfScreen: {
height: '600',
width: '480',
windowTarget: '_blank',
userExperience: ''
},
disappearErrorMessageTime: 7000
}
} Copy & Pay widget error
We are handling a number of Error Scenarios as specified in Mastercard’s feedback & guidelines and we are triggering Events for the following cases. Merchants will need to consume these Events and customise their UI to perform actions like Hide/Display Card form, hide/display email text box, display any error message etc.
How to consume these Events find here.
| Event | Message | Scenario |
|---|---|---|
| no_session | No payment form was found for CLICK_TO_PAY brand, cannot proceed. | - |
| no_c2p_card_brands | No Click to Pay supported card brands requested by merchant, cannot proceed. | When CLICK_TO_PAY brand is requested but none of the below brands are requested along with it. Visa, Visa Debit, Visa Electron, Mastercard, Master Debit, American Express, Discover, Diners |
| no_dpaId | No dpaId found to load Mastercard Click to Pay Library, cannot proceed. | DPA ID is configured via setting in payment endpoint. This is a mandatory field. |
| initialisation_fail | Required DPA data is not present to initialise Click to Pay SDK. | DPA data is configured via setting in payment endpoint. If all required fields are not present, then we cannot proceed further. |
| initialisation_fail | Error occurred while initialising Click to Pay SRC SDK. Click to Pay flow won’t be used. | Click to Pay library SDK initialisation failed. |
| emailIdLookup | Error occurred while email lookup. | Error occurred while email lookup flow. |
| no_emailId | Email ID not provided in the request. | Email ID not present in checkout request and also shopper device is not recognised. |
| requestOtp | Error occurred while requesting OTP. | Error while requesting OTP for email lookup flow. |
| otp_channel_invalid | Please try to enroll new card or use EMAIL or SMS validation. | When shopper selects Pay another way from channel list. |
| otp_channel_error | Error occurred for requested OTP channel. | When error occurred on request OTP channel (EMAIL or SMS). |
| requestOtp | Error occurred while requesting OTP. | Error occurred when requesting OTP from scheme for the first time on default channel. |
| load_cards | Error occurred while loading cards. | Error when loading cards for recognised or after email identity validation. |
| checkout_with_card | Error occurred, cannot proceed. | Error when loading DCF or confirming transaction on DCF screen. |
| add_new_card | Shopper requested to add new card. | Error when shopper selects add new card option in card list. At the moment, payment endpoint doesn’t support this as for new user flow shopper needs to add card details and check Click to Pay enrollment checkbox. |
| click_to_pay_checkout_error | Error checkout action code received, cannot proceed. | Error when confirming transaction on DCF screen. |
| checkout_with_new_card | Error occurred, cannot proceed. | Error when loading DCF or confirming transaction on DCF screen for new user flow. |
| payment_error | Error occurred, cannot proceed. | Error when none of the Click to Pay flow is possible. |
| ajax_submit_fail | Exception occurred while submitting the form via an Ajax call. | Error when submitting request to payments endpoint. |
| not_enrolled | Email address added is not enrolled for Click to Pay | Error when email address added in not enrolled with Click to Pay. Error message will hide after configured time against property ‘ disappearErrorMessageTime’ option. |
| cancel_click_to_pay | Click to Pay cancelled by shopper. | Error when shopper clicked on cancel button to cancel Click to Pay flow. |
| no_cards_found | No linked cards found with your Click to pay profile. Proceed by adding card. | Error when profile is enrolled for Click to Pay however no associated cards found with that profile. |