How to properly add multiple billing plan to shopify app?

abhinavp00719
Shopify Partner
27 2 9

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???

Founder Descrii Description Generator
0 Likes
SBD_
Shopify Staff
Shopify Staff
1071 143 189

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
abhinavp00719
Shopify Partner
27 2 9

Yes @SBD_ ... 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.

Founder Descrii Description Generator
gsingh7
New Member
1 0 0

Hi, How did you manage to do the redirection?

 

I have managed to create subscriptionurl and return it back to the client, but what do you do after that?

If I fetch that directly from the client, I get the CORS error.

 

Thanks,

Gurpreet

0 Likes