Dynamic checkout button on the section rendered with Section rendering API

Store Design
1

Hello I’d like to display dynamic checkout button in a modal where the section API is rendered.

Like ‘Buy it now’ button in flow theme

James_J_0-1642185958136.png
James_J_0-1642185958136.png334×400 22.3 KB

I tried this code in the ‘Snippets/product-form.liquid’

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

and not working

James_J_2-1642186060762.png
James_J_2-1642186060762.png241×134 1.25 KB

Output code:

Any ideas?

2

Shopify please reply me

3

I have succeeded in displaying “buy it now” button on collections page. This is obviously related with section rendering API(Fetch API). How can I display dynamic checkout button on modal window?

4

Hi James,

I had similar problem like this, I tried to find a solution and I found this thread but there was no answer and then I found out a solution. This is my solution:

After your modal loaded you need to re-initiate the payment button using this code

Shopify.PaymentButton.init()

I hope it can help others with similar problem.

5

You are better than Shopify. They just reply go to the community and ask for development questions and don’t care. This is a really irresponsible attitude.

6

You are better than Shopify. They just reply go to the community and ask for development questions and don’t care. This is a really irresponsible attitude.

7

You are better than Shopify. They just reply go to the community and ask for development questions and don’t care. This is a really irresponsible attitude. I can’t even delete mistyped my replies in this post.

8

This did not work for me. I’m using an ajax cart page and need the dynamic checkout buttons to reappear after the updated cart content is injected back into the dom.