Tanner Kovach

The Problem

Shopify’s Accelerated Checkout Form dynamically outputs a list of quick checkout options with various payment providers such as Shop Pay, Apple Pay, Amazon Pay, PayPal, and others. However, this feature is extremely locked down. While Shopify provides some CSS variables that allow you to customize basic styling (border radius, row gaps, minimum height, etc.), it does NOT support customizing which payment providers to display. It’s all or nothing: if a payment provider is enabled in your payment settings, it will appear whenever the form buttons are rendered (for example, in your cart modal).

{% if additional_checkout_buttons %}
    <div class="cart__additional-checkout-buttons">
        {{ content_for_additional_checkout_buttons }}
    </div>
{% endif %}

This limitation is problematic if you want to A/B test certain providers or selectively offer specific providers in the cart while keeping all options available on the checkout page.

Since Shopify outputs these quick checkout buttons in a closed shadow DOM web component, using CSS to hide certain providers is extremely limited. You can target and hide a specific provider, but this doesn’t update the spacing around the remaining options, resulting in an awkward appearance.

The Workaround

The following JavaScript solution provides a workaround by:

Detecting when the web component loads
Cloning the component
Filtering the wallet configuration JSON to include only your desired providers
Replacing the original component with the filtered version

(() => {

const wallet_settings = {
  // keys must match the wallet config's 'name' field for each provider
  shop_pay: {{ section.settings.allow_shop | default: false }},
  apple_pay: {{ section.settings.allow_apple | default: false }},
  amazon_pay: {{ section.settings.allow_amazon | default: false }},
  paypal: {{ section.settings.allow_paypal | default: false }}
};

const allowed = new Set(Object.keys(wallet_settings).filter(key => wallet_settings[key]));

const filter_wallet_configs = (el) => {
  if (el.dataset.processed) return;

  const cloned_el = el.cloneNode(true);

  try {
    const config_str = cloned_el.getAttribute('wallet-configs');
    if (config_str) {
      const config = JSON.parse(config_str);
      const filtered_config = config.filter(c => allowed.has(c.name));
      cloned_el.setAttribute('wallet-configs', JSON.stringify(filtered_config));
    }
  } catch (e) {
    console.warn('Unable to parse wallet-configs in accelerated checkout component:', e);
  }

  cloned_el.dataset.processed = 'true';
  el.replaceWith(cloned_el);
};

// required to filter wallet configs as soon as the component is added to the DOM
// this prevents us from having to use setTimeout or use a mutation observer 
document.addEventListener('animationstart', (e) => {
  if (e.animationName === 'acceleratedCheckoutDetected') {
    filter_wallet_configs(e.target);
      }
    });

const existing_components = document.querySelectorAll('shopify-accelerated-checkout-cart');

if (existing_components.length) {
  existing_components.forEach(filter_wallet_configs);
}

})();

Configuration Schema

The solution also includes a Shopify section schema that allows you to select which providers to display without hardcoding them. Here’s the schema configuration:

{
  "type": "header",
  "content": "Allowed Payment Providers",
  "info": "Visibility of certain providers depends on Shopify payment settings and the OS/browser being used. The order of the visible providers is decided by Shopify.",
  "visible_if": "{{ section.settings.show_accelerated_checkout }}"
},
{
  "type": "checkbox",
  "id": "allow_shop",
  "label": "Shop Pay",
  "default": true,
  "visible_if": "{{ section.settings.show_accelerated_checkout }}"
},
{
  "type": "checkbox",
  "id": "allow_apple",
  "label": "Apple Pay",
  "info": "Only visible when viewing on an iOS device or Mac with the Safari web browser",
  "default": true,
  "visible_if": "{{ section.settings.show_accelerated_checkout }}"
},
{
  "type": "checkbox",
  "id": "allow_amazon",
  "label": "Amazon Pay",
  "default": false,
  "visible_if": "{{ section.settings.show_accelerated_checkout }}"
},
{
  "type": "checkbox",
  "id": "allow_paypal",
  "label": "PayPal",
  "default": false,
  "visible_if": "{{ section.settings.show_accelerated_checkout }}"
}

To run the JavaScript as soon as the component is rendered on the page, you have several options. The provided solution utilizes the animationstart event that fires automatically when an element with an animation is rendered and ready. For the above JavaScript to work, you’ll need to add the following CSS (alternatively, you could use a mutation observer, setTimeout, etc.):

@keyframes acceleratedCheckoutDetected {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
shopify-accelerated-checkout-cart {
  animation: acceleratedCheckoutDetected 1ms;
}

After adding these pieces of code, you will be able to selectively display specific wallet providers when using the Accelerated Checkout form. Keep in mind that certain conditions are required for payment providers to display, such as user region, device type, and browser compatibility.

Customizing Shopify Accelerated Checkout Visibility

The Problem

The Workaround

Configuration Schema