Solved

Billing API - "Cancel Subscription" redirecting to the /apps page instead of my /{app}/plans page

dylanpierce
Shopify Partner
210 3 94

Hi, this is a bit of a nitty gritty details question but it affects the shop owner app billing experience and therefore app subscription conversion rates.

My app has multiple plans on offer, and I need to support a `/plans` page that shows the offerings.

Here's a very basic multi-tier pricing plan page that's hosted on my app:

NOTE: the routes /api/plans/basic, /api/plans/pro, and /api/plans/enterprise all execute their respective createAppSubscription queries and return the confirmationUrl in a string.

 

import { Page } from '@shopify/polaris'
import createApp from '@shopify/app-bridge';
import { Redirect } from '@shopify/app-bridge/actions';
import Cookies from "js-cookie";
import axios from 'axios';


export default function Plans() {
  const app = createApp({
    apiKey: API_KEY,
    shopOrigin: Cookies.get('shopOrigin'),
  });

  const redirect = Redirect.create(app);

  function openPlan(planUrl) {
    axios.get(planUrl)
      .then((res) => {
        redirect.dispatch(Redirect.Action.REMOTE, { url: res.data.confirmationUrl, newContext: false })
      })
      .catch(err => { console.log(err) })
  }


  return (
    <Page>
      Pick plan:

      <button onClick={() => { 
        openPlan('/api/plan/basic') 
      }}>
        Basic
      </button>
      <button onClick={() => { 
        openPlan('/api/plan/pro') 
      }}>
        Professional
      </button>
      <button onClick={() => { 
        openPlan('/api/plan/enterprise') 
      }}>
        Enterprise
      </button>
    </Page>
  )
}

 


This works great, the redirect happens and the user is able to accept these plans. However the problem is when they click "Cancel" you would expect to redirect back to the `/plans` section. However, instead they are redirected to the shop owner's `/apps` section.

So if they clicked the wrong plan, they have to go through the hoops of getting back to the `/plans` section. This is not a great experience and I'd imagine it leads to lost sales.

Kapture 2020-09-02 at 09.23.50.gif

 


Am I redirecting the wrong way or is this a bug on Shopify's side?

Founder of Real ID - Verify your customer's real IDs easily & securely with modern A.I.

Want to see it in action? Check out our demo store.

Accepted Solution (1)

Alan_
Shopify Partner
12 3 5

This is an accepted solution.

I believe this is intentional:

https://community.shopify.com/c/API-Announcements/Upcoming-Change-Declined-app-charge-redirects-will...

I see how it might make sense if a merchant is clicking "Cancel" because they're no longer interested in the app, but I agree that it's not a great experience for merchants who just meant to select a different plan.

I think all you can do is make your plan page as clear as possible. I realize your screenshot likely isn't final, but you'll probably want to use large plan selection buttons with very obvious pricing/feature details next to each one.

 

View solution in original post

Replies 3 (3)

Alan_
Shopify Partner
12 3 5

This is an accepted solution.

I believe this is intentional:

https://community.shopify.com/c/API-Announcements/Upcoming-Change-Declined-app-charge-redirects-will...

I see how it might make sense if a merchant is clicking "Cancel" because they're no longer interested in the app, but I agree that it's not a great experience for merchants who just meant to select a different plan.

I think all you can do is make your plan page as clear as possible. I realize your screenshot likely isn't final, but you'll probably want to use large plan selection buttons with very obvious pricing/feature details next to each one.

 

dylanpierce
Shopify Partner
210 3 94

Thanks @Alan_ I wasn't able to find that announcement. That clears it up. I don't necessarily agree with the decision decision on their part, I think redirecting back would help conversions that help both us & Shopify. But that's a different story.

Thanks for the help, now I know it's not just me.

Founder of Real ID - Verify your customer's real IDs easily & securely with modern A.I.

Want to see it in action? Check out our demo store.

Shayne
Shopify Staff
253 19 64

Thanks for the feedback. Posting in the original thread with your use case / opinion always adds weight to the issue, so definitely feel free to do that as well 🙂 

Shayne | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog