Storefront API how to get ReCharge redirect URL instead

[Sante_Kotturi]

I'm building a custom storefront using the Storefront API. I'm able to fetch products, display them, add variants to a cart, build a cart and request the checkout redirect url from shopify. However, the API doesn't return the correct redirect url if the cart contains subscription products. in the normal shopify page, if you click Checkout and have subscription products, it sends through to recharge. I don't see any option to pass a parameter to let shopify know you want a recharge url. 

the API returns checkout data including the checkout ID and the webUrl:

      "id": "Z2lkOi8vc2hvcGlmeS9DaGVja291dC8wN2U2M2JjYWIyYjUzZGM2YWM0NmNiY2I2YWJiY2E1Yj9rZXk9NGFjNjZmZjNjYTJhOGQyYzI1YjQzZDFhNmI0MGQ5MDU=",
      "webUrl": "https://checkout.myshopify.io/1/checkouts/07e63bcab2b53dc6ac46cbcb6abbca5b?key=4ac66ff3ca2a8d2c25b43..."

while rechage expects the url: 

checkout_url= "https://checkout.rechargeapps.com/r/checkout?myshopify_domain="+myshopify_domain+"&cart_token="+toke...

I was hoping the Web Url shopify returns could be parsed and used to create the correct recharge url but none of the webUrl sections are valid cart tokens 😞 

any help or suggestions would be greatly appreciated!

[beppu]

The cart token comes from the current cart.  You can get it by making a request to `/cart.js`.

https://help.shopify.com/en/themes/development/getting-started/using-ajax-api#get-cart

[beppu]

Example:

fetch('/cart.js').then(function(res){ 
  return res.json()
}).then(function(cart){ 
  console.log(cart.token, cart.items)
})

This snippet of js can be run from a page on your shopify store to retrieve the cart token needed for the ReCharge checkout URL.

[Sante_Kotturi]

@beppu, I'm building a storefront without the shopify store, using the Storefront API, so I don't have access to things like `cart.js`. it seems like I'd need to either load the shopify store page on a server to get the cookie to get from the token from or load a blank shopify cart page... or just build my own subscription billing service using the Admin API... 

[benshrimpton]

Any joy with this? Please share.

[beppu]

I would recommend that you send an email to [email protected] and ask your question there.  I didn't realize you didn't have easy access to a cart in your situation, but since that's the case, I have a feeling you might have to use ReCharge's API directly to create a subscription.  You should ask them, because they'll know for sure.

https://developer.rechargepayments.com/#subscriptions

[StephenK]

We've just done this and had to setup a page on the Shopify Online Store, with some JS code which:-

1. Clears the cart
2. Adds the subscription product
3. Grabs the token
4. Redirects to recharge URL with any needed query string items

Longer term we are likely to use the new Checkouts API from ReCharge, to avoid this step.

[com_jim]

Hi @StephenK 

I appreciate it's now a couple of years later, but we have a similar requirement to this and I was wondering if you'd be able to share a bit more of the detail on how you've accomplished this - do you have any code snippets you could share?

Any help would be appreciated!

Cheers

Jim

[StephenK]

The code I used would have been under NDA etc, however it used the AJAX API for the first two steps:-

https://shopify.dev/docs/api/ajax/reference/cart

Then using the `token` value returned to create the recharge URL like this:-

https://checkout.rechargeapps.com/r/checkout?cart_token=[token]&myshopify_domain=[domain] 

Recharge's support team were pretty useful on this approach, so they might also be able to help.

[com_jim]

Fantastic, appreciate you taking the time to reply, thank you!