payment_button

form | payment_button

Generates an HTML container to host accelerated checkout buttons for a product. The payment_button filter must be used on the form object within a product form.

Note

You can't render accelerated checkout buttons through AJAX requests, including those through the Section Rendering API. The accelerated checkout buttons are added by JavaScript included by Shopify through the content_for_header object, which only runs on the initial page load.

For guidance on styling or event tracking of accelerated checkout buttons, refer to accelerated checkout.

{% form 'product', product %}

{% endform %}

{% form 'product', product %}
  {{ form | payment_button }}
{% endform %}

{
  "product": {
    "id": 6786188247105
  }
}

Output

<div data-shopify="payment-button" class="shopify-payment-button"> <shopify-accelerated-checkout recommended="{"name":"shop_pay","wallet_params":{"shopId":56174706753,"merchantName":"Polina's Potent Potions","personalized":true}}" fallback="{"name":"buy_it_now","wallet_params":{}}" access-token="7be588c245f69602e5db198d53fcfde5" buyer-country="CA" buyer-locale="en" buyer-currency="CAD" variant-params="[{"id":39897499729985,"requiresShipping":true},{"id":39897499762753,"requiresShipping":true},{"id":39897499795521,"requiresShipping":true},{"id":39897499828289,"requiresShipping":true},{"id":39897499861057,"requiresShipping":true},{"id":39897499893825,"requiresShipping":true},{"id":39897499926593,"requiresShipping":true},{"id":39897499959361,"requiresShipping":true},{"id":39897499992129,"requiresShipping":true}]" shop-id="56174706753" enabled-flags="["1b55bc27"]" > <div class="shopify-payment-button__button" role="button" disabled aria-hidden="true" style="background-color: transparent; border: none"> <div class="shopify-payment-button__skeleton"> </div> </div> <div class="shopify-payment-button__more-options shopify-payment-button__skeleton" role="button" disabled aria-hidden="true"> </div> </shopify-accelerated-checkout> <small id="shopify-buyer-consent" class="hidden" aria-hidden="true"> This item is a recurring or deferred purchase. By continuing, I agree to the <span id="shopify-subscription-policy-button">cancellation policy</span> and authorize you to charge my payment method at the prices, frequency and dates listed on this page until my order is fulfilled or I cancel, if permitted. </small> </div>

Was this page helpful?