@merchi/cart 1.4.4 → 1.4.6

package/lib/utilities/job_source.d.ts

@@ -0,0 +1,23 @@
+export declare const JOB_SOURCE_STORAGE_KEY = "merchi_job_source";
+export interface JobSourceFields {
+    utmSource?: string;
+    utmMedium?: string;
+    utmCampaign?: string;
+    utmContent?: string;
+    utmTerm?: string;
+    sourceClickId?: string;
+    sourceLanding?: string;
+    sourceReferrer?: string;
+}
+export declare function sourceFromLocation(): JobSourceFields;
+export declare function hasPaidClick(source: JobSourceFields | null | undefined): boolean;
+export declare function hasSourceData(source: JobSourceFields | null | undefined): boolean;
+export declare function captureAndReadJobSource(): JobSourceFields;
+export declare function jobSourceFieldsForApi(source?: JobSourceFields | null): JobSourceFields;
+export declare function cartNeedsSourceUpdate(cart: {
+    utmSource?: string;
+    sourceClickId?: string;
+    sourceChannel?: string;
+} | null | undefined, source: JobSourceFields): boolean;
+export declare const JOB_SOURCE_URL_KEYS: ("gclid" | "gbraid" | "wbraid" | "fbclid" | "msclkid" | "utm_source" | "utm_medium" | "utm_campaign" | "utm_content" | "utm_term")[];
+export declare function appendJobSourceToFormData(data: FormData, source?: JobSourceFields | null): FormData;

package/lib/utilities/job_source.js

@@ -0,0 +1,152 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.JOB_SOURCE_URL_KEYS = exports.JOB_SOURCE_STORAGE_KEY = void 0;
+exports.appendJobSourceToFormData = appendJobSourceToFormData;
+exports.captureAndReadJobSource = captureAndReadJobSource;
+exports.cartNeedsSourceUpdate = cartNeedsSourceUpdate;
+exports.hasPaidClick = hasPaidClick;
+exports.hasSourceData = hasSourceData;
+exports.jobSourceFieldsForApi = jobSourceFieldsForApi;
+exports.sourceFromLocation = sourceFromLocation;
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var JOB_SOURCE_STORAGE_KEY = exports.JOB_SOURCE_STORAGE_KEY = 'merchi_job_source';
+var CLICK_ID_PARAMS = ['gclid', 'gbraid', 'wbraid', 'fbclid', 'msclkid'];
+var UTM_PARAMS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_content', 'utm_term'];
+function trimTo(value, limit) {
+  if (!value) return undefined;
+  var text = value.trim().slice(0, limit);
+  return text || undefined;
+}
+function readSearchParams() {
+  if (typeof window === 'undefined') return new URLSearchParams();
+  try {
+    return new URLSearchParams(window.location.search);
+  } catch (_unused) {
+    return new URLSearchParams();
+  }
+}
+function readStoredSource() {
+  if (typeof window === 'undefined') return null;
+  try {
+    var raw = window.localStorage.getItem(JOB_SOURCE_STORAGE_KEY);
+    if (!raw) return null;
+    var parsed = JSON.parse(raw);
+    if (!parsed || _typeof(parsed) !== 'object') return null;
+    return parsed;
+  } catch (_unused2) {
+    return null;
+  }
+}
+function writeStoredSource(source) {
+  if (typeof window === 'undefined') return;
+  try {
+    window.localStorage.setItem(JOB_SOURCE_STORAGE_KEY, JSON.stringify(source));
+  } catch (_unused3) {
+    // Ignore quota / private-mode failures.
+  }
+}
+function currentLanding() {
+  if (typeof window === 'undefined') return undefined;
+  try {
+    var path = "".concat(window.location.pathname || '/').concat(window.location.search || '');
+    return trimTo(path, 512);
+  } catch (_unused4) {
+    return undefined;
+  }
+}
+function currentReferrer() {
+  if (typeof document === 'undefined') return undefined;
+  try {
+    return trimTo(document.referrer, 512);
+  } catch (_unused5) {
+    return undefined;
+  }
+}
+function sourceFromLocation() {
+  var params = readSearchParams();
+  var source = {
+    utmSource: trimTo(params.get('utm_source'), 256),
+    utmMedium: trimTo(params.get('utm_medium'), 256),
+    utmCampaign: trimTo(params.get('utm_campaign'), 256),
+    utmContent: trimTo(params.get('utm_content'), 256),
+    utmTerm: trimTo(params.get('utm_term'), 256),
+    sourceLanding: currentLanding(),
+    sourceReferrer: currentReferrer()
+  };
+  var _iterator = _createForOfIteratorHelper(CLICK_ID_PARAMS),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var key = _step.value;
+      var value = trimTo(params.get(key), 256);
+      if (value) {
+        source.sourceClickId = value;
+        break;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return source;
+}
+function hasPaidClick(source) {
+  return Boolean(source === null || source === void 0 ? void 0 : source.sourceClickId);
+}
+function hasSourceData(source) {
+  if (!source) return false;
+  return Boolean(source.utmSource || source.utmMedium || source.utmCampaign || source.utmContent || source.utmTerm || source.sourceClickId || source.sourceLanding || source.sourceReferrer);
+}
+function captureAndReadJobSource() {
+  var incoming = sourceFromLocation();
+  var stored = readStoredSource();
+  if (hasPaidClick(incoming) || !hasSourceData(stored)) {
+    var next = _objectSpread(_objectSpread({}, stored || {}), Object.fromEntries(Object.entries(incoming).filter(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+        value = _ref2[1];
+      return Boolean(value);
+    })));
+    if (hasSourceData(next)) writeStoredSource(next);
+    return next;
+  }
+  return stored || incoming;
+}
+function jobSourceFieldsForApi(source) {
+  var resolved = source || captureAndReadJobSource();
+  var out = {};
+  Object.keys(resolved).forEach(function (key) {
+    var value = resolved[key];
+    if (value) out[key] = value;
+  });
+  return out;
+}
+function cartNeedsSourceUpdate(cart, source) {
+  if (!hasSourceData(source)) return false;
+  if (!(cart !== null && cart !== void 0 && cart.utmSource) && !(cart !== null && cart !== void 0 && cart.sourceClickId) && !(cart !== null && cart !== void 0 && cart.sourceChannel)) return true;
+  return Boolean(source.sourceClickId && !(cart !== null && cart !== void 0 && cart.sourceClickId));
+}
+var JOB_SOURCE_URL_KEYS = exports.JOB_SOURCE_URL_KEYS = [].concat(UTM_PARAMS, CLICK_ID_PARAMS);
+function appendJobSourceToFormData(data, source) {
+  var fields = jobSourceFieldsForApi(source);
+  Object.keys(fields).forEach(function (key) {
+    var value = fields[key];
+    if (value) data.append(key, value);
+  });
+  return data;
+}

package/lib/utilities/job_source.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/utilities/shipment.d.ts

@@ -1,2 +1,17 @@
+import { SavedCheckoutAddress } from './local_storage';
 export declare const shipmentFormId = "_shipment-address-form-id";
 export declare function cartItemsNeedShipment(cart: any): boolean;
+export declare function shipmentGroupsHaveQuotes(groups?: any[] | null): boolean;
+export type CheckoutShipmentHydrationAction = 'apply-saved-address' | 'refresh-quotes' | null;
+/**
+ * When checkout hydrates a saved address (localStorage) the form shows it,
+ * but quotes are only fetched after the user edits the field. Returning
+ * `apply-saved-address` means the cart still needs that address applied so
+ * quotes can be generated; `refresh-quotes` means the cart already has an
+ * address but no usable shipment options.
+ */
+export declare function checkoutShipmentHydrationAction(options: {
+    cartAddress?: SavedCheckoutAddress | null;
+    savedAddress?: SavedCheckoutAddress | null;
+    shipmentGroups?: any[] | null;
+}): CheckoutShipmentHydrationAction;

package/lib/utilities/shipment.js

@@ -4,7 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.cartItemsNeedShipment = cartItemsNeedShipment;
+exports.checkoutShipmentHydrationAction = checkoutShipmentHydrationAction;
 exports.shipmentFormId = void 0;
+exports.shipmentGroupsHaveQuotes = shipmentGroupsHaveQuotes;
+var _local_storage = require("./local_storage");
 var shipmentFormId = exports.shipmentFormId = '_shipment-address-form-id';
 function cartItemsNeedShipment(cart) {
   var _cart$cartItems = cart.cartItems,
@@ -15,4 +18,25 @@ function cartItemsNeedShipment(cart) {
     }
   }
   return false;
+}
+function shipmentGroupsHaveQuotes(groups) {
+  if (!(groups !== null && groups !== void 0 && groups.length)) return false;
+  return groups.some(function (group) {
+    return Array.isArray(group === null || group === void 0 ? void 0 : group.quotes) && group.quotes.length > 0;
+  });
+}
+/**
+ * When checkout hydrates a saved address (localStorage) the form shows it,
+ * but quotes are only fetched after the user edits the field. Returning
+ * `apply-saved-address` means the cart still needs that address applied so
+ * quotes can be generated; `refresh-quotes` means the cart already has an
+ * address but no usable shipment options.
+ */
+function checkoutShipmentHydrationAction(options) {
+  var hasCartAddress = (0, _local_storage.addressHasContent)(options.cartAddress);
+  var hasSavedAddress = (0, _local_storage.addressHasContent)(options.savedAddress);
+  var hasQuotes = shipmentGroupsHaveQuotes(options.shipmentGroups);
+  if (!hasCartAddress && hasSavedAddress) return 'apply-saved-address';
+  if (hasCartAddress && !hasQuotes) return 'refresh-quotes';
+  return null;
 }

package/lib/utilities/shipment.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/utilities/test_checkout.d.ts

@@ -0,0 +1,6 @@
+export declare const TEST_CHECKOUT_QUERY = "merchi_test_checkout";
+export declare const TEST_CHECKOUT_STORAGE_KEY = "merchi_test_checkout";
+export declare const TEST_CARD_NUMBER = "4242 4242 4242 4242";
+export declare function readTestCheckoutFlag(): boolean;
+export declare function persistTestCheckoutFlag(): boolean;
+export declare function cartCookieName(domainId: number | string, isTest?: boolean): string;

package/lib/utilities/test_checkout.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TEST_CHECKOUT_STORAGE_KEY = exports.TEST_CHECKOUT_QUERY = exports.TEST_CARD_NUMBER = void 0;
+exports.cartCookieName = cartCookieName;
+exports.persistTestCheckoutFlag = persistTestCheckoutFlag;
+exports.readTestCheckoutFlag = readTestCheckoutFlag;
+var TEST_CHECKOUT_QUERY = exports.TEST_CHECKOUT_QUERY = 'merchi_test_checkout';
+var TEST_CHECKOUT_STORAGE_KEY = exports.TEST_CHECKOUT_STORAGE_KEY = 'merchi_test_checkout';
+var TEST_CARD_NUMBER = exports.TEST_CARD_NUMBER = '4242 4242 4242 4242';
+function readTestCheckoutFlag() {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+  try {
+    var params = new URLSearchParams(window.location.search);
+    if (params.get(TEST_CHECKOUT_QUERY) === '1') {
+      window.localStorage.setItem(TEST_CHECKOUT_STORAGE_KEY, '1');
+      return true;
+    }
+    return window.localStorage.getItem(TEST_CHECKOUT_STORAGE_KEY) === '1';
+  } catch (_unused) {
+    return false;
+  }
+}
+function persistTestCheckoutFlag() {
+  return readTestCheckoutFlag();
+}
+function cartCookieName(domainId) {
+  var isTest = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  return isTest ? "cart-".concat(domainId, "-test") : "cart-".concat(domainId);
+}

package/lib/utilities/test_checkout.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@merchi/cart",
-  "version": "1.4.4",
+  "version": "1.4.6",
   "description": "Merchi's cart",
   "source": "src/index.ts",
   "main": "lib/index.js",
@@ -18,7 +18,7 @@
     "copy-assets": "copyfiles -u 1 src/assets/**/* esm && copyfiles -u 1 src/assets/**/* lib",
     "compile-sass": "sass src/styles/globals.scss esm/styles/globals.css && sass src/styles/globals.scss lib/styles/globals.css",
     "start": "react-scripts start",
-    "test": "react-scripts test",
+    "test": "jest",
     "eject": "react-scripts eject"
   },
   "repository": {
@@ -81,9 +81,12 @@
     "copyfiles": "^2.4.1",
     "eslint": "8.47.0",
     "eslint-config-next": "13.4.16",
+    "jest": "28",
+    "jest-environment-jsdom": "28",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "sass": "^1.70.0",
+    "ts-jest": "28",
     "typescript": "^5.1.6"
   },
   "dependencies": {
@@ -95,9 +98,9 @@
     "browser-or-node": "^3.0.0-pre.0",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
-    "@merchi/product-form": "^1.19.12",
-    "@merchi/product-form-sdk": "^1.0.9",
-    "@merchi/sdk": "^1.40.2",
+    "@merchi/product-form": "^1.19.14",
+    "@merchi/product-form-sdk": "^1.0.11",
+    "@merchi/sdk": "^1.42.1",
     "react-country-region-selector": "^3.6.1",
     "react-hook-form": "7.45.4",
     "react-icons": "^4.10.1",

package/src/CartProvider.tsx

@@ -20,6 +20,13 @@ import {
   saveCheckoutAddress,
 } from './utilities/local_storage';
 import { makeUser } from './utilities/user';
+import { persistTestCheckoutFlag, readTestCheckoutFlag } from './utilities/test_checkout';
+import {
+  appendJobSourceToFormData,
+  captureAndReadJobSource,
+  cartNeedsSourceUpdate,
+  jobSourceFieldsForApi,
+} from './utilities/job_source';
 
 export interface PropsCart {
   cart: any;
@@ -620,10 +627,22 @@ const CartProvider = ({
   async function createCartAndCookie(callback?: () => void) {
     setFetchingCart(true);
     try {
-      const cart = makeCart({domain: {id: domainId}}, true);
-      await cart.create({embed: cartEmbed});
+      const isTest = readTestCheckoutFlag();
+      const jobSource = jobSourceFieldsForApi(captureAndReadJobSource());
+      const cart = makeCart({domain: {id: domainId}, isTest}, true);
+      const query: Array<[string, string]> = [
+        ['embed', JSON.stringify(cartEmbed)],
+        ['skip_rights', 'y'],
+      ];
+      if (isTest) query.push(['is_test', 'true']);
+      const created = await merchi.authenticatedFetch('/carts/', {
+        method: 'POST',
+        body: appendJobSourceToFormData(cart.toFormData() as FormData, jobSource),
+        query,
+      });
+      cart.fromJson(created.cart);
       let cartJson = await cart.toJson();
-      if (domainId) setCartCookie(Number(domainId), cartJson, undefined);
+      if (domainId) setCartCookie(Number(domainId), cartJson, undefined, isTest);
       cartJson = await attachSavedClientIfNeeded(cartJson);
       setCart({...cartJson});
       if (callback) callback();
@@ -643,7 +662,25 @@ const CartProvider = ({
     try {
       const cart = await merchi.Cart.get(id, {embed: cartEmbed});
       let cartJson = await cart.toJson();
-      if (stripeIsValidAndActive(cartJson)) {
+      const isTest = readTestCheckoutFlag();
+      if (Boolean(cartJson.isTest) !== isTest) {
+        await createCartAndCookie();
+        return;
+      }
+      const jobSource = jobSourceFieldsForApi(captureAndReadJobSource());
+      if (cartNeedsSourceUpdate(cartJson, jobSource)) {
+        const saved = await merchi.authenticatedFetch(`/carts/${cart.id}/`, {
+          method: 'PATCH',
+          body: appendJobSourceToFormData(cart.toFormData() as FormData, jobSource),
+          query: [
+            ['embed', JSON.stringify(cartEmbed)],
+            ['skip_rights', 'y'],
+          ],
+        });
+        cart.fromJson(saved.cart);
+        cartJson = cart.toJson();
+      }
+      if (stripeIsValidAndActive(cartJson) || isTest) {
         cartJson = await attachSavedClientIfNeeded(cartJson);
         setCart({...cartJson});
       } else {
@@ -833,6 +870,7 @@ const CartProvider = ({
   }
 
   useEffect(() => {
+    persistTestCheckoutFlag();
     if (domainId) actionGetMerchiCart();
     if (domainId && includeTheme) actionFetchTheme(); 
   }, [domainId]);

package/src/forms/FormShipmentAddressAndNotes.tsx

@@ -2,10 +2,13 @@ import { useForm } from "react-hook-form";
 import InputsAddress from "./InputsAddress";
 import { CheckoutContainer, InnerContainer } from "../components/containers";
 import { Title } from "../components";
-import { shipmentFormId } from "../utilities/shipment";
+import {
+  checkoutShipmentHydrationAction,
+  shipmentFormId,
+} from "../utilities/shipment";
 import { faMapMarkerAlt } from "@fortawesome/free-solid-svg-icons";
 import { useCartContext } from "../CartProvider";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { getCartCookieToken } from "../utilities/cookie";
 import { makeAddress, sanitizeAddressFields } from "../utilities/address";
 import { makeCart } from "../utilities/cart";
@@ -114,6 +117,8 @@ export function ActiveFormShipmentAddressAndNotes() {
     setCart,
     setLoadingTotals,
     setActiveTabAndEditDisabled,
+    updateCartShipmentAddress,
+    getCartShipmentOptions,
   } = useCartContext();
   const saved = getSavedCheckoutAddress(domainId);
   const cartAddress = cart?.receiverAddress;
@@ -122,6 +127,33 @@ export function ActiveFormShipmentAddressAndNotes() {
     : saved.address || {};
   const receiverNotes = cart?.receiverNotes || saved.receiverNotes || "";
   const [addressFieldsOpen, setAddressFieldsOpen] = useState(false);
+  const hydratedShipmentOptionsRef = useRef(false);
+
+  useEffect(() => {
+    if (hydratedShipmentOptionsRef.current || !cart?.id) return;
+    const draft = getSavedCheckoutAddress(domainId);
+    const action = checkoutShipmentHydrationAction({
+      cartAddress: cart?.receiverAddress,
+      savedAddress: draft.address,
+      shipmentGroups: cart?.shipmentGroups,
+    });
+    if (!action) return;
+    hydratedShipmentOptionsRef.current = true;
+    if (action === "apply-saved-address" && draft.address) {
+      updateCartShipmentAddress(draft.address);
+      return;
+    }
+    if (action === "refresh-quotes") {
+      getCartShipmentOptions?.();
+    }
+  }, [
+    cart?.id,
+    cart?.receiverAddress,
+    cart?.shipmentGroups,
+    domainId,
+    getCartShipmentOptions,
+    updateCartShipmentAddress,
+  ]);
 
   async function saveCartShipmentAddressAndGoToNextTab(values: any) {
     const { receiverAddress: address, receiverNotes } = values;

package/src/stripe/LegacyStripeCardForm.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
 import { ButtonPay } from '../buttons';
 import FormStripeCardFields from './StripeCardFields';
 import {
+  fetchTestPublishableKey,
   stripeCardFormSubmit,
   stripeInitPromise,
   stripePaymentButtonSubmit,
@@ -28,6 +29,7 @@ function StripeCardForm() {
   const { domain } = cart;
   const [error, setError] = useState(({} as any));
   const company = domain.company;
+  const isTestCheckout = Boolean(cart.isTest);
   const hasCompanyPubKey = Boolean(company.isStripeValid && companyStripePubKeyOrTestPubKey(company));
   const companyPubKey = hasCompanyPubKey ? companyStripePubKeyOrTestPubKey(company) : '';
   const canUseConnect = !!company.stripeAccountId;
@@ -66,13 +68,17 @@ function StripeCardForm() {
       setError({message: e.errorMessage || e.message || 'Unable to process card.'});
     }
   }
-  const [stripePublicKey, setStripePublicKey] = useState(companyPubKey);
+  const [stripePublicKey, setStripePublicKey] = useState(isTestCheckout ? '' : companyPubKey);
   useEffect(() => {
+    if (isTestCheckout) {
+      fetchTestPublishableKey(url).then(setStripePublicKey).catch(() => setStripePublicKey(''));
+      return;
+    }
     if (!stripePublicKey && canUseConnect) stripeInitPromise(url).then(setStripePublicKey)
-  }, [stripePublicKey, canUseConnect]);
+  }, [stripePublicKey, canUseConnect, isTestCheckout, url]);
   return (
     <>
-      {company.isTesting && badgeTestMode}
+      {!isTestCheckout && company.isTesting && badgeTestMode}
       <FormStripeCardFields
         doStripePayment={doStripePayment}
         doStripePaymentRequestForButton={doStripePaymentRequestForButton}

package/src/stripe/StripeCardForm.tsx

@@ -1,18 +1,102 @@
 import * as React from 'react';
+import { useEffect, useState } from 'react';
 import { StripePaymentForm, StripePaymentGate } from '@merchi/invoice';
 import LegacyStripeCardForm from './LegacyStripeCardForm';
+import { completeTestPayment, fetchTestPublishableKey } from './actions';
 import { useCartContext } from '../CartProvider';
 import { tabIdPaymentSuccess } from '../utilities/tabs';
+import { TEST_CARD_NUMBER } from '../utilities/test_checkout';
+
+const testCheckoutHint = (
+  <div style={{marginBottom: '12px'}}>
+    <div style={{color: 'red', fontWeight: 600}}>Test checkout</div>
+    <p style={{margin: '4px 0 0', fontSize: '13px'}}>
+      No real charge. Use card {TEST_CARD_NUMBER}, any future expiry, any CVC,
+      any ZIP.
+    </p>
+  </div>
+);
 
 export default function StripeCardForm() {
-  const { alertError, apiUrl, cart, setActiveTabIndex, setInvoiceJson } = useCartContext();
-  return <StripePaymentGate engine={cart.stripePaymentEngine} apiUrl={apiUrl || 'https://api.merchi.co/v6/'} resource="cart" resourceId={cart.id}
-    resourceToken={cart.token || cart.cartToken} legacy={<LegacyStripeCardForm />}>
-    <StripePaymentForm apiUrl={apiUrl || 'https://api.merchi.co/v6/'} resource="cart"
-    resourceId={cart.id} resourceToken={cart.token || cart.cartToken} onError={alertError}
-    onSuccess={invoice => {
+  const {
+    alertError,
+    apiUrl,
+    cart,
+    classNameBtnPay,
+    setActiveTabIndex,
+    setInvoiceJson,
+  } = useCartContext();
+  const isTestCheckout = Boolean(cart.isTest);
+  const url = apiUrl || 'https://api.merchi.co/v6/';
+  const [testKeyMissing, setTestKeyMissing] = useState(false);
+  const [loadingTestPayment, setLoadingTestPayment] = useState(false);
+
+  useEffect(() => {
+    if (!isTestCheckout) {
+      setTestKeyMissing(false);
+      return;
+    }
+    fetchTestPublishableKey(url)
+      .then(() => setTestKeyMissing(false))
+      .catch(() => setTestKeyMissing(true));
+  }, [isTestCheckout, url]);
+
+  async function doCompleteTestPayment() {
+    setLoadingTestPayment(true);
+    try {
+      const invoice = await completeTestPayment(url, cart);
       setInvoiceJson(invoice);
       setActiveTabIndex(tabIdPaymentSuccess);
-    }} />
-  </StripePaymentGate>;
+    } catch (e: any) {
+      alertError(e.message);
+    } finally {
+      setLoadingTestPayment(false);
+    }
+  }
+
+  if (isTestCheckout && testKeyMissing) {
+    return (
+      <>
+        {testCheckoutHint}
+        <p style={{fontSize: '13px', marginBottom: '12px'}}>
+          Stripe test keys are not configured. Complete this as a test order
+          without a card.
+        </p>
+        <button
+          type='button'
+          className={classNameBtnPay}
+          disabled={loadingTestPayment}
+          onClick={doCompleteTestPayment}
+        >
+          {loadingTestPayment ? 'Completing…' : 'Complete test order'}
+        </button>
+      </>
+    );
+  }
+
+  return (
+    <>
+      {isTestCheckout && testCheckoutHint}
+      <StripePaymentGate
+        engine={isTestCheckout ? 'legacy' : cart.stripePaymentEngine}
+        apiUrl={url}
+        resource="cart"
+        resourceId={cart.id}
+        resourceToken={cart.token || cart.cartToken}
+        legacy={<LegacyStripeCardForm />}
+      >
+        <StripePaymentForm
+          apiUrl={url}
+          resource="cart"
+          resourceId={cart.id}
+          resourceToken={cart.token || cart.cartToken}
+          onError={alertError}
+          onSuccess={invoice => {
+            setInvoiceJson(invoice);
+            setActiveTabIndex(tabIdPaymentSuccess);
+          }}
+        />
+      </StripePaymentGate>
+    </>
+  );
 }

package/src/stripe/actions.test.ts

@@ -0,0 +1,50 @@
+import { completeTestPayment, fetchTestPublishableKey } from './actions';
+
+describe('test checkout stripe actions', () => {
+  const originalFetch = global.fetch;
+
+  afterEach(() => {
+    global.fetch = originalFetch;
+  });
+
+  it('loads the master test publishable key', async () => {
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({ key: 'pk_test_master' }),
+    }) as any;
+
+    await expect(fetchTestPublishableKey('https://api.test/v6/')).resolves.toBe(
+      'pk_test_master'
+    );
+    expect(global.fetch).toHaveBeenCalledWith(
+      'https://api.test/v6/stripe/test_publishable_key/',
+      { method: 'GET', mode: 'cors' }
+    );
+  });
+
+  it('fails over when the test-key request is rejected', async () => {
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: false,
+      json: async () => ({ message: 'missing' }),
+    }) as any;
+
+    await expect(fetchTestPublishableKey('https://api.test/v6/')).rejects.toThrow(
+      'Stripe test keys are not configured'
+    );
+  });
+
+  it('completes a no-Stripe test payment with the cart token', async () => {
+    global.fetch = jest.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({ invoice: { id: 9, isTest: true } }),
+    }) as any;
+
+    await expect(
+      completeTestPayment('https://api.test/v6/', { id: 4, token: 'tok' })
+    ).resolves.toEqual({ id: 9, isTest: true });
+    expect(global.fetch).toHaveBeenCalledWith(
+      'https://api.test/v6/carts/4/complete_test_payment/?cart_token=tok',
+      { method: 'POST', mode: 'cors' }
+    );
+  });
+});