The redirect url after shopify app subscription approved

[jiangzhuo]

I am developing a  shopify app, when I test subscription, I got a problem, the reproduce steps:
1. I try to install my app on development store and my app has subscription. So I click the approve button.
2. Finally, The API https://xxxxx.myshopify.com/admin/internal/web/graphql/core?operation=ChargeApproval&type=query is called.
3. In the response of the API,

{
  "data": {
    "billingAccount": {
      "id": "gid://shopify/BillingAccount/xxxxxx",
      "currency": "USD",
      "validPaymentMethods": [
        "CREDIT_CARD",
        "PAYPAL"
      ],
      "paymentMethods": [],
      "__typename": "BillingAccount"
    },
    "chargeNode": {
      "id": "gid://shopify/AppSubscription/xxxx",
      "__typename": "AppSubscription",
      "name": "My Shopify One-Time Charge",
      "subscriptionStatus": "ACTIVE",
      "trialDays": 0,
      "test": true,
      "returnUrl": "https://xxxxxx.cloudfront.net/?shop\u003dxxxxx.myshopify.com\u0026host\u003deHh4eHh4eHgubXlzaG9waWZ5LmNvbS9hZG1pbg\u003d\u003d",
      "replacementBehavior": "STANDARD",
      "lineItems": [
        {
          "id": "gid://shopify/AppSubscriptionLineItem/xxxxx?v\u003d1\u0026index\u003d0",
          "plan": {
            "pricingDetails": {
              "__typename": "AppRecurringPricing",
              "interval": "EVERY_30_DAYS",
              "price": {
                "amount": "5.0",
                "currencyCode": "USD",
                "__typename": "MoneyV2"
              }
            },
            "__typename": "AppPlanV2"
          },
          "__typename": "AppSubscriptionLineItem"
        }
      ]
    },
    "appNode": {
      "__typename": "App",
      "id": "gid://shopify/App/xxxxx",
      "title": "worldshopping",
      "developerName": "xxxx",
      "icon": {
        "originalSrc": "https://cdn.shopify.com/shopifycloud/shopify/assets/default-app-74bfb89634baf86f3402062ef55df218fe55b4f2775ff605d0ccfe1a20f9c0d3.png",
        "__typename": "Image"
      },
      "installation": {
        "id": "gid://shopify/AppInstallation/xxxx",
        "activeSubscriptions": [
          {
            "id": "gid://shopify/AppSubscription/xxxx",
            "name": "My Shopify One-Time Charge",
            "status": "ACTIVE",
            "currentPeriodEnd": "2022-10-17T09:34:39Z",
            "trialEndsAt": "2022-10-17T09:34:39Z",
            "lineItems": [
              {
                "id": "gid://shopify/AppSubscriptionLineItem/xxxx?v\u003d1\u0026index\u003d0",
                "plan": {
                  "pricingDetails": {
                    "__typename": "AppRecurringPricing",
                    "interval": "EVERY_30_DAYS",
                    "price": {
                      "amount": "5.0",
                      "currencyCode": "USD",
                      "__typename": "MoneyV2"
                    }
                  },
                  "__typename": "AppPlanV2"
                },
                "__typename": "AppSubscriptionLineItem"
              }
            ],
            "__typename": "AppSubscription"
          }
        ],
        "__typename": "AppInstallation"
      }
    }
  },
  "extensions": {
    "cost": {
      "requestedQueryCost": 16,
      "actualQueryCost": 15,
      "throttleStatus": {
        "maximumAvailable": 10000.0,
        "currentlyAvailable": 9985,
        "restoreRate": 500.0
      }
    }
  }
}

We got a returnUrl https://xxxxxx.cloudfront.net/?shop\u003dxxxxx.myshopify.com\u0026host\u003deHh4eHh4eHgubXlzaG9waWZ5...
4. The page follow this returnUrl try to redirect to my server. But the url is not very valid, the url is https://xxxxxx.cloudfront.net/?shop=xxxxx.myshopify.com&host=eHh4eHh4eHgubXlzaG9waWZ5LmNvbS9hZG1pbg=...

Because the host is base64 encoded, so it has two equal signs. The problem is the equal sign, my gateway can not process this non-standard url. I most case, if the url query string parameter include equal sign, it should be processed by encodeURIComponent. Like replace == with  %3D%3D.

[ChaseKaneki · Accepted solution]

Hello @jiangzhuo,

Apologies for the oddities in your return url not properly redirecting you and we appreciate you reaching out. The return url is set by the subscription application developer. You can reach out to them directly to report the bug or you can inform us of which application you are using for subscriptions and we can contact them. 

[oribenezra]

Hi, I'm also experiencing the same issue but only in production, I hope it will be fixed soon by Shopify.

Is there any workaround? I can't get any payments for my app now.

Workaround

I've found a workaround, I instead listen to APP_SUBSCRIPTIONS_UPDATE, not the best choice but it solved my problem for now,

But I'm still waiting for a fix.

[jiangzhuo]

For my case, my project is generated from shopify example project, I find some similar code in shopify github. 

So my project also has some code like this

const returnUrl = `https://${Shopify.Context.HOST_NAME}?shop=${session.shop}&host=${Buffer.from(`${session.shop}/admin`).toString('base64')}`;

I checked my code(generated by shopify CLI) and do some fix on it.

[oribenezra]

I am using the same code as you described, could you please share your fix?

[ChaseKaneki]

@oribenezra, for the sample code that was noted by @jiangzhuo you can use their solution. 

const returnUrl = `https://${Shopify.Context.HOST_NAME}?shop=${session.shop}&host=${Buffer.from(`${session.shop}/admin`).toString('base64')}` 

 
You can also try to generate a Shopify app from scratch using the CLI command.