Load confirmation URL in Embedded app itself in Shopify

Question

I have an embedded app in shopify which is an paid app ,Once user approves the billing ,i want the app to show the confirmation url in the embedded app itself instead it loads externally.

getsubscriptionurl.js

export const getSubscriptionUrl = async (ctx, shop) => {
  const { client } = ctx;
  console.log(`process.env.HOST - ${process.env.HOST}`);
  console.log(`shop - ${shop}`);
  console.log(`${process.env.HOST}/?shop=${shop}`);
  const confirmationUrl = await client
    .mutate({
      mutation: RECURRING_CREATE(),
      variables: {
        returnUrl: `www.abc.com`,
      }
    })
    .then(response => response.data.appSubscriptionCreate.confirmationUrl);
console.log("me "+ confirmationUrl);
  return ctx.redirect(confirmationUrl);
};

server.js

app.prepare().then(async () => {
  const server = new Koa();
  const router = new Router();
  server.keys = [Shopify.Context.API_SECRET_KEY];
  server.use(
    createShopifyAuth({
      async afterAuth(ctx) {
        // Access token and shop available in ctx.state.shopify
        const { shop, accessToken, scope } = ctx.state.shopify;
        const host = ctx.query.host;
        ACTIVE_SHOPIFY_SHOPS[shop] = {scope:scope,accessToken:accessToken};

        const response = await Shopify.Webhooks.Registry.register({
          shop,
          accessToken,
          path: "/webhooks",
          topic: "APP_UNINSTALLED",
          webhookHandler: async (topic, shop, body) =>
            delete ACTIVE_SHOPIFY_SHOPS[shop],
        });

        if (!response.success) {
          console.log(
            `Failed to register APP_UNINSTALLED webhook: ${response.result}`
          );
        }

        // Redirect to app with shop parameter upon auth
        // ctx.redirect(`/?shop=${shop}&host=${host}`);

        server.context.client = await handlers.createClient(shop, accessToken);

        await handlers.getSubscriptionUrl(ctx, shop);
      },
    })
  );

user_8667766 · Answer

You can't basically show the confirmation URL in your app, Shopify won't trust app developers to take sensitive info like payment details, so must open the confirmation URL into a new tab, where the merchant is viewing a Shopify payment page(made by shopify) that contains the payment details to be entered and on confirm the page will redirect the merchant to the return URL as you specified before.

For testing purposes

you can send a test param within the query to allow you to test without entering any payment details

const CREATE_SUB_MUTATION_RECURRING_ONLY = gql`
  mutation RecurringSubscription(
    $returnUrl: URL!
    $test: Boolean!
    $planName: String!
    $amount: Decimal!
  ) {
    appSubscriptionCreate(
      test: $test
      name: $planName
      returnUrl: $returnUrl
      lineItems: [
        {
          plan: {
            appRecurringPricingDetails: {
              price: { amount: $amount, currencyCode: USD }
              interval: EVERY_30_DAYS
            }
          }
        }
      ]
    ) {
      userErrors {
        field
        message
      }
      confirmationUrl
      appSubscription {
        id,
        currentPeriodEnd
      }
    }
  }
`;

Now to test just pass true to test

    result = await graphQlClient?.mutate({
      mutation: CREATE_SUB_MUTATION_RECURRING_ONLY,
      variables: {
        returnUrl,
        test,
        planName: PLANS_DATA[planName].planName,
        amount: PLANS_DATA[planName].price,
      },
    });

Load confirmation URL in Embedded app itself in Shopify

1 Answers

For testing purposes