Payment Form: Cookbook

Programmatically Disable Digital Wallets

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 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.

    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.

// 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.