Payment Form: Cookbook

Enable or Disable a Digital Wallet Button

Customize the behavior of an individual digital wallet button in the Square Payment form.

Payment Form

The Payment Form with digital wallet support templates provide CSS classes and HTML to configure digital wallet buttons. The buttons are enabled using the JavaScript code in the SqPaymentForm initializing function. When a digital wallet button is disabled, the template-based CSS and HTML is ignored by SqPaymentForm and the button is not rendered.

You may want to enable or disable a digital wallet button based on a runtime condition. In either case, you probably want to leave all of the button configuration code in place so that you can re-enable a button when you are ready to.

This recipe shows you how to let your runtime business logic enable or disable a digital wallet button with logic that runs before SqPaymentForm is initialized.

Before you start

Step 1: Declare a var to hold a digital wallet placeholder ID

In the web app logic that emits the scripts that support the payment form into a payments page, declare a var to hold the ID of a digital wallet button placeholder.

Be sure to set the value of the var before emitting a reference to sqpaymentform.js.

 2  //Add required scripts for square payment form. This applies only to payments page (checkout.php)
 3  public function displayAddPaymentScripts() {
 5        <!-- link to the SqPaymentForm library -->
 6        <script type='text/javascript' src=''></script>
 7        <script type='text/javascript'>
 8            var masterPassPlaceHolderId = masterPassHelper();
 9            function masterPassHelper() {
10                //your business logic sets true/false value
11                if ( true ) {
12                    return "sq-masterpass";
13                } else {
14                    return null;
15                }
16            }
17        </script>
18        <script type='text/javascript' src='js/sqpaymentform.js'></script>
20  }

Step 2: Modify your SqPaymentForm initializing javascript code

Set the value of the masterpass placeholder to masterPassPlaceHolderId and the digital wallet buttons will be rendered according to the business logic that you set in step 1.

 1// Create and initialize a payment form object
 2var paymentForm = new SqPaymentForm({
 4  // Initialize Masterpass placeholder ID
 5  masterpass: {
 6    elementId: masterPassPlaceHolderId
 7  },

Contact Developer Support, join our Slack channel, or ask for help on Stack Overflow