Stuck on redirect to order completion page after making payment using headless Storefront API

[h_dev]

I’m using the Storefront API for a headless FrontEnd.

This issue only happens when using ShopPay. When checking out with just a card, and not ShopPay, it completes and displays the Shopify Order Completion Page.

I’m creating a cart using the graphql “cartCreate”, using “getCart”. This generates a cart.checkoutUrl. Items are added to this URL, then the customer is redirected to the url. The customer selects “ShopPay”, authenticates with ShopPay, makes a payment. The payment is made, the order is placed, the customer gets an email. However, the URL in the browser is: "https://my-site.myshopify.com/11111111/stripe/authentications/authentication_callback?payment_intent=XXXXX&payment_intent_client_secret=YYYYY&source_type=card", and it sits there with a spinner and a “Wait while we redirect you.” text.

In development (bogus payment gateway), it would show the Shopify order completion screen.

When in production, using ShopPay and a real payment gateway, it shows this “Wait while we redirect you”.

I would like to have it send the users to the standard Shopify order completion screen. Is there a config step that I missed?

redirection page, that it gets stuck on:

The Shopify Order Completion Page that I want:

[PromarkDC10]

It’s giving a bogus gateway and redirect because the invoice for the shop
store hasn’t been paid yet I can’t pay a bill if I can’t see it or have
access to it

[h_dev]

The money gets taken from the live credit card (performs a live transaction). The shopify store bill has been paid. Going the conventional Shopify Route (non-store-front api) works.

[h_dev]

Update: I ran through more scenarios. This seems to be isolated to:

Headless “Shopify Cart API” using “ShopPay” on a “subscription product, backed by Recharge”, stalls at redirecting, after a 3DS2 check. It only happens when purchasing a Recharge Subscription product using the Shopify Storefront API and Shop Pay

Scenario 1: Not working
“Shopify Product (subscription recharge)” → add to cart (via api) → redirect to checkout URL → Shopify Checkout Page → login to ShopPay account → continue checkout → 3DS2 Check (which goes via Stripe) → approve → Hangs at “Wait while we redirect you”

Scenario 2: Not working
“Shopify Product (subscription recharge)” → add to cart (via api) → redirect to checkout URL → Shopify Checkout Page → login to ShopPay account → continue checkout → 3DS2 Check (which goes via Stripe) → cancel transactions → Hangs at “Wait while we redirect you”

Scenario 3: Working
“Shopify Product” → add to cart (via api) → redirect to checkout URL → Shopify Checkout Page → login to ShopPay account → continue checkout → 3DS2 Check (which goes via Stripe) → approve → displays “Shopify Order Complete page”

Scenario 4: Working
“Shopify Product” → add to cart (via Shopify Store Page - with recharge widget on it) → redirect to checkout URL → Shopify Checkout Page → login to ShopPay account → continue checkout → 3DS2 Check (which goes via Stripe) → approve → displays “Shopify Order Complete page”

Scenario 5: Working
“Shopify Product” → add to cart (via api) → redirect to checkout URL → Shopify Checkout Page → manually enter details and card → continue checkout → displays “Shopify Order Complete page” → displays “Shopify Order Complete page”

[h_dev]

Another Update.

Pressing “back” in the browser twice, then displays the “shop pay screen with card details”, then it automatically redirects to the “Order is Complete page”: https://mystore.my-shopify.com/11111111/checkouts/abcdef/thank_you.

[h_dev]

I generated 2 checkouts, with the same subscription product:

1. through the normal shopify site
2. through the Frontend API

I queried the /admin/api/2022-04/checkouts/ API

The only difference between the two is: the “source_name”. I think the “source_name” might be triggering the 3DS2 check since it’s coming from the storefront API. The 3DS2 check is not redirecting properly. When using the regular Shopify checkout, I don’t hit 3DS2.