@cimplify/sdk 0.3.6 → 0.4.0

package/dist/index.mjs

@@ -519,6 +519,15 @@ var AUTHORIZATION_TYPE = {
   BIRTHDAY: "birthday",
   ADDRESS: "address"
 };
+var DEVICE_TYPE = {
+  MOBILE: "mobile",
+  DESKTOP: "desktop",
+  TABLET: "tablet"
+};
+var CONTACT_TYPE = {
+  PHONE: "phone",
+  EMAIL: "email"
+};
 var LINK_QUERY = {
   DATA: "link.data",
   ADDRESSES: "link.addresses",
@@ -1219,6 +1228,297 @@ var LiteService = class {
   }
 };
 
+// src/types/elements.ts
+var ELEMENT_TYPES = {
+  AUTH: "auth",
+  ADDRESS: "address",
+  PAYMENT: "payment"
+};
+var MESSAGE_TYPES = {
+  // Parent → Iframe
+  INIT: "init",
+  SET_TOKEN: "set_token",
+  GET_DATA: "get_data",
+  REFRESH_TOKEN: "refresh_token",
+  LOGOUT: "logout",
+  // Iframe → Parent
+  READY: "ready",
+  HEIGHT_CHANGE: "height_change",
+  AUTHENTICATED: "authenticated",
+  REQUIRES_OTP: "requires_otp",
+  ERROR: "error",
+  ADDRESS_CHANGED: "address_changed",
+  ADDRESS_SELECTED: "address_selected",
+  PAYMENT_METHOD_SELECTED: "payment_method_selected",
+  TOKEN_REFRESHED: "token_refreshed",
+  LOGOUT_COMPLETE: "logout_complete"
+};
+var EVENT_TYPES = {
+  READY: "ready",
+  AUTHENTICATED: "authenticated",
+  REQUIRES_OTP: "requires_otp",
+  ERROR: "error",
+  CHANGE: "change",
+  BLUR: "blur",
+  FOCUS: "focus"
+};
+
+// src/elements.ts
+var DEFAULT_LINK_URL = "https://link.cimplify.io";
+var CimplifyElements = class {
+  constructor(client, businessId, options = {}) {
+    this.elements = /* @__PURE__ */ new Map();
+    this.accessToken = null;
+    this.accountId = null;
+    this.customerId = null;
+    this.addressData = null;
+    this.paymentData = null;
+    this.client = client;
+    this.businessId = businessId;
+    this.linkUrl = options.linkUrl || DEFAULT_LINK_URL;
+    this.options = options;
+    if (typeof window !== "undefined") {
+      window.addEventListener("message", this.handleMessage.bind(this));
+    }
+  }
+  create(type, options = {}) {
+    const existing = this.elements.get(type);
+    if (existing) return existing;
+    const element = new CimplifyElement(type, this.businessId, this.linkUrl, options, this);
+    this.elements.set(type, element);
+    return element;
+  }
+  getElement(type) {
+    return this.elements.get(type);
+  }
+  destroy() {
+    this.elements.forEach((element) => element.destroy());
+    this.elements.clear();
+    if (typeof window !== "undefined") {
+      window.removeEventListener("message", this.handleMessage.bind(this));
+    }
+  }
+  async submitCheckout(data) {
+    const addressElement = this.elements.get(ELEMENT_TYPES.ADDRESS);
+    if (addressElement) await addressElement.getData();
+    const paymentElement = this.elements.get(ELEMENT_TYPES.PAYMENT);
+    if (paymentElement) await paymentElement.getData();
+    const checkoutData = {
+      ...data,
+      customer: this.accountId ? { account_id: this.accountId, customer_id: this.customerId } : void 0,
+      address: this.addressData,
+      payment_method: this.paymentData
+    };
+    const result = await this.client.checkout.process(checkoutData);
+    if (result.ok) {
+      return { success: true, order: result.value };
+    }
+    return {
+      success: false,
+      error: {
+        code: result.error.code || "CHECKOUT_FAILED",
+        message: result.error.message || "Checkout failed"
+      }
+    };
+  }
+  isAuthenticated() {
+    return this.accessToken !== null;
+  }
+  getAccessToken() {
+    return this.accessToken;
+  }
+  handleMessage(event) {
+    if (!event.origin.includes("cimplify.io") && !event.origin.includes("localhost")) {
+      return;
+    }
+    const message = event.data;
+    if (!message?.type) return;
+    switch (message.type) {
+      case MESSAGE_TYPES.AUTHENTICATED:
+        this.accessToken = message.token;
+        this.accountId = message.accountId;
+        this.customerId = message.customerId;
+        this.elements.forEach((element, type) => {
+          if (type !== ELEMENT_TYPES.AUTH) {
+            element.sendMessage({ type: MESSAGE_TYPES.SET_TOKEN, token: message.token });
+          }
+        });
+        break;
+      case MESSAGE_TYPES.TOKEN_REFRESHED:
+        this.accessToken = message.token;
+        break;
+      case MESSAGE_TYPES.ADDRESS_CHANGED:
+      case MESSAGE_TYPES.ADDRESS_SELECTED:
+        this.addressData = message.address;
+        break;
+      case MESSAGE_TYPES.PAYMENT_METHOD_SELECTED:
+        this.paymentData = message.method;
+        break;
+      case MESSAGE_TYPES.LOGOUT_COMPLETE:
+        this.accessToken = null;
+        this.accountId = null;
+        this.customerId = null;
+        this.addressData = null;
+        this.paymentData = null;
+        break;
+    }
+  }
+  _setAddressData(data) {
+    this.addressData = data;
+  }
+  _setPaymentData(data) {
+    this.paymentData = data;
+  }
+};
+var CimplifyElement = class {
+  constructor(type, businessId, linkUrl, options, parent) {
+    this.iframe = null;
+    this.container = null;
+    this.mounted = false;
+    this.eventHandlers = /* @__PURE__ */ new Map();
+    this.resolvers = /* @__PURE__ */ new Map();
+    this.type = type;
+    this.businessId = businessId;
+    this.linkUrl = linkUrl;
+    this.options = options;
+    this.parent = parent;
+    if (typeof window !== "undefined") {
+      window.addEventListener("message", this.handleMessage.bind(this));
+    }
+  }
+  mount(container) {
+    if (this.mounted) {
+      console.warn(`Element ${this.type} is already mounted`);
+      return;
+    }
+    const target = typeof container === "string" ? document.querySelector(container) : container;
+    if (!target) {
+      console.error(`Container not found: ${container}`);
+      return;
+    }
+    this.container = target;
+    this.createIframe();
+    this.mounted = true;
+  }
+  destroy() {
+    if (this.iframe) {
+      this.iframe.remove();
+      this.iframe = null;
+    }
+    this.container = null;
+    this.mounted = false;
+    this.eventHandlers.clear();
+    if (typeof window !== "undefined") {
+      window.removeEventListener("message", this.handleMessage.bind(this));
+    }
+  }
+  on(event, handler) {
+    if (!this.eventHandlers.has(event)) {
+      this.eventHandlers.set(event, /* @__PURE__ */ new Set());
+    }
+    this.eventHandlers.get(event).add(handler);
+  }
+  off(event, handler) {
+    this.eventHandlers.get(event)?.delete(handler);
+  }
+  async getData() {
+    return new Promise((resolve) => {
+      const id = Math.random().toString(36).slice(2);
+      this.resolvers.set(id, resolve);
+      this.sendMessage({ type: MESSAGE_TYPES.GET_DATA });
+      setTimeout(() => {
+        if (this.resolvers.has(id)) {
+          this.resolvers.delete(id);
+          resolve(null);
+        }
+      }, 5e3);
+    });
+  }
+  sendMessage(message) {
+    if (this.iframe?.contentWindow) {
+      this.iframe.contentWindow.postMessage(message, this.linkUrl);
+    }
+  }
+  createIframe() {
+    if (!this.container) return;
+    const iframe = document.createElement("iframe");
+    const url = new URL(`${this.linkUrl}/elements/${this.type}`);
+    url.searchParams.set("businessId", this.businessId);
+    if (this.options.prefillEmail) url.searchParams.set("email", this.options.prefillEmail);
+    if (this.options.mode) url.searchParams.set("mode", this.options.mode);
+    iframe.src = url.toString();
+    iframe.style.border = "none";
+    iframe.style.width = "100%";
+    iframe.style.display = "block";
+    iframe.style.overflow = "hidden";
+    iframe.setAttribute("allowtransparency", "true");
+    iframe.setAttribute("frameborder", "0");
+    iframe.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms allow-popups");
+    this.iframe = iframe;
+    this.container.appendChild(iframe);
+    iframe.onload = () => {
+      this.sendMessage({
+        type: MESSAGE_TYPES.INIT,
+        businessId: this.businessId,
+        prefillEmail: this.options.prefillEmail
+      });
+      const token = this.parent.getAccessToken();
+      if (token && this.type !== ELEMENT_TYPES.AUTH) {
+        this.sendMessage({ type: MESSAGE_TYPES.SET_TOKEN, token });
+      }
+    };
+  }
+  handleMessage(event) {
+    if (!event.origin.includes("cimplify.io") && !event.origin.includes("localhost")) {
+      return;
+    }
+    const message = event.data;
+    if (!message?.type) return;
+    switch (message.type) {
+      case MESSAGE_TYPES.READY:
+        this.emit(EVENT_TYPES.READY, { height: message.height });
+        break;
+      case MESSAGE_TYPES.HEIGHT_CHANGE:
+        if (this.iframe) this.iframe.style.height = `${message.height}px`;
+        break;
+      case MESSAGE_TYPES.AUTHENTICATED:
+        this.emit(EVENT_TYPES.AUTHENTICATED, {
+          accountId: message.accountId,
+          customerId: message.customerId,
+          token: message.token
+        });
+        break;
+      case MESSAGE_TYPES.REQUIRES_OTP:
+        this.emit(EVENT_TYPES.REQUIRES_OTP, { contactMasked: message.contactMasked });
+        break;
+      case MESSAGE_TYPES.ERROR:
+        this.emit(EVENT_TYPES.ERROR, { code: message.code, message: message.message });
+        break;
+      case MESSAGE_TYPES.ADDRESS_CHANGED:
+      case MESSAGE_TYPES.ADDRESS_SELECTED:
+        this.parent._setAddressData(message.address);
+        this.emit(EVENT_TYPES.CHANGE, { address: message.address });
+        this.resolveData(message.address);
+        break;
+      case MESSAGE_TYPES.PAYMENT_METHOD_SELECTED:
+        this.parent._setPaymentData(message.method);
+        this.emit(EVENT_TYPES.CHANGE, { paymentMethod: message.method });
+        this.resolveData(message.method);
+        break;
+    }
+  }
+  emit(event, data) {
+    this.eventHandlers.get(event)?.forEach((handler) => handler(data));
+  }
+  resolveData(data) {
+    this.resolvers.forEach((resolve) => resolve(data));
+    this.resolvers.clear();
+  }
+};
+function createElements(client, businessId, options) {
+  return new CimplifyElements(client, businessId, options);
+}
+
 // src/client.ts
 var SESSION_TOKEN_HEADER = "x-session-token";
 var SESSION_STORAGE_KEY = "cimplify_session_token";
@@ -1630,6 +1930,23 @@ var CimplifyClient = class {
     }
     return this._lite;
   }
+  /**
+   * Create a CimplifyElements instance for embedding checkout components.
+   * Like Stripe's stripe.elements().
+   *
+   * @param businessId - The business ID for checkout context
+   * @param options - Optional configuration for elements
+   *
+   * @example
+   * ```ts
+   * const elements = client.elements('bus_xxx');
+   * const authElement = elements.create('auth');
+   * authElement.mount('#auth-container');
+   * ```
+   */
+  elements(businessId, options) {
+    return createElements(this, businessId, options);
+  }
 };
 function createCimplifyClient(config) {
   return new CimplifyClient(config);
@@ -2186,4 +2503,4 @@ function detectMobileMoneyProvider(phoneNumber) {
   return null;
 }
 
-export { AUTHORIZATION_TYPE, AUTH_MUTATION, AuthService, BusinessService, CHECKOUT_MODE, CHECKOUT_MUTATION, CHECKOUT_STEP, CURRENCY_SYMBOLS, CartOperations, CatalogueQueries, CheckoutService as CheckoutOperations, CheckoutService, CimplifyClient, CimplifyError, DEFAULT_COUNTRY, DEFAULT_CURRENCY, ErrorCode, InventoryService, LINK_MUTATION, LINK_QUERY, LinkService, LiteService, MOBILE_MONEY_PROVIDER, MOBILE_MONEY_PROVIDERS, ORDER_MUTATION, ORDER_TYPE, OrderQueries, PAYMENT_METHOD, PAYMENT_MUTATION, PAYMENT_STATE, PICKUP_TIME_TYPE, QueryBuilder, SchedulingService, categorizePaymentError, combine, combineObject, createCimplifyClient, detectMobileMoneyProvider, err, extractPriceInfo, flatMap, formatMoney, formatNumberCompact, formatPrice, formatPriceAdjustment, formatPriceCompact, formatProductPrice, fromPromise, generateIdempotencyKey, getBasePrice, getCurrencySymbol, getDiscountPercentage, getDisplayPrice, getMarkupPercentage, getOrElse, getProductCurrency, isCimplifyError, isErr, isOk, isOnSale, isRetryableError, mapError, mapResult, normalizePaymentResponse, normalizeStatusResponse, ok, parsePrice, parsePricePath, parsedPriceToPriceInfo, query, toNullable, tryCatch, unwrap };
+export { AUTHORIZATION_TYPE, AUTH_MUTATION, AuthService, BusinessService, CHECKOUT_MODE, CHECKOUT_MUTATION, CHECKOUT_STEP, CONTACT_TYPE, CURRENCY_SYMBOLS, CartOperations, CatalogueQueries, CheckoutService as CheckoutOperations, CheckoutService, CimplifyClient, CimplifyElement, CimplifyElements, CimplifyError, DEFAULT_COUNTRY, DEFAULT_CURRENCY, DEVICE_TYPE, ELEMENT_TYPES, EVENT_TYPES, ErrorCode, InventoryService, LINK_MUTATION, LINK_QUERY, LinkService, LiteService, MESSAGE_TYPES, MOBILE_MONEY_PROVIDER, MOBILE_MONEY_PROVIDERS, ORDER_MUTATION, ORDER_TYPE, OrderQueries, PAYMENT_METHOD, PAYMENT_MUTATION, PAYMENT_STATE, PICKUP_TIME_TYPE, QueryBuilder, SchedulingService, categorizePaymentError, combine, combineObject, createCimplifyClient, createElements, detectMobileMoneyProvider, err, extractPriceInfo, flatMap, formatMoney, formatNumberCompact, formatPrice, formatPriceAdjustment, formatPriceCompact, formatProductPrice, fromPromise, generateIdempotencyKey, getBasePrice, getCurrencySymbol, getDiscountPercentage, getDisplayPrice, getMarkupPercentage, getOrElse, getProductCurrency, isCimplifyError, isErr, isOk, isOnSale, isRetryableError, mapError, mapResult, normalizePaymentResponse, normalizeStatusResponse, ok, parsePrice, parsePricePath, parsedPriceToPriceInfo, query, toNullable, tryCatch, unwrap };

package/dist/react.d.mts

@@ -0,0 +1,59 @@
+import { r as CimplifyElements, C as CimplifyClient, v as ElementsOptions, eh as AuthenticatedData, ef as AddressInfo, eg as PaymentMethodInfo, ej as ElementsCheckoutResult } from './client-Ug3b8v1t.mjs';
+import React, { ReactNode } from 'react';
+
+declare function useElements(): CimplifyElements | null;
+declare function useElementsReady(): boolean;
+interface ElementsProviderProps {
+    client: CimplifyClient;
+    businessId: string;
+    options?: ElementsOptions;
+    children: ReactNode;
+}
+declare function ElementsProvider({ client, businessId, options, children, }: ElementsProviderProps): React.ReactElement;
+interface BaseElementProps {
+    className?: string;
+    style?: React.CSSProperties;
+    onReady?: () => void;
+    onError?: (error: {
+        code: string;
+        message: string;
+    }) => void;
+}
+interface AuthElementProps extends BaseElementProps {
+    prefillEmail?: string;
+    onAuthenticated?: (data: AuthenticatedData) => void;
+    onRequiresOtp?: (data: {
+        contactMasked: string;
+    }) => void;
+}
+declare function AuthElement({ className, style, prefillEmail, onReady, onAuthenticated, onRequiresOtp, onError, }: AuthElementProps): React.ReactElement | null;
+interface AddressElementProps extends BaseElementProps {
+    mode?: "shipping" | "billing";
+    onChange?: (data: {
+        address: AddressInfo;
+        saveToLink: boolean;
+    }) => void;
+}
+declare function AddressElement({ className, style, mode, onReady, onChange, onError, }: AddressElementProps): React.ReactElement | null;
+interface PaymentElementProps extends BaseElementProps {
+    amount?: number;
+    currency?: string;
+    onChange?: (data: {
+        paymentMethod: PaymentMethodInfo;
+        saveToLink: boolean;
+    }) => void;
+}
+declare function PaymentElement({ className, style, amount, currency, onReady, onChange, onError, }: PaymentElementProps): React.ReactElement | null;
+declare function useCheckout(): {
+    submit: (data: {
+        cart_id: string;
+        order_type?: "delivery" | "pickup" | "dine_in";
+        location_id?: string;
+        scheduled_time?: string;
+        tip_amount?: number;
+        notes?: string;
+    }) => Promise<ElementsCheckoutResult>;
+    isLoading: boolean;
+};
+
+export { AddressElement, AuthElement, ElementsProvider, PaymentElement, useCheckout, useElements, useElementsReady };

package/dist/react.d.ts

@@ -0,0 +1,59 @@
+import { r as CimplifyElements, C as CimplifyClient, v as ElementsOptions, eh as AuthenticatedData, ef as AddressInfo, eg as PaymentMethodInfo, ej as ElementsCheckoutResult } from './client-Ug3b8v1t.js';
+import React, { ReactNode } from 'react';
+
+declare function useElements(): CimplifyElements | null;
+declare function useElementsReady(): boolean;
+interface ElementsProviderProps {
+    client: CimplifyClient;
+    businessId: string;
+    options?: ElementsOptions;
+    children: ReactNode;
+}
+declare function ElementsProvider({ client, businessId, options, children, }: ElementsProviderProps): React.ReactElement;
+interface BaseElementProps {
+    className?: string;
+    style?: React.CSSProperties;
+    onReady?: () => void;
+    onError?: (error: {
+        code: string;
+        message: string;
+    }) => void;
+}
+interface AuthElementProps extends BaseElementProps {
+    prefillEmail?: string;
+    onAuthenticated?: (data: AuthenticatedData) => void;
+    onRequiresOtp?: (data: {
+        contactMasked: string;
+    }) => void;
+}
+declare function AuthElement({ className, style, prefillEmail, onReady, onAuthenticated, onRequiresOtp, onError, }: AuthElementProps): React.ReactElement | null;
+interface AddressElementProps extends BaseElementProps {
+    mode?: "shipping" | "billing";
+    onChange?: (data: {
+        address: AddressInfo;
+        saveToLink: boolean;
+    }) => void;
+}
+declare function AddressElement({ className, style, mode, onReady, onChange, onError, }: AddressElementProps): React.ReactElement | null;
+interface PaymentElementProps extends BaseElementProps {
+    amount?: number;
+    currency?: string;
+    onChange?: (data: {
+        paymentMethod: PaymentMethodInfo;
+        saveToLink: boolean;
+    }) => void;
+}
+declare function PaymentElement({ className, style, amount, currency, onReady, onChange, onError, }: PaymentElementProps): React.ReactElement | null;
+declare function useCheckout(): {
+    submit: (data: {
+        cart_id: string;
+        order_type?: "delivery" | "pickup" | "dine_in";
+        location_id?: string;
+        scheduled_time?: string;
+        tip_amount?: number;
+        notes?: string;
+    }) => Promise<ElementsCheckoutResult>;
+    isLoading: boolean;
+};
+
+export { AddressElement, AuthElement, ElementsProvider, PaymentElement, useCheckout, useElements, useElementsReady };

package/dist/react.js

@@ -0,0 +1,144 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/react/index.tsx
+
+// src/types/elements.ts
+var ELEMENT_TYPES = {
+  AUTH: "auth",
+  ADDRESS: "address",
+  PAYMENT: "payment"
+};
+var EVENT_TYPES = {
+  READY: "ready",
+  AUTHENTICATED: "authenticated",
+  REQUIRES_OTP: "requires_otp",
+  ERROR: "error",
+  CHANGE: "change"};
+var ElementsContext = react.createContext({
+  elements: null,
+  isReady: false
+});
+function useElements() {
+  return react.useContext(ElementsContext).elements;
+}
+function useElementsReady() {
+  return react.useContext(ElementsContext).isReady;
+}
+function ElementsProvider({
+  client,
+  businessId,
+  options,
+  children
+}) {
+  const [elements, setElements] = react.useState(null);
+  const [isReady, setIsReady] = react.useState(false);
+  react.useEffect(() => {
+    const instance = client.elements(businessId, options);
+    setElements(instance);
+    setIsReady(true);
+    return () => instance.destroy();
+  }, [client, businessId, options]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ElementsContext.Provider, { value: { elements, isReady }, children });
+}
+function AuthElement({
+  className,
+  style,
+  prefillEmail,
+  onReady,
+  onAuthenticated,
+  onRequiresOtp,
+  onError
+}) {
+  const containerRef = react.useRef(null);
+  const elementRef = react.useRef(null);
+  const elements = useElements();
+  react.useEffect(() => {
+    if (!elements || !containerRef.current) return;
+    const element = elements.create(ELEMENT_TYPES.AUTH, { prefillEmail });
+    elementRef.current = element;
+    element.on(EVENT_TYPES.READY, () => onReady?.());
+    element.on(EVENT_TYPES.AUTHENTICATED, (data) => onAuthenticated?.(data));
+    element.on(EVENT_TYPES.REQUIRES_OTP, (data) => onRequiresOtp?.(data));
+    element.on(EVENT_TYPES.ERROR, (data) => onError?.(data));
+    element.mount(containerRef.current);
+    return () => element.destroy();
+  }, [elements, prefillEmail, onReady, onAuthenticated, onRequiresOtp, onError]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className, style });
+}
+function AddressElement({
+  className,
+  style,
+  mode = "shipping",
+  onReady,
+  onChange,
+  onError
+}) {
+  const containerRef = react.useRef(null);
+  const elementRef = react.useRef(null);
+  const elements = useElements();
+  react.useEffect(() => {
+    if (!elements || !containerRef.current) return;
+    const element = elements.create(ELEMENT_TYPES.ADDRESS, { mode });
+    elementRef.current = element;
+    element.on(EVENT_TYPES.READY, () => onReady?.());
+    element.on(EVENT_TYPES.CHANGE, (data) => onChange?.(data));
+    element.on(EVENT_TYPES.ERROR, (data) => onError?.(data));
+    element.mount(containerRef.current);
+    return () => element.destroy();
+  }, [elements, mode, onReady, onChange, onError]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className, style });
+}
+function PaymentElement({
+  className,
+  style,
+  amount,
+  currency,
+  onReady,
+  onChange,
+  onError
+}) {
+  const containerRef = react.useRef(null);
+  const elementRef = react.useRef(null);
+  const elements = useElements();
+  react.useEffect(() => {
+    if (!elements || !containerRef.current) return;
+    const element = elements.create(ELEMENT_TYPES.PAYMENT, { amount, currency });
+    elementRef.current = element;
+    element.on(EVENT_TYPES.READY, () => onReady?.());
+    element.on(EVENT_TYPES.CHANGE, (data) => onChange?.(data));
+    element.on(EVENT_TYPES.ERROR, (data) => onError?.(data));
+    element.mount(containerRef.current);
+    return () => element.destroy();
+  }, [elements, amount, currency, onReady, onChange, onError]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className, style });
+}
+function useCheckout() {
+  const elements = useElements();
+  const [isLoading, setIsLoading] = react.useState(false);
+  const submit = react.useCallback(
+    async (data) => {
+      if (!elements) {
+        return { success: false, error: { code: "NO_ELEMENTS", message: "Elements not initialized" } };
+      }
+      setIsLoading(true);
+      try {
+        return await elements.submitCheckout(data);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [elements]
+  );
+  return { submit, isLoading };
+}
+
+exports.AddressElement = AddressElement;
+exports.AuthElement = AuthElement;
+exports.ElementsProvider = ElementsProvider;
+exports.PaymentElement = PaymentElement;
+exports.useCheckout = useCheckout;
+exports.useElements = useElements;
+exports.useElementsReady = useElementsReady;