Build code to programmatically disable digital wallets with the Square payment form.
Square Payment Form

Programmatically Disable Digital Wallets 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. The Web Payments SDK uses modern web styling as shown in the following image:

A graphic showing the five visual elements of the Card payment method, which are represented as selectors that you specify in a card option styling object.

Override the payment form to prevent an available digital wallet button from rendering automatically.

The payment form renders a digital wallet button on your payment web page in place of an HTML div placeholder that you specify. If the payment form finds that a digital wallet is available, the associated div placeholder is replaced with a wallet button.

You might have business reasons to override the payment form and prevent an enabled digital wallet button from being rendered. If your business rules require a conditional runtime override, this topic shows you where to add custom business logic to suppress the digital wallet button rendering even when the digital wallet is available. You cannot override the payment form to render a digital wallet button when the payment form determines that the digital wallet is not available.

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.

Before you start Permalink Get a link to this section

Did you know?

The SqPaymentForm automatically disables your Apple Pay button if you have not met the Apple development requirements for Apple Pay.

Step 1: Declare functions for business logic Permalink Get a link to this section

Declare functions to return the ID of a digital wallet button placeholder or null. Use business logic to determine the value to return. If you want to render a button, return any of the following values: sq-src, sq-applepay, or sq-google-pay. If you want to suppress buttons, return null.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
    function srcHelper() {
        //your business logic sets true/false value
        if ( true ) {
            return "sq-src";
        } else {
           return null;
        }
    }
    
    function applePayHelper() {
        //your business logic sets true/false value
        if ( true ) {
            return "sq-apple-pay";
        } else {
           return null;
        }
    }
    
    function googlePayHelper() {
        //your business logic sets true/false value
        if ( true ) {
            return "sq-google-pay";
        } else {
           return null;
        }
    }

Step 2: Modify your SqPaymentForm initializing JavaScript code Permalink Get a link to this section

Set the value of the digital wallet button placeholders to the return value from your custom functions.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
// Create and initialize a payment form object
var paymentForm = new SqPaymentForm({
...
  applePay: {
    elementId: applePayHelper()
  },

  googlePay: {
    elementId: googlePayHelper()
  },

// Initialize Masterpass placeholder ID
  masterpass: {
    elementId: srcHelper()
  },
...
}

Important

When the value of the digital wallet button placeholder is set in the initializer, the enabled state of the button cannot be changed unless the SqPaymentForm is reinitialized. The paymentForm.build() function cannot change the state of the button. The function simply rerenders the iframes and digital wallet buttons according to the initialized state of the SqPaymentForm object.

If you need more assistance, contact Developer Support or ask for help in the Developer Forums.

On this page