Add a Secure Remote Commerce Button
Deprecated
This component is deprecated. See below for guidance about what to use instead.
Note
The Square payment form is deprecated and replaced by the Web Payments SDK.
You should use the Web Payments SDK to take payments on a web client. Web Payments SDK uses modern web styling as shown in the following image:
Overview
This guide provides step-by-step instructions for enabling
Masterpass (now Mastercard Click to Pay) with the Square payment form object (SqPaymentForm
) using Secure Remote Commerce.
Note
The names of SqPaymentForm
Secure Remote Commerce (SRC) objects have not changed from the original Masterpass to minimize the amount of recoding that you must do to support SRC.
After completing the steps in this guide, your payment form includes a Mastercard Click to pay button like the following example:
Migrate your existing Masterpass code
The Secure Remote Commerce background image is set by calling the SqPaymentForm.masterpassImageUrl function.
If your application uses a CSS class property to set the Secure Remote Commerce button background image, you should migrate your application to use the masterpassImageUrl
function. To migrate your code, complete step 2
and step 4.
Prerequisites and assumptions
To use Secure Remote Commerce with SqPaymentForm
, the following must be true:
You are using HTTPS. SRC payments can be tested with
SqPaymentForm
on localhost without using HTTPS, but you must use HTTPS to accept payments in production.Secure Remote Commerce is only available for Square accounts based in Canada, the United Kingdom, and the United States.
This guide also makes the following assumptions:
You have read the introductory review of this API.
You have followed the required steps in the Payment Form Setup Guide. This guide focuses specifically on customizing
SqPaymentForm
with Secure Remote Commerce and does not give instructions for the setup ofSqPaymentForm
.
Step 1: Add the Secure Remote Commerce placeholder to your payment page
If you are using the payment form with digital wallet support templates, the Secure Remote Commerce placeholder is included by default.
Step 2: Customize the Secure Remote Commerce button size
Mastercard provides a range of image resources to choose from if you want to customize the Secure Remote Commerce button.
Add the button-src
class to the mysqpaymentform.css file if it is not present.
Note
If you are migrating your code to use the masterpassImageUrl
function, remove the background-image
property from the button-masterpass
class.
Step 3: Enable Secure Remote Commerce in the SqPaymentForm object
Enable the Secure Remote Commerce parameter by initializing it with the HTML placeholder ID you set in the previous step.
If you are using the payment form with digital wallet support template, the Secure Remote Commerce parameter is enabled by default.
Set the background image URL of the Secure Remote Commerce button by setting the value of
masterpassBtn.style.backgroundImage
to the URL returned by the masterpassImageUrl function.Delete the HTML for the visual placeholder (if it exists).
Step 5: Customize the createPaymentRequest callback function
To process payments, you need to customize the createPaymentRequest
callback function to create a JSON block that defines a payment request object
based on the customer's purchase totals.
Digital wallet services expect payment requests in a specific format. The result is that the object created in createPaymentRequest
is functionally different from Square's internal data types. For example, monetary amounts are provided as floats rather than integers.
For more information about the expected structure of a payment request object, see sqPaymentForm Object Model.
If you need more assistance, contact Developer Support or ask for help in the Developer Forums.