@snap-pay/elements

Embeddable payment UI components for SNAP checkout. Importing this package registers each Element with @snap-pay/js's factory so snap.elements(...).create("wallet") returns an instance.

bun add @snap-pay/js @snap-pay/elements
# or npm/yarn/pnpm

Usage — Vanilla JS

import { Snap } from "@snap-pay/js";
import "@snap-pay/elements"; // side effect: registers every element

const snap = new Snap("pk_test_…");
const elements = snap.elements({ clientSecret: sessionId });

// The Payment umbrella auto-picks Wallet vs Card based on the session.
const payment = elements.create("payment");
payment.mount("#payment-container");

document.getElementById("pay")!.addEventListener("click", async () => {
  const result = await snap.confirmPayment({ elements, clientSecret: sessionId });
  console.log(result.status);
});

Available Elements

| Element | Purpose | |---|---| | payment | Umbrella — auto-picks Wallet + Card based on the session's allowed providers | | wallet | Radio button per mobile-wallet provider (EVC Plus, Zaad, Sahal, eDahab, Jeeb, Premier Wallet) | | card | Cross-origin iframe collecting card fields, issuing a sandbox token (live-mode tokenization deferred) | | express | One-tap prominent wallet buttons | | paymentMethodSelector | Tabbed switcher between Wallet and Card | | billingAddress | Form: name / address / postal / country. Values flow through confirmPayment automatically | | customer | Form: name / email / phone | | otp | 6-digit code input with paste + auto-advance | | qr | Placeholder (real QR handshake not yet shipped — emits failed on mount) |

Every Element implements the same imperative surface:

element.mount(target);
element.on("ready" | "change" | "focus" | "blur" | "failed" | "submit", handler);
element.off(event, handler);
element.unmount();
element.destroy();

Form-collecting elements (BillingAddress, Customer, OTP) also expose element.getValue() for imperative reads.

Appearance

snap.elements({
  clientSecret,
  appearance: {
    theme: "light", // "light" | "dark" | "auto"
    primaryColor: "#0066ff",
    borderRadius: "8px",
    spacingUnit: "8px",
    labelColor: "#475569",
    errorColor: "#dc2626",
    // Per-Element overrides
    rules: {
      card: { border: "2px solid #f00" },
    },
  },
});

Card iframe URL

The Card Element loads a cross-origin iframe hosted by SNAP. Point at a local dev instance during integration:

new Snap("pk_test_…", {
  cardFrameUrl: "http://localhost:3000/elements/card-frame",
});

License

MIT