How to add Items to cart in Upscribe Checkout

checkout.js

  // https://github.com/ai/nanoid/blob/030bf5dc47759a6199619b332937ba3e7a91db03/index.browser.js#L79
  function nanoid(size = 21) {
    let id = "";
    const arr = new Uint8Array(size);
    const bytes = crypto.getRandomValues(arr);

    // A compact alternative for `for (var i = 0; i < step; i++)`.
    while (size--) {
      // It is incorrect to use bytes exceeding the alphabet size.
      // The following mask reduces the random byte in the 0-255 value
      // range to the 0-63 value range. Therefore, adding hacks, such
      // as empty string fallback or magic numbers, is unneccessary because
      // the bitmask trims bytes down to the alphabet size.
      const byte = bytes[size] & 63;
      if (byte < 36) {
        // `0-9a-z`
        id += byte.toString(36);
      } else if (byte < 62) {
        // `A-Z`
        id += (byte - 26).toString(36).toUpperCase();
      } else if (byte < 63) {
        id += "_";
      } else {
        id += "-";
      }
    }
    return id;
  }

  var ultimateDaily = {
    oneTime: 20207942959202,
    subscription: 12309269643356,
    subscriptionDouble: 12309270134876,
  };
  var d3K2VariantId = 31193400410210;
  var fiveCount = 18518447390818;

  async function checkout(variants) {
    const upscribeCartItems = variants.map((item, index) => {
      return {
        variant_id: item.variantId,
        quantity: item.quantity,
        ...(item.isSub && {
          properties: {
            "Charge Limit": "0",
            "Discount Amount": "0%",
            "Enable Subscription": "1",
            "Interval Frequency": "15,30,45,60",
            "Interval Unit": "day",
            Subscription: "30 days",
            "Subscription Product Title": "Athletic Greens Ultimate Daily",
          },
        }),
        key: `${item.variantId}.${index}.${item.quantity}`,
      };
    });

    const discountCode = "ROGAN";
    const cartUniqueToken = nanoid(); // use a random token generator, this function is defined above;
    const currency = "USD";
    const storeDomain = "athleticgreensusa.myshopify.com";
    const checkoutDomain = "checkout.athleticgreens.com";

    const cartData = {
      url: storeDomain,
      token: cartUniqueToken,
      analytics: {
        meta: { currency },
      },
      currency,
      items: [...upscribeCartItems].reverse(),
    };
    const res = await fetch("https://athleticgreens.com/apis/cart", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ cartData }),
    }).then((res) => {
      if (!res.ok) {
        throw new Error(`Response Code: ${res.status}`);
      }

      return res.json();
    });
    let url = `https://${checkoutDomain}/checkout?store=${storeDomain}&token=${cartUniqueToken}`;

    // this is a list of all Available Params in the URL
    const availableParams = {
        utm_campaign: 'podcast',
        fbuy: 'sdfdsf',
        gclid : 'sdfdffffd'
    };
      // you can put the parameters that might be worth storing in upscribe
    [
      "utm_campaign",
      "utm_medium",
      "utm_source",
      "utm_term",
      "utm_content",
    ].forEach((paramName) => {
      const param = availableParams[paramName];

      if (param) {
        const paramEncoded = encodeURIComponent(param);
        url += `&uptrack_${paramName}=${paramEncoded}&${paramName}=${paramEncoded}`;
      }
    });
    console.log("URL ", url);
    window.location = url;
  }

  // oneTime
  // checkout([
  //   {
  //     variantId: ultimateDaily.oneTime,
  //     quantity: 1,
  //     isSub: true,
  //   },
  // ]);

  // subscription
  checkout([
    {
      variantId: ultimateDaily.subscription,
      quantity: 1,
      isSub: true,
    },
    {
      variantId: d3K2VariantId,
      quantity: 1,
      isSub: false,
    },
    {
      variantId: fiveCount,
      quantity: 1,
      isSub: false,
    },
  ]);

  // // doubleHit
  // checkout([
  //   {
  //     variantId: ultimateDaily.subscriptionDouble,
  //     quantity: 2,
  //     isSub: true,
  //   },
  //   {
  //     variantId: d3K2VariantId,
  //     quantity: 1,
  //     isSub: false,
  //   },
  //   {
  //     variantId: fiveCount,
  //     quantity: 1,
  //     isSub: false,
  //   },
  // ]);