App reviews, troubleshooting, and recommendations
I'm trying to setup recurring billing in the Remix Template. In my action I'm calling the `AppSubscriptionCreate` and get the `confirmationUrl` in the response. However, when I return a redirect to the confirmation url I get a browser error that there my store has redirected me too many times. What is the correct way to handle the redirect?
export async function action({ request }) {
const { admin } = await authenticate.admin(request);
const response = await admin.graphql(
`#graphql
mutation AppSubscriptionCreate($name: String!, $lineItems: [AppSubscriptionLineItemInput!]!, $returnUrl: URL!) {
appSubscriptionCreate(name: $name, returnUrl: $returnUrl, lineItems: $lineItems, test: true) {
userErrors {
field
message
}
appSubscription {
id
}
confirmationUrl
}
}`,
{
variables: {
"name": "Super Duper Recurring Plan",
"returnUrl": "http://google.com/",
"test": true,
"lineItems": [
{
"plan": {
"appRecurringPricingDetails": {
"price": {
"amount": 10,
"currencyCode": "USD"
},
"interval": "EVERY_30_DAYS"
}
}
}
]
}
,
}
);
const responseJson = await response.json();
return redirect(responseJson.data.appSubscriptionCreate.confirmationUrl, 301)
}
Hy there, did you find any solution for this?
Same error here 👋
I tried to use different redirect code and throw instead of return but it didn't worked
export const action = async ({ request }) => {
const formData = await request.formData();
const quantity = formData.get("quantity");
console.log(quantity);
// Query
const { admin } = await authenticate.admin(request);
let mutation = await admin.graphql(
`#graphql
mutation AppPurchaseOneTimeCreate($name: String!, $price: MoneyInput!, $returnUrl: URL!) {
appPurchaseOneTimeCreate(name: $name, returnUrl: $returnUrl, price: $price) {
userErrors {
field
message
}
appPurchaseOneTime {
createdAt
id
}
confirmationUrl
}
}
`,
{
variables:
{
"name": "1000 imported orders.",
"returnUrl": "http://super-duper.shopifyapps.com/",
"price": {
"amount": 10,
"currencyCode": "USD"
}
}
},
);
if (mutation != null){
const muJson = await mutation.json();
if (Array.isArray(muJson.data.appPurchaseOneTimeCreate.userErrors) && muJson.data.appPurchaseOneTimeCreate.userErrors.length >= 1){
console.log("Error: ",muJson.data.appPurchaseOneTimeCreate.userErrors)
return null;
}
// Redirect to checkout
console.log("appPurchaseOneTime",muJson.data.appPurchaseOneTimeCreate.appPurchaseOneTime);
console.log("ConfirmationUrl ", muJson.data.appPurchaseOneTimeCreate.confirmationUrl)
throw redirect(muJson.data.appPurchaseOneTimeCreate.confirmationUrl, 303);
}
return null;
}
The real fun part is that i can take the redirect url from the 302 header sent, copy it into the browser bar, and it works. But the remix redirect function does not work with this url
try
redirect(confirmationUrl, { target: "_parent" })
?
You made my day sir!
It's working finally
Same issue as well. Did you manage to find a fix or an alternative way to handle this?
The only way that I have been able to come up with is to open in a separate window:
export async function action({ request, params }) {
const { admin, session } = await authenticate.admin(request);
const { shop } = session;
let res = await createShopSubscription("Basic", admin.graphql);
console.log(res.data.appSubscriptionCreate.confirmationUrl);
// @TS-ignore
return {confirmationUrl: res.data.appSubscriptionCreate.confirmationUrl};
}
export default function Billing() {
const navigate = useNavigate();
const submit = useSubmit();
const data = useActionData();
if(data.confirmationUrl){
window.open(data.confirmationUrl, "_blank")
}
// .........
Did you try the suggestion I posted above? Seems to work.
On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...
By Skye Nov 8, 2023The year-end shopping season is just around the corner. Is a flash sale on your radar? Are...
By Jasonh Nov 6, 2023