Dedicated to the Hydrogen framework, headless commerce, and building custom storefronts using the Storefront API.
Not too long ago (was working as of Oct 27) querying the checkout from within the checkout in Shopify Plus stores was possible via an ajax call. The access_token is available in clear text in the "shopify-checkout-api-token" meta field the checkout_json_url variable was put together via:
Apparently the shopify-checkout-api-token has been removed...
const checkout_token = Shopify.Checkout.token;
const checkout_json_url = 'https://' + Shopify.Checkout.apiHost + '/wallets/checkouts/' + checkout_token + '.json';
const authorization_token = document.head.querySelector('[name=shopify-checkout-api-token][content]').content;
const authorization_header_value = 'Basic ' + btoa(authorization_token);
var get_checkout = function(callback) {
const req = new XMLHttpRequest();
req.open("GET", checkout_json_url);
req.setRequestHeader("Authorization", authorization_header_value);
req.onload = function() {
var status = req.status;
if (status === 200) {
const checkout_data = JSON.parse(req.response);
callback(checkout_data.checkout);
} else {
callback(null);
}
};
req.send();
};
My customer indicated now that the check which relied on the results of the information in the checkout object is failing, upon inspection I see a new CORS error which was previously not there.
.. Refused to connect to 'https://[redacted-to-protect-customer].myshopify.com/wallets/checkouts/2ccf3f2c63b27a54991e3ff7e0151c13.json' because it violates the following Content Security Policy directive: "connect-src 'self' ..
Can anyone confirm and perhaps suggest an alternative method? Will I now have to make a call offsite with the checkout_id to then query the checkout api and then return the data when I have everything available anyway, just to satisfy the new and overly strict CORS policy? Is there somewhere where these changes are published so I can in future be more reactive instead of having to get informed that something is no longer working from a customer?
This same request works on one customer, but not for a different customer...
Cheers and thanks in advance
Solved! Go to the solution
This is an accepted solution.
Found my own answer 🙂
The Meta Tag <meta name="shopify-checkout-api-token" has been removed
The access_token is now available under...
Shopify.Checkout.dynamicCheckoutPaymentInstrumentsConfig = {"paymentInstruments":{"accessToken":"..." ...
This is an accepted solution.
Found my own answer 🙂
The Meta Tag <meta name="shopify-checkout-api-token" has been removed
The access_token is now available under...
Shopify.Checkout.dynamicCheckoutPaymentInstrumentsConfig = {"paymentInstruments":{"accessToken":"..." ...