Solved

Accessing the checkout from within the checkout broken?

garyrgilbert
Shopify Partner
388 40 159

 

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

 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Accepted Solution (1)

garyrgilbert
Shopify Partner
388 40 159

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

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

View solution in original post

Reply 1 (1)

garyrgilbert
Shopify Partner
388 40 159

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

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution