Storefront API how to get ReCharge redirect URL instead

Sante_Kotturi
Shopify Partner
4 0 1

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!

Replies 9 (9)

beppu
Shopify Partner
7 0 6

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
Shopify Partner
7 0 6

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
Shopify Partner
4 0 1

@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
Shopify Partner
12 0 26

Any joy with this? Please share.

beppu
Shopify Partner
7 0 6

I would recommend that you send an email to support@rechargepayments.com 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
Shopify Partner
80 7 46

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.

Some Shopify/Ecommerce related articles - https://medium.com/@stephenkeable
com_jim
Shopify Partner
2 0 0

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
Shopify Partner
80 7 46

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.

Some Shopify/Ecommerce related articles - https://medium.com/@stephenkeable
com_jim
Shopify Partner
2 0 0

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