Accessing the checkout from within the checkout broken?

Solved
garyrgilbert
Explorer
44 3 11

 

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:

'https://' + Shopify.Checkout.apiHost + '/wallets/checkouts/' + Shopify.Checkout.token + '.json';

 

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

 

0 Likes
garyrgilbert
Explorer
44 3 11

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":"..." ...

0 Likes