Javascript / Webflow
We replace their link with a link we get from Shopify's Storefront Cart API and store the checkout link in local storage to not get throttled by Shopify.
// put this in a <script></script> tag on the external webpage
function setWithExpiry(key, value, ttl) {
const now = new Date();
// `item` is an object which contains the original value
// as well as the time when it's supposed to expire
const item = {
value: value,
expiry: now.getTime() + ttl,
};
localStorage.setItem(key, JSON.stringify(item));
}
function getWithExpiry(key) {
const itemStr = localStorage.getItem(key);
// if the item doesn't exist, return null
if (!itemStr) {
return null;
}
const item = JSON.parse(itemStr);
const now = new Date();
// compare the expiry time of the item with the current time
if (now.getTime() > item.expiry) {
// If the item is expired, delete the item from storage
// and return null
localStorage.removeItem(key);
return null;
}
return item.value;
}
const storefrontAccessToken = '12345678910';
const shopifyStorefrontGraphqlUrl =
'https://club.everydaydose.com/api/2021-10/graphql.json';
// default to redirector, incase shopify API fails
let checkoutUrl = 'https://club.everydaydose.com/pages/redirector';
const cartCreateMutation = `
mutation {
cartCreate(
input: {
lines: [
{
quantity: 1
merchandiseId: "gid://shopify/ProductVariant/123456"
sellingPlanId: "gid://shopify/SellingPlan/123456"
}
]
}
) {
cart {
id
createdAt
updatedAt
}
}
}
`;
const checkoutUrlQuery = `
query checkoutURL($id: ID!) {
cart(id: $id) {
checkoutUrl
}
}
`;
function changeRedirectorLinks(newCheckoutUrl) {
console.log('redirecting checkout links to', newCheckoutUrl);
var redirectorLinks = document.querySelectorAll(
"[href='https://club.everydaydose.com/pages/redirector']",
);
for (var i = 0; i < redirectorLinks.length; i++) {
redirectorLinks[i].setAttribute('href', newCheckoutUrl);
}
}
async function getCheckoutLink() {
const cart = await fetch(shopifyStorefrontGraphqlUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Accept: 'application/json',
'X-Shopify-Storefront-Access-Token': storefrontAccessToken,
},
body: JSON.stringify({ query: cartCreateMutation }),
});
const cartJson = await cart.json();
const cartId = cartJson.data.cartCreate.cart.id;
if (cartId) {
const checkoutResult = await fetch(shopifyStorefrontGraphqlUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Accept: 'application/json',
'X-Shopify-Storefront-Access-Token': storefrontAccessToken,
},
body: JSON.stringify({
query: checkoutUrlQuery,
variables: { id: cartId },
}),
});
const checkoutJson = await checkoutResult.json();
if (checkoutJson.data.cart.checkoutUrl) {
// 24 hour expiry
setWithExpiry(
'skioCheckoutLink',
checkoutJson.data.cart.checkoutUrl,
86400000,
);
checkoutUrl = checkoutJson.data.cart.checkoutUrl;
}
changeRedirectorLinks(checkoutUrl);
}
}
document.addEventListener('DOMContentLoaded', function (event) {
const checkoutUrlFromStorage = getWithExpiry('skioCheckoutLink');
if (checkoutUrlFromStorage) {
console.log('checkoutUrl', checkoutUrlFromStorage);
changeRedirectorLinks(checkoutUrlFromStorage);
} else {
console.log('fetching checkout url');
getCheckoutLink();
}
});