A place to discuss charging merchants for your apps and services using the billing API.
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.
Am I redirecting the wrong way or is this a bug on Shopify's side?
Want to see it in action? Check out our demo store.
Solved! Go to the solution
This is an accepted solution.
I believe this is intentional:
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.
This is an accepted solution.
I believe this is intentional:
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.
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.
Want to see it in action? Check out our demo store.
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