How to properly add multiple billing plan to shopify app?

Highlighted
Shopify Partner
26 2 7

I am following this tutorial -> Build a Shopify App with Node.js and React. And I am at the stage when I have to add billing to my app. It is working properly, but I have to change the flow of steps to do the billing. 

 

Currently, the app redirects to the Charges Confirmation URL just after the app is installed.

BUT I want a separate pricing page in my app. He should be redirected to the Charges Confirmation URL when the customer clicks on the "Select This Plan" button on the pricing page. 

 

For this, I have followed this method

1. Created a separate pricing page with pricing tables and button to select the plan

2. Added a post /api/shop/plan1 endpoint which returns a ctx.redirect(confirmationUrl)

3. Whenever the button on the pricing page is clicked the request is sent to /api/shop/plan1

4. Now here the user should be redirected to the confirmation URL, but he is not getting redirected. The redirection url is getting Status Code 303. Error is something like => blocked by CORS policy No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

And this is not working.

Is this the correct approach?

Is this redirection related to shopify-app-bridge Redirect action?

 

If not what is the correct approach???

0 Likes
Highlighted
Shopify Staff
Shopify Staff
1040 139 163

Hey @abhinavp00719,

 

Whenever the button on the pricing page is clicked the request is sent to /api/shop/plan1

Is this an AJAX request? and does it need to be?

0 Likes
Highlighted
Shopify Partner
26 2 7

Yes @scottydont ... It is a GET request... If not how should I proceed? Well, it is working fine now. This issue was solved using the Polaris app bridge redirect component.

1 Like