@amos.com/amos-js 0.1.0

package/dist/index.mjs

@@ -0,0 +1,422 @@
+var y = Object.defineProperty;
+var o = (e, n) => y(e, "name", { value: n, configurable: !0 });
+function u(e) {
+  const [n = "", t = "", i = ""] = e?.split(".") ?? [], r = typeof atob == "function" ? atob : (a) => Buffer.from(a, "base64").toString("utf8");
+  return {
+    header: JSON.parse(r(n)),
+    payload: JSON.parse(r(t)),
+    signature: i
+  };
+}
+o(u, "decodeJwt");
+function m(e) {
+  const { env: n = "sandbox" } = u(e).payload;
+  switch (n) {
+    case "production":
+      return "https://embed.amos.com";
+    case "sandbox":
+      return "https://embed-sandbox.amos.com";
+    default:
+      return "https://embed-sandbox.amos.com";
+  }
+}
+o(m, "getEmbedOrigin");
+function D(e) {
+  return e;
+}
+o(D, "createMessage");
+function h(e) {
+  e?.contentWindow?.postMessage(
+    { type: "PARENT_ACKNOWLEDGED_IFRAME_READY" },
+    "*"
+  );
+}
+o(h, "sendParentReadyMessage");
+function c({
+  iframe: e,
+  appearance: n = {}
+}) {
+  e?.contentWindow?.postMessage(
+    { type: "UPDATE_APPEARANCE", appearance: n },
+    "*"
+  );
+}
+o(c, "updateAppearance");
+function f({
+  iframe: e,
+  amount: n
+}) {
+  e?.contentWindow?.postMessage(
+    { type: "UPDATE_AMOUNT", amount: n },
+    "*"
+  );
+}
+o(f, "updateAmount");
+function C({
+  iframe: e,
+  merchantName: n
+}) {
+  e?.contentWindow?.postMessage(
+    { type: "UPDATE_MERCHANT_NAME", merchantName: n },
+    "*"
+  );
+}
+o(C, "updateMerchantName");
+function k({ iframe: e }) {
+  const n = crypto.randomUUID();
+  return new Promise((t) => {
+    e?.contentWindow?.postMessage(
+      { type: "VALIDATE_FORM", requestId: n },
+      "*"
+    );
+    const i = setTimeout(() => {
+      window.removeEventListener("message", r), t(!1);
+    }, 5e3);
+    function r(a) {
+      a.data.type === "VALIDATE_FORM" && a.data.requestId === n && (window.removeEventListener("message", r), clearTimeout(i), t(a.data.isValid ?? !1));
+    }
+    o(r, "handleMessage"), window.addEventListener("message", r);
+  });
+}
+o(k, "validateForm");
+function N({
+  iframe: e,
+  token: n
+}) {
+  const { payment_intent_id: t } = u(n).payload;
+  e?.contentWindow?.postMessage(
+    {
+      type: "CONFIRM_PAYMENT_INTENT",
+      token: n,
+      id: t ?? void 0
+    },
+    "*"
+  );
+}
+o(N, "confirmPaymentIntent");
+function S({
+  iframe: e,
+  token: n
+}) {
+  const { setup_intent_id: t } = u(n).payload;
+  e?.contentWindow?.postMessage(
+    {
+      type: "CONFIRM_SETUP_INTENT",
+      token: n,
+      id: t ?? void 0
+    },
+    "*"
+  );
+}
+o(S, "confirmSetupIntent");
+function I({
+  iframe: e,
+  errorMessage: n
+}) {
+  e?.contentWindow?.postMessage(
+    {
+      type: "CONFIRMATION_FAILED",
+      errorMessage: n
+    },
+    "*"
+  );
+}
+o(I, "sendConfirmationFailed");
+function _(e) {
+  return `${m(e)}/iframe/google-pay?token=${e}`;
+}
+o(_, "getGooglePayButtonSrc");
+function M() {
+  return "40px";
+}
+o(M, "getGooglePayButtonInitialHeight");
+function b(e, n) {
+  let t = { ...n };
+  function i() {
+    f({ iframe: e, amount: t.amount });
+  }
+  o(i, "pushAmount");
+  function r() {
+    C({ iframe: e, merchantName: t.merchantName });
+  }
+  o(r, "pushMerchantName");
+  function a(s) {
+    switch (s.data.type) {
+      case "IFRAME_READY":
+        h(e), c({ iframe: e, appearance: t.appearance }), i(), r();
+        break;
+      case "UPDATE_HEIGHT":
+        t.onHeightChange?.(s.data.height);
+        break;
+      case "UPDATE_APPEARANCE":
+        c({ iframe: e, appearance: s.data.appearance });
+        break;
+      case "UPDATED_APPEARANCE":
+        t.onAppearanceReady?.();
+        break;
+      case "CREATE_PAYMENT_INTENT":
+        t.onInitiatePaymentIntentRequest({
+          paymentIntentCreateAttributes: s.data.paymentIntentCreateAttributes,
+          customerCreateAttributes: s.data.customerCreateAttributes
+        }).then((d) => {
+          N({ iframe: e, token: d });
+        }).catch((d) => {
+          I({
+            iframe: e,
+            errorMessage: d instanceof Error ? d.message : "Unknown error"
+          });
+        });
+        break;
+      case "PAYMENT_INTENT_CONFIRMATION_SUCCEEDED":
+        t.onPaymentIntentConfirmationSucceeded(s.data.paymentIntent);
+        break;
+      case "CONFIRMATION_FAILED":
+        t.onConfirmationFailed(s.data.errorMessage);
+        break;
+    }
+  }
+  return o(a, "handleMessage"), window.addEventListener("message", a), {
+    update(s) {
+      const d = "appearance" in s, p = "amount" in s, E = "merchantName" in s;
+      t = { ...t, ...s }, d && c({ iframe: e, appearance: t.appearance }), p && i(), E && r();
+    },
+    destroy() {
+      window.removeEventListener("message", a);
+    }
+  };
+}
+o(b, "attachGooglePayButtonListeners");
+function H({
+  paymentData: e
+}) {
+  return {
+    paymentMethod: {
+      billing_address_attributes: {
+        name: e.shippingAddress?.name,
+        address_line1: e.shippingAddress?.address1,
+        address_line2: e.shippingAddress?.address2,
+        city: e.shippingAddress?.locality,
+        state: e.shippingAddress?.administrativeArea,
+        postal_code: e.shippingAddress?.postalCode,
+        country: e.shippingAddress?.countryCode,
+        email: e.email,
+        phone: e.shippingAddress?.phoneNumber
+      },
+      card_profile_attributes: {
+        wallet_provider: "googlepay",
+        wallet_payload: e.paymentMethodData.tokenizationData.token,
+        wallet_last4: e.paymentMethodData.info?.cardDetails,
+        wallet_brand: (() => {
+          switch (e.paymentMethodData.info?.cardNetwork) {
+            case "AMEX":
+              return "american_express";
+            case "VISA":
+              return "visa";
+            case "MASTERCARD":
+              return "master";
+            case "DISCOVER":
+              return "discover";
+            default:
+              return;
+          }
+        })()
+      }
+    }
+  };
+}
+o(H, "formatGooglePayPaymentData");
+function T(e, n = { cardholderName: !1 }) {
+  const t = Object.entries(n).filter(([, i]) => i).map(([i]) => i).join(",");
+  return `${m(e)}/iframe/card?token=${e}&additionalFields=${t}`;
+}
+o(T, "getCreditCardFormSrc");
+function P(e) {
+  return `${m(e)}/iframe/bank?token=${e}`;
+}
+o(P, "getBankAccountFormSrc");
+function w(e = { cardholderName: !1 }) {
+  return e.cardholderName ? "292px" : "212px";
+}
+o(w, "getCreditCardFormInitialHeight");
+function R() {
+  return "400px";
+}
+o(R, "getBankAccountFormInitialHeight");
+function g(e, n) {
+  let t = { ...n };
+  function i(r) {
+    switch (r.data.type) {
+      case "IFRAME_READY":
+        h(e), c({ iframe: e, appearance: t.appearance });
+        break;
+      case "UPDATE_HEIGHT":
+        t.onHeightChange?.(r.data.height);
+        break;
+      case "UPDATE_APPEARANCE":
+        c({ iframe: e, appearance: r.data.appearance });
+        break;
+      case "UPDATED_APPEARANCE":
+        t.onAppearanceReady?.();
+        break;
+      case "PAYMENT_INTENT_CONFIRMATION_SUCCEEDED":
+        t.onPaymentIntentConfirmationSucceeded?.(
+          r.data.paymentIntent
+        );
+        break;
+      case "SETUP_INTENT_CONFIRMATION_SUCCEEDED":
+        t.onSetupIntentConfirmationSucceeded?.(r.data.setupIntent);
+        break;
+      case "CONFIRMATION_FAILED":
+        t.onConfirmationFailed(r.data.errorMessage);
+        break;
+    }
+  }
+  return o(i, "handleMessage"), window.addEventListener("message", i), {
+    update(r) {
+      const a = "appearance" in r;
+      t = { ...t, ...r }, a && c({ iframe: e, appearance: t.appearance });
+    },
+    destroy() {
+      window.removeEventListener("message", i);
+    }
+  };
+}
+o(g, "attachPaymentMethodFormListeners");
+function l(e) {
+  if (typeof e == "string") {
+    const n = document.querySelector(e);
+    if (!(n instanceof HTMLElement))
+      throw new Error(
+        `[amos-js] Container "${e}" did not match any HTMLElement.`
+      );
+    return n;
+  }
+  return e;
+}
+o(l, "resolveContainer");
+const F = {
+  width: "calc(100% + 8px)",
+  transition: "opacity 150ms ease-in, height 200ms ease-in-out",
+  margin: "0 -4px",
+  opacity: "0",
+  border: "0"
+};
+function A({
+  src: e,
+  title: n,
+  name: t,
+  height: i,
+  allow: r
+}) {
+  const a = document.createElement("iframe");
+  return a.src = e, a.title = n, a.name = t, a.setAttribute("role", "presentation"), a.scrolling = "no", r && (a.allow = r), Object.assign(a.style, F, { height: i }), a;
+}
+o(A, "createIframe");
+function L(e, n) {
+  const t = l(e), {
+    renderToken: i,
+    additionalFields: r = { cardholderName: !1 },
+    ...a
+  } = n, s = A({
+    src: T(i, r),
+    title: "Secure credit card payment method form powered by Amos",
+    name: "amos-credit-card-payment-method-form",
+    height: w(r)
+  });
+  t.appendChild(s);
+  const d = g(s, {
+    ...a,
+    onHeightChange: /* @__PURE__ */ o((p) => {
+      s.style.height = p, a.onHeightChange?.(p);
+    }, "onHeightChange"),
+    onAppearanceReady: /* @__PURE__ */ o(() => {
+      s.style.opacity = "1", a.onAppearanceReady?.();
+    }, "onAppearanceReady")
+  });
+  return {
+    iframe: s,
+    update: d.update,
+    destroy() {
+      d.destroy(), s.remove();
+    }
+  };
+}
+o(L, "mountAmosCreditCardPaymentMethodForm");
+function U(e, n) {
+  const t = l(e), { renderToken: i, ...r } = n, a = A({
+    src: P(i),
+    title: "Secure bank account payment method form powered by Amos",
+    name: "amos-bank-account-payment-method-form",
+    height: R()
+  });
+  t.appendChild(a);
+  const s = g(a, {
+    ...r,
+    onHeightChange: /* @__PURE__ */ o((d) => {
+      a.style.height = d, r.onHeightChange?.(d);
+    }, "onHeightChange"),
+    onAppearanceReady: /* @__PURE__ */ o(() => {
+      a.style.opacity = "1", r.onAppearanceReady?.();
+    }, "onAppearanceReady")
+  });
+  return {
+    iframe: a,
+    update: s.update,
+    destroy() {
+      s.destroy(), a.remove();
+    }
+  };
+}
+o(U, "mountAmosBankAccountPaymentMethodForm");
+function x(e, n) {
+  const t = l(e), { renderToken: i, ...r } = n, a = A({
+    src: _(i),
+    title: "Secure Google Pay button powered by Amos",
+    name: "amos-google-pay-button",
+    height: M(),
+    allow: "payment"
+  });
+  t.appendChild(a);
+  const s = b(a, {
+    ...r,
+    onHeightChange: /* @__PURE__ */ o((d) => {
+      a.style.height = d, r.onHeightChange?.(d);
+    }, "onHeightChange"),
+    onAppearanceReady: /* @__PURE__ */ o(() => {
+      a.style.opacity = "1", r.onAppearanceReady?.();
+    }, "onAppearanceReady")
+  });
+  return {
+    iframe: a,
+    update: s.update,
+    destroy() {
+      s.destroy(), a.remove();
+    }
+  };
+}
+o(x, "mountAmosGooglePayButton");
+export {
+  b as attachGooglePayButtonListeners,
+  g as attachPaymentMethodFormListeners,
+  N as confirmPaymentIntent,
+  S as confirmSetupIntent,
+  D as createMessage,
+  u as decodeJwt,
+  H as formatGooglePayPaymentData,
+  R as getBankAccountFormInitialHeight,
+  P as getBankAccountFormSrc,
+  w as getCreditCardFormInitialHeight,
+  T as getCreditCardFormSrc,
+  m as getEmbedOrigin,
+  M as getGooglePayButtonInitialHeight,
+  _ as getGooglePayButtonSrc,
+  U as mountAmosBankAccountPaymentMethodForm,
+  L as mountAmosCreditCardPaymentMethodForm,
+  x as mountAmosGooglePayButton,
+  I as sendConfirmationFailed,
+  h as sendParentReadyMessage,
+  f as updateAmount,
+  c as updateAppearance,
+  C as updateMerchantName,
+  k as validateForm
+};

package/dist/src/google-pay.d.ts

@@ -0,0 +1,105 @@
+import { components } from '@amos.com/node';
+import { Appearance } from './types';
+/**
+ * Build the iframe `src` URL for the embedded Google Pay button.
+ */
+export declare function getGooglePayButtonSrc(renderToken: string): string;
+/**
+ * Default iframe pixel height for the Google Pay button.
+ */
+export declare function getGooglePayButtonInitialHeight(): string;
+/**
+ * Options accepted by {@link attachGooglePayButtonListeners}.
+ */
+export type GooglePayButtonListenerOptions = {
+    /** The amount of the payment, in the same format passed in props. */
+    amount: string;
+    /** A user-visible merchant name. */
+    merchantName: string;
+    /**
+     * Custom appearance to apply when the iframe first becomes ready and
+     * whenever the appearance changes.
+     */
+    appearance?: Appearance;
+    /**
+     * Called whenever the iframe asks the host page to resize it. Update
+     * the iframe's `height` style here.
+     */
+    onHeightChange?: (height: string) => void;
+    /**
+     * Called once the iframe has applied the requested appearance and is
+     * ready to be revealed.
+     */
+    onAppearanceReady?: () => void;
+    /**
+     * Called when the user initiates a payment intent request via the
+     * Google Pay button. Your implementation should create a payment
+     * intent on your server and resolve with the resulting embed token.
+     */
+    onInitiatePaymentIntentRequest: ({ paymentIntentCreateAttributes, customerCreateAttributes, }: {
+        paymentIntentCreateAttributes: components["schemas"]["CreatePaymentIntentInput"];
+        customerCreateAttributes: components["schemas"]["CreateCustomerInput"];
+    }) => Promise<components["schemas"]["EmbedToken"]["token"]>;
+    /**
+     * Called when payment intent confirmation succeeds.
+     */
+    onPaymentIntentConfirmationSucceeded: (paymentIntent: components["schemas"]["PaymentIntent"]) => void;
+    /**
+     * Called when payment intent confirmation fails.
+     */
+    onConfirmationFailed: (errorMessage: string) => void;
+};
+/**
+ * Controller returned by {@link attachGooglePayButtonListeners} and
+ * {@link mountAmosGooglePayButton}.
+ */
+export type GooglePayButtonController = {
+    /**
+     * Update one or more listener options without re-attaching the
+     * message listener. Pass `amount` or `merchantName` to push the new
+     * value into the iframe; pass `appearance` to update theme variables.
+     */
+    update: (patch: Partial<GooglePayButtonListenerOptions>) => void;
+    /**
+     * Detach the iframe message listener.
+     */
+    destroy: () => void;
+};
+/**
+ * Wire up the host-page side of the Google Pay iframe message protocol
+ * on an existing `<iframe>` element. Returns a controller for updating
+ * options and tearing down the listener.
+ *
+ * The iframe is expected to have already been added to the DOM with the
+ * correct `src` (see {@link getGooglePayButtonSrc}).
+ */
+export declare function attachGooglePayButtonListeners(iframe: HTMLIFrameElement, options: GooglePayButtonListenerOptions): GooglePayButtonController;
+/**
+ * Transform raw Google Pay payment data into an Amos-compatible
+ * `paymentMethod` payload. Use this when integrating with the raw
+ * Google Pay API directly instead of through
+ * {@link mountAmosGooglePayButton} (or the React equivalent).
+ */
+export declare function formatGooglePayPaymentData({ paymentData, }: {
+    paymentData: google.payments.api.PaymentData;
+}): {
+    paymentMethod: {
+        billing_address_attributes: {
+            name: string | undefined;
+            address_line1: string | undefined;
+            address_line2: string | undefined;
+            city: string | undefined;
+            state: string | undefined;
+            postal_code: string | undefined;
+            country: string | undefined;
+            email: string | undefined;
+            phone: string | undefined;
+        };
+        card_profile_attributes: {
+            wallet_provider: string;
+            wallet_payload: string;
+            wallet_last4: string | undefined;
+            wallet_brand: string | undefined;
+        };
+    };
+};

package/dist/src/index.d.ts

@@ -0,0 +1,52 @@
+import { components } from '@amos.com/node';
+export type { GooglePayButtonController, GooglePayButtonListenerOptions, } from './google-pay';
+export { attachGooglePayButtonListeners, formatGooglePayPaymentData, getGooglePayButtonInitialHeight, getGooglePayButtonSrc, } from './google-pay';
+export { decodeJwt, getEmbedOrigin } from './jwt';
+export { confirmPaymentIntent, confirmSetupIntent, sendConfirmationFailed, sendParentReadyMessage, updateAmount, updateAppearance, updateMerchantName, validateForm, } from './messaging';
+export type { AmosBankAccountPaymentMethodFormOptions, AmosCreditCardPaymentMethodFormOptions, AmosGooglePayButtonMountController, AmosGooglePayButtonOptions, AmosPaymentMethodFormMountController, } from './mount';
+export { mountAmosBankAccountPaymentMethodForm, mountAmosCreditCardPaymentMethodForm, mountAmosGooglePayButton, } from './mount';
+export type { CreditCardAdditionalFields, PaymentMethodFormController, PaymentMethodFormListenerOptions, } from './payment-method-form';
+export { attachPaymentMethodFormListeners, getBankAccountFormInitialHeight, getBankAccountFormSrc, getCreditCardFormInitialHeight, getCreditCardFormSrc, } from './payment-method-form';
+export type { Appearance, Message, ThemeVariable, } from './types';
+export { createMessage } from './types';
+/**
+ * Convenience alias for `components["schemas"]["CreateCustomerInput"]`.
+ */
+export type CreateCustomerInput = components["schemas"]["CreateCustomerInput"];
+/**
+ * Convenience alias for
+ * `components["schemas"]["CreatePaymentIntentInput"]`.
+ */
+export type CreatePaymentIntentInput = components["schemas"]["CreatePaymentIntentInput"];
+/**
+ * Convenience alias for
+ * `components["schemas"]["CreateSetupIntentInput"]`.
+ */
+export type CreateSetupIntentInput = components["schemas"]["CreateSetupIntentInput"];
+/**
+ * Convenience alias for `components["schemas"]["PaymentIntent"]`.
+ */
+export type PaymentIntent = components["schemas"]["PaymentIntent"];
+/**
+ * Convenience alias for `components["schemas"]["SetupIntent"]`.
+ */
+export type SetupIntent = components["schemas"]["SetupIntent"];
+/**
+ * API envelope `{ token?, ttl? }` for a minted embed JWT.
+ *
+ * `POST /payment_intents` and `POST /setup_intents` resolve to this
+ * shape. {@link confirmPaymentIntent}, {@link confirmSetupIntent}, and
+ * the Google Pay `onInitiatePaymentIntentRequest` return type use
+ * `Pick<EmbedToken, "token">` (the JWT string returned by your server).
+ */
+export type EmbedToken = components["schemas"]["EmbedToken"];
+/**
+ * Decoded JWT payload for an embed token (`account_id`,
+ * `payment_intent_id`, `setup_intent_id`, etc.).
+ */
+export type EmbedTokenJwt = components["schemas"]["EmbedTokenJwt"];
+/**
+ * Decoded JWT payload for the dashboard render token (`env`, `origins`,
+ * `allowed_payment_method_types`, `render_template_id`, etc.).
+ */
+export type RenderTokenJwt = components["schemas"]["RenderTokenJwt"];

package/dist/src/jwt.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Decode a JWT into its `{ header, payload, signature }` parts without
+ * verifying the signature.
+ *
+ * Works in both browser (`atob`) and Node (`Buffer`) environments.
+ */
+export declare function decodeJwt(token: string | undefined): {
+    header: Record<string, unknown>;
+    payload: Record<string, unknown>;
+    signature: string;
+};
+/**
+ * Resolve the Amos embed origin (production vs. sandbox) from a render
+ * token's decoded payload.
+ */
+export declare function getEmbedOrigin(renderToken: string): string;

package/dist/src/messaging.d.ts

@@ -0,0 +1,73 @@
+import { components } from '@amos.com/node';
+import { Appearance } from './types';
+type Iframe = HTMLIFrameElement | null | undefined;
+/**
+ * Notify the embedded iframe that the host page is ready to receive
+ * messages. The SDK calls this internally after receiving an
+ * `IFRAME_READY` event from the iframe.
+ */
+export declare function sendParentReadyMessage(iframe: Iframe): void;
+/**
+ * Push appearance overrides into the embedded iframe.
+ *
+ * Only the provided `themeVariables` are sent; omitted variables keep
+ * their defaults.
+ */
+export declare function updateAppearance({ iframe, appearance, }: {
+    iframe: Iframe;
+    appearance?: Appearance;
+}): void;
+/**
+ * Push the express-checkout amount into the embedded Google Pay iframe.
+ */
+export declare function updateAmount({ iframe, amount, }: {
+    iframe: Iframe;
+    amount: string;
+}): void;
+/**
+ * Push the user-visible merchant name into the embedded Google Pay
+ * iframe.
+ */
+export declare function updateMerchantName({ iframe, merchantName, }: {
+    iframe: Iframe;
+    merchantName: string;
+}): void;
+/**
+ * Ask the embedded credit-card or bank-account iframe form to validate
+ * its inputs.
+ *
+ * Resolves to `true` if the form is valid, `false` if it is not, or
+ * `false` if the iframe does not respond within 5 seconds.
+ */
+export declare function validateForm({ iframe }: {
+    iframe: Iframe;
+}): Promise<boolean>;
+/**
+ * Confirm a payment intent in the embedded iframe flow.
+ *
+ * Pass the embed JWT (`token`) returned by your server's
+ * `POST /payment_intents` call. The matching `payment_intent_id` is
+ * extracted from the JWT payload and forwarded to the iframe.
+ */
+export declare function confirmPaymentIntent({ iframe, token, }: {
+    iframe: Iframe;
+} & Pick<components["schemas"]["EmbedToken"], "token">): void;
+/**
+ * Confirm a setup intent in the embedded iframe flow.
+ *
+ * Pass the embed JWT (`token`) returned by your server's
+ * `POST /setup_intents` call. The matching `setup_intent_id` is
+ * extracted from the JWT payload and forwarded to the iframe.
+ */
+export declare function confirmSetupIntent({ iframe, token, }: {
+    iframe: Iframe;
+} & Pick<components["schemas"]["EmbedToken"], "token">): void;
+/**
+ * Notify the iframe that confirmation failed (used by express-checkout
+ * flows after `onInitiatePaymentIntentRequest` rejects).
+ */
+export declare function sendConfirmationFailed({ iframe, errorMessage, }: {
+    iframe: Iframe;
+    errorMessage: string;
+}): void;
+export {};