嵌入式应用程序本身在Shopify中加载确认URL

Question

我在Shopify中有一个嵌入式应用程序，该应用程序是一个付费应用程序，一旦用户批准了帐单，我希望该应用在嵌入式应用程序本身中显示确认URL，而是外部加载。

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);
      },
    })
  );

Answer 1

您不能 基本上显示您的应用程序中的确认URL，Shopify不会相信应用程序开发人员会获取敏感信息，例如付款详细信息，因此必须将确认URL打开新标签，商人正在查看一个shopify付款页面（由Shopify制作），其中包含要输入的付款详细信息，并在确认页面上将将商家重定向到您之前指定的返回URL。

为了进行测试目的，

您可以在查询中发送测试参数，以允许您进行测试

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
      }
    }
  }
`;

而无需输入任何付款详细信息即可测试，只需通过true test> test

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