Shopify App Billing

Partner Discussions
,
1

image
image1172×809 66.2 KB

when i click on the getEasy /getBasic . It goes to Log In

image
image1265×830 38.6 KB

WHY ITS GOING TO LOGIN PAGE
and when i put shop domain and login

it gives this error

[Report Only] Refused to frame ‘https://accounts.shopify.com/’ because an ancestor violates the following Content Security Policy directive: “frame-ancestors ‘self’”.

chrome-error://chromewebdata/:1 Refused to display ‘https://accounts.shopify.com/’ in a frame because it set ‘X-Frame-Options’ to ‘deny’.

Am i doing something wrong ???

import { authenticate, MONTHLY_PLAN, ANNUAL_PLAN } from "../shopify.server";

export const loader = async ({ request }) => {
  const { billing, session } = await authenticate.admin(request);
  console.log("subscription api got a hit ", billing, session);
  let { shop } = session;
  shop = shop.replace(".myshopify.com", "");

  await billing.require({
    plans: [MONTHLY_PLAN],
    onFailure: async () =>
      billing.request({
        plan: MONTHLY_PLAN,
        isTest: true,
        returnUrl: `https://admin.shopify.com/store/${shop}/apps/learning-app-115/app/select-plan`,
      }),
  });
};


  const handleButtonClick = () => {
    window.location.href = "/app/subscriptions";
  };

 <div style={{ paddingTop: "16px" }}>
              <button
                style={planActionButtonStyles}
                onMouseEnter={(e) =>
                  (e.target.style.backgroundColor =
                    planActionButtonHoverStyles.backgroundColor)
                }
                onMouseLeave={(e) =>
                  (e.target.style.backgroundColor = "#6366f1")
                }
                onClick={handleButtonClick}
              >
                Get {plan.name}
              </button>
   </div>
2

You are changing the window location href without the store information.
If you want to navigate within your app, checkout the open examples in here Navigation

When you change the examples to Javascript.
If you open up your dev tools in chrome, you will also see the browser console logs and network requests, this will also help you debug your app in future and understand the flow of requests and why things are happening.

3

Same issue with the open .