Digital Wallet Setup Guides

Remove wallet payments configurations

Learn how to remove digital wallet payments for a digital wallet by removing associated HTML, JavaScript, and css objects from a web application project.

Optional: Disable a digital wallet button

If you have configured your web app for digital wallet buttons but do not want to show them in the current version of your web app or if you want to conditionally show digital wallet buttons then see Enable or Disable a Digital Wallet Button.

Otherwise, continue with the steps in this guide.

Step 1: Remove digital wallet placeholder HTML tags

If you are using the HTML template from GitHub from the SqPaymentForm Setup Guide, digital wallet payment placeholders are included by default.

Remove the <div> and <button> placeholders for the payment method that you are disabling

  <div id="sq-walletbox">
    Pay with a digital wallet
    <div id="sq-apple-pay-label" class="wallet-not-enabled">Apple Pay on the Web not enabled</div>
    <!-- Placeholder for Apple Pay on the Web button -->
    <button id="sq-apple-pay" class="button-apple-pay"></button>

    <div id="sq-masterpass-label" class="wallet-not-enabled">Masterpass not enabled</div>
    <!-- Placeholder for Masterpass button -->
    <button id="sq-masterpass" class="button-masterpass"></button>
  </div>

The digital wallet <div> after Masterpass has been disabled:

  <div id="sq-walletbox">
    Pay with a digital wallet
    <div id="sq-apple-pay-label" class="wallet-not-enabled">Apple Pay on the Web not enabled</div>
    <!-- Placeholder for Apple Pay on the Web button -->
    <button id="sq-apple-pay" class="button-apple-pay"></button>
  </div>

Step 2: Remove the digital wallet and placeholder CSS classes

The SqPaymentForm example code includes CSS classes from GitHub related to payment methods and a visual placeholder to simplify development and testing. You should delete the button class for the payment method that you are disabling.

You may delete the wallet-not-enabled class if you do not want to show a message when you have disabled the digital wallet.

/* Indicates how the "{{Wallet}} not enabled" message will appear */
.wallet-not-enabled {
  ...
}

/* Indicates how Apple Pay button will appear */
.button-apple-pay {
  ...
}

/* Indicates how Masterpass button will appear */
.button-masterpass {
  ...
}

Step 3: Disable the payment method parameter in the SqPaymentForm object

To disable a digital wallet payment method in SqPaymentForm, set the digital wallet frame element ID to false in sqpaymentform.js.

In this example, the Masterpass payment method is disabled:

  // Initialize Apple Pay placeholder ID
  applePay: {
    elementId: 'sq-apple-pay'
  },

  // Initialize Masterpass placeholder ID
  masterpass: false,

Step 4: Update the methodsSupported callback function

The SqPaymentForm template code from GitHub includes payment method visual placeholders that are set by the methodsSupported callback to simplify development and testing. Remove this functionality by deleting references to the visual placeholder for the payment method that you are disabling.

This example references both digital wallet payment method visual placeholders.

  /*
    * callback function: methodsSupported
    * Triggered when: the page is loaded.
    */
  methodsSupported: function (methods) {

    var applePayBtn = document.getElementById('sq-apple-pay');
    var applePayLabel = document.getElementById('sq-apple-pay-label');
    var masterpassBtn = document.getElementById('sq-masterpass');
    var masterpassLabel = document.getElementById('sq-masterpass-label');

    // Only show the button if Apple Pay on the Web is enabled
    // Otherwise, display the wallet not enabled message.
    if (methods.applePay === true) {
      applePayBtn.style.display = 'inline-block';
      applePayLabel.style.display = 'none' ;
    }
    // Only show the button if Masterpass is enabled
    // Otherwise, display the wallet not enabled message.
    if (methods.masterpass === true) {
      masterpassBtn.style.display = 'inline-block';
      masterpassLabel.style.display = 'none';
    }
  },

The following example removed references to the Masterpass visual placeholders.

  /*
    * callback function: methodsSupported
    * Triggered when: the page is loaded.
    */
  methodsSupported: function (methods) {

    var applePayBtn = document.getElementById('sq-apple-pay');
    var applePayLabel = document.getElementById('sq-apple-pay-label');

    // Only show the button if Apple Pay on the Web is enabled
    // Otherwise, display the wallet not enabled message.
    if (methods.applePay === true) {
      applePayBtn.style.display = 'inline-block';
      applePayLabel.style.display = 'none' ;
    }
  },

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