--- title: "Liquid filters: payment_button" description: |- Generates an HTML container to host [accelerated checkout buttons](https://help.shopify.com/manual/online-store/dynamic-checkout) for a product. The `payment_button` filter must be used on the `form` object within a [product form](/docs/api/liquid/tags/form#form-product). api_name: liquid source_url: html: https://shopify.dev/docs/api/liquid/filters/payment_button md: https://shopify.dev/docs/api/liquid/filters/payment_button.md --- # payment\_​button ```oobleck form | payment_button ``` returns [string](https://shopify.dev/docs/api/liquid/basics#string) Generates an HTML container to host [accelerated checkout buttons](https://help.shopify.com/manual/online-store/dynamic-checkout) for a product. The `payment_button` filter must be used on the `form` object within a [product form](https://shopify.dev/docs/api/liquid/tags/form#form-product). *** Note You can't render accelerated checkout buttons through AJAX requests, including those through the [Section Rendering API](https://shopify.dev/api/section-rendering). The accelerated checkout buttons are added by JavaScript included by Shopify through the [`content_for_header`](https://shopify.dev/docs/api/liquid/objects/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](https://shopify.dev/docs/storefronts/themes/pricing-payments/accelerated-checkout/). *** ```liquid {% form 'product', product %} {{ form | payment_button }} {% endform %} ``` ##### Code ``` {% form 'product', product %} {{ form | payment_button }} {% endform %} ``` ##### Data ``` { "product": { "id": 6786188247105 } } ``` ## Output ```html
```