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

Solved
dylanpierce
Shopify Partner
122 2 36

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 Verdict - Anti-Fraud Apps for Shopify
  • Blockade - Easily block countries, IP addresses, VPNs
  • Real ID - Verify your customer's real IDs easily & securely
0 Likes
Alan_
Shopify Partner
10 1 1

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
122 2 36

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 Verdict - Anti-Fraud Apps for Shopify
  • Blockade - Easily block countries, IP addresses, VPNs
  • Real ID - Verify your customer's real IDs easily & securely
0 Likes
Shayne
Shopify Staff
Shopify Staff
202 9 46

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

0 Likes