On my app I want to use managed pricing with a single plan required for every customer. On install the customer should be redirected directly into payment for that single plan without going through shopifys plan section page (because only on plan).
There is no option to require subscription to a plan in the apps shopify.yaml. Also I can not generate a payment url for managed pricing via appSubscriptionCreate in the admin api for managed pricing plans.
Is that correct or do I miss something?
With managed pricing you can’t automatically direct to the payment page at the moment. The merchant has to select a plan.
It also gives you a chance to sell your apps features and educate the merchant on the value of subscribing rather than a surprise payment page.
right now shopify doesnt automatically redirects u have to write code for manual redirection
...
export const loader = async ({ request }) => {
const { session, admin } = await authenticate.admin(request);
if (!session) {
throw new Response("Unauthorized", { status: 401 });
}
const url = new URL(request.url);
const host = url.searchParams.get(“host”);
if (!host) {
return redirect(
\`https://${session.shop}/admin/apps/${process.env.SHOPIFY_API_KEY}\`,
);
}
let hasActivePayment = false;
let subscriptionDetails = null;
try {
const response = await admin.graphql(\`
query {
currentAppInstallation {
activeSubscriptions {
id
name
status
trialDays
currentPeriodEnd
lineItems {
id
plan {
pricingDetails {
\__typename
... on AppRecurringPricing {
price {
amount
currencyCode
}
interval
}
}
}
}
}
}
}
\`);
console.log("GraphQL Response Status:", response.status);
if (response && response.status === 200) {
const data = await response.json();
console.log("Full GraphQL Response:", JSON.stringify(data, null, 2));
// FIX: Use currentAppInstallation instead of appInstallation
if (data && data.data && data.data.currentAppInstallation) {
subscriptionDetails =
data.data.currentAppInstallation.activeSubscriptions;
console.log("Found subscriptions:", subscriptionDetails);
hasActivePayment =
subscriptionDetails &&
subscriptionDetails.length > 0 &&
subscriptionDetails.some(
(sub) =>
sub.status === "ACTIVE" ||
sub.status === "ACCEPTED" ||
sub.status === "PENDING" ||
(sub.trialDays && sub.trialDays > 0),
);
console.log("Payment Status Result:", {
hasActivePayment,
subscriptionCount: subscriptionDetails?.length,
subscriptionStatuses: subscriptionDetails?.map((s) => ({
name: s.name,
status: s.status,
trialDays: s.trialDays,
})),
});
} else {
console.log("No currentAppInstallation found in response data");
console.log(
"Available data keys:",
data ? Object.keys(data) : "No data",
);
console.log(
"Data structure:",
data?.data ? Object.keys(data.data) : "No data.data",
);
}
} else {
console.log("GraphQL request failed with status:", response?.status);
}
} catch (error) {
console.log("Error checking subscription:", error);
console.log("Error details:", error.message, error.stack);
hasActivePayment = false;
}
const result = {
apiKey: process.env.SHOPIFY_API_KEY || "",
host,
hasActivePayment,
subscriptionDetails,
shopName: session.shop.replace(".myshopify.com", ""),
appHandle: process.env.APP_HANDLE ,
};
console.log(“Final loader result:”, {
hasActivePayment: result.hasActivePayment,
subscriptionCount: result.subscriptionDetails?.length,
shopName: result.shopName,
appHandle: result.appHandle,
});
return result;
};
// Working redirect component that bypasses X-Frame issues
function DirectRedirect({ shopName, appHandle }) {
useEffect(() => {
// Use window.top to break out of the iframe
const redirectUrl = \`https://admin.shopify.com/store/${shopName}/charges/${appHandle}/pricing_plans\`;
// Method 1: Try to break out of iframe
if (window.top !== window.self) {
window.top.location.href = redirectUrl;
} else {
// Method 2: Direct redirect if not in iframe
window.location.href = redirectUrl;
}
}, [shopName, appHandle]);
return (
<div style={{ padding: "50px", textAlign: "center" }}>
<p>Redirecting to subscription page...</p>
</div>
);
}
export default function App() {
const {
apiKey,
host,
hasActivePayment,
subscriptionDetails,
shopName,
appHandle,
} = useLoaderData();
const location = useLocation();
const createLinkProps = (to) => ({
to: \`${to}${location.search}\`,
reloadDocument: false,
});
// Direct redirect if no active payment
if (!hasActivePayment) {
return (
<AppProvider
isEmbeddedApp
apiKey={apiKey}
host={host}
forceRedirect={true}
>
<DirectRedirect shopName={shopName} appHandle={appHandle} />
</AppProvider>
);
}
return (
<AppProvider isEmbeddedApp apiKey={apiKey} host={host} forceRedirect={true}>
<NavMenu>
the above code can u help u in redirection