Access Checkout Token from Product Page generated by dynamic checkout button

Solved

I am in need of accessing the checkout token on the product page after a user clicks on the dynamic checkout button, but before it loads the actual checkout page (as developers do not have access to the checkout page and can only access the info via webhook subscription). This is on the shopify online store default.

 

The dynamic checkout button can be:

  • 'Buy Now' button
  • or any of the 3rd Party buttons
  • or the 'More payment options' button.

 

From what I can when any of the above dynamic checkout buttons are clicked, a fetch request is sent to /wallets/checkouts.json -> which returns the checkout object as the request payload. Inside the checkout object contains a token which is the checkout_token.

The data is here and fetched, but I'm not sure how to access that data.

 

Another thing I've checked is the cookies:

There appears to be a cookie called 'checkout_token', but the format does not match any checkout_token I have seen. ie: 

eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaEpJaVV5TlRBeU1HUTNaREV4TXpoaU1ESm1ZelUyTTJZMU5EZGxOemsyTldVM01nWTZCa1ZVIiwiZXhwIjoiMjAyMC0wNi0xNFQxOTozODoxNi45MTNaIiwicHVyIjoiY29va2llLmNoZWNrb3V0X3Rva2VuIn19--997ba170f1e0ce59e45749fcf91bf1249cfd0a41

On the contrary, there is a 'cart' in cookies that represents the cart_token.

 

Please let me know if anyone can help identify how to get the checkout_token which appears to already be generated on the product page.

 

Thanks.

ui-gab
https://www.uiavenue.ca
We specialize in data analytics. If I've helped you today, please give our give our app a try (15-day free trial) https://apps.shopify.com/ui-ave-analytics and maybe write a good review.
Send me a message if you want a free data analysis consultation.
0 Likes
Jason
Shopify Expert
10272 144 1942

Checkouts are only created when moving into the checkout flow. Whether via moving to /checkout, starting a dynamic checkout, etc.
They are not pre-generated on the product page.

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.

Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.


★ http://freakdesign.com.au ★
0 Likes

Hey Jason,

 

What you have said is not wrong, but to further explain this: is that when you start the dynamic checkout process using Shopify's dynamic checkout buttons in the screenshots below. I've outlined the how it currently works and how the checkout information technically exists dynamically on the product page.

 

To reproduce:

  • Have dynamic checkout buttons enabled
  • Go to Product page.
  • Open developer console and go to the Network tab (I'm using google chrome)

Step 1: Click on dynamic checkout button or more options button ( I recommend more options button because it is easier to visualize )

screen1.PNG

 

Step 2: Open up the dynamic checkout and observe the following screen.

screen2.PNG

 

Step 3: Look in the network tab for request called checkouts.json which has been sent the moment a user clicks on the dynamic checkout button.

The system will send a request to create a new checkout and return that result of that checkout while the user is still on the Product page while using the dynamic checkout. Please observe screenshot below:

screen3.PNG

 

Summary: The checkout exists via the dynamic checkout, the question is how to access this checkout on this product page via my own javascript.

ui-gab
https://www.uiavenue.ca
We specialize in data analytics. If I've helped you today, please give our give our app a try (15-day free trial) https://apps.shopify.com/ui-ave-analytics and maybe write a good review.
Send me a message if you want a free data analysis consultation.
0 Likes

Sorry, for weird double posting.

ui-gab
https://www.uiavenue.ca
We specialize in data analytics. If I've helped you today, please give our give our app a try (15-day free trial) https://apps.shopify.com/ui-ave-analytics and maybe write a good review.
Send me a message if you want a free data analysis consultation.
0 Likes
yanteb
Shopify Partner
32 0 4

Were you able to figure this out?

0 Likes
tolgapaksoy
Shopify Partner
67 5 38

The given string in your cookie:

eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaEpJaVV5TlRBeU1HUTNaREV4TXpoaU1ESm1ZelUyTTJZMU5EZGxOemsyTldVM01nWTZCa1ZVIiwiZXhwIjoiMjAyMC0wNi0xNFQxOTozODoxNi45MTNaIiwicHVyIjoiY29va2llLmNoZWNrb3V0X3Rva2VuIn19--997ba170f1e0ce59e45749fcf91bf1249cfd0a41

Is base64 encoded.

If you strip the end part: --997ba170f1e0ce59e45749fcf91bf1249cfd0a41

You're left with this base64 encoded string: eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaEpJaVV5TlRBeU1HUTNaREV4TXpoaU1ESm1ZelUyTTJZMU5EZGxOemsyTldVM01nWTZCa1ZVIiwiZXhwIjoiMjAyMC0wNi0xNFQxOTozODoxNi45MTNaIiwicHVyIjoiY29va2llLmNoZWNrb3V0X3Rva2VuIn19

If you decode this string:

atob('eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaEpJaVV5TlRBeU1HUTNaREV4TXpoaU1ESm1ZelUyTTJZMU5EZGxOemsyTldVM01nWTZCa1ZVIiwiZXhwIjoiMjAyMC0wNi0xNFQxOTozODoxNi45MTNaIiwicHVyIjoiY29va2llLmNoZWNrb3V0X3Rva2VuIn19')
> "{\"_rails\":{\"message\":\"BAhJIiUyNTAyMGQ3ZDExMzhiMDJmYzU2M2Y1NDdlNzk2NWU3MgY6BkVU\",\"exp\":\"2020-06-14T19:38:16.913Z\",\"pur\":\"cookie.checkout_token\"}}"

so that string appears to contain some JSON with the checkout token and an expiry date. Obviously the "message" also seems to be base64 encoded:

atob('BAhJIiUyNTAyMGQ3ZDExMzhiMDJmYzU2M2Y1NDdlNzk2NWU3MgY6BkVU')
> "\u0004\u0008I\"%25020d7d1138b02fc563f547e7965e72\u0006:\u0006ET"

This seems to be some weird encoded token. I'm not sure if the token is "25020d7d1138b02fc563f547e7965e72" or "020d7d1138b02fc563f547e7965e72".

I hope this might help you a bit.

0 Likes

This is an accepted solution.

Thanks,

I took another look today. And it appears that they have removed that checkout cookie altogether until the user enters the checkout page. Which does't allow any javascript.

So, there in conclusion, it is not possible to access that checkout_token prior to the checkout page.

 

ui-gab
https://www.uiavenue.ca
We specialize in data analytics. If I've helped you today, please give our give our app a try (15-day free trial) https://apps.shopify.com/ui-ave-analytics and maybe write a good review.
Send me a message if you want a free data analysis consultation.
0 Likes