@snap-pay/elements 1.0.0

package/dist/index.d.cts

@@ -0,0 +1,299 @@
+import * as _snap_pay_types from '@snap-pay/types';
+import { SnapElementHandle, ElementType, ElementEventName, ElementEventHandler, ElementEventMap, Appearance, PublicSession, CreateElementOptions, Environment, SnapSelection, BillingAddressValue, CustomerValue, OtpValue } from '@snap-pay/types';
+
+declare abstract class BaseElement implements SnapElementHandle {
+    abstract readonly type: ElementType;
+    private container;
+    private mounted;
+    private listeners;
+    mount(target: string | HTMLElement): void;
+    protected deferReadyOnMount: boolean;
+    unmount(): void;
+    destroy(): void;
+    on<E extends ElementEventName>(event: E, handler: ElementEventHandler<E>): void;
+    off<E extends ElementEventName>(event: E, handler: ElementEventHandler<E>): void;
+    protected emit<E extends ElementEventName>(event: E, payload: ElementEventMap[E]): void;
+    protected abstract render(container: HTMLElement): void;
+    getValue(): unknown;
+}
+
+interface WalletElementArgs {
+    clientSecret: string;
+    appearance: Appearance;
+    publishableKey: string;
+    apiBase: string;
+    environment?: _snap_pay_types.Environment;
+    cardFrameUrl?: string | undefined;
+    registerChild: (getSelection: () => _snap_pay_types.SnapSelection | null) => () => void;
+    registerValue: (type: _snap_pay_types.ElementType, getValue: () => unknown | null) => () => void;
+    initialSession?: PublicSession;
+    options: CreateElementOptions;
+}
+declare class WalletElement extends BaseElement {
+    private readonly args;
+    readonly type: ElementType;
+    private selected;
+    private allowed;
+    private readonly resolvedAppearance;
+    private buttons;
+    private renderTarget;
+    private readonly unregisterChild;
+    constructor(args: WalletElementArgs);
+    destroy(): void;
+    protected render(container: HTMLElement): void;
+    private renderButtons;
+    private renderProviderButton;
+    private select;
+    private buttonStyle;
+}
+declare function createWalletElement(args: WalletElementArgs): WalletElement;
+
+interface CardElementArgs {
+    clientSecret: string;
+    appearance: Appearance;
+    publishableKey: string;
+    apiBase: string;
+    environment: Environment | undefined;
+    cardFrameUrl: string | undefined;
+    registerChild: (getSelection: () => SnapSelection | null) => () => void;
+    registerValue: (type: _snap_pay_types.ElementType, getValue: () => unknown | null) => () => void;
+    options: CreateElementOptions;
+}
+declare class CardElement extends BaseElement {
+    private readonly args;
+    readonly type: ElementType;
+    protected deferReadyOnMount: boolean;
+    private selection;
+    private ready;
+    private failedFired;
+    private iframe;
+    private readonly frameOrigin;
+    private readonly unregisterChild;
+    private messageHandler;
+    private readyTimer;
+    constructor(args: CardElementArgs);
+    destroy(): void;
+    protected render(container: HTMLElement): void;
+    private onMessage;
+    private sendInit;
+    private clearReadyTimer;
+}
+declare function createCardElement(args: CardElementArgs): CardElement;
+
+interface PaymentElementArgs {
+    clientSecret: string;
+    appearance: Appearance;
+    publishableKey: string;
+    apiBase: string;
+    environment: _snap_pay_types.Environment;
+    cardFrameUrl: string | undefined;
+    registerChild: (getSelection: () => SnapSelection | null) => () => void;
+    registerValue: (type: ElementType, getValue: () => unknown | null) => () => void;
+    options: CreateElementOptions;
+}
+declare class PaymentElement extends BaseElement {
+    private readonly args;
+    readonly type: ElementType;
+    protected deferReadyOnMount: boolean;
+    private readonly resolvedAppearance;
+    private children;
+    constructor(args: PaymentElementArgs);
+    destroy(): void;
+    protected render(container: HTMLElement): void;
+    private mountChildren;
+}
+declare function createPaymentElement(args: PaymentElementArgs): PaymentElement;
+
+interface ExpressCheckoutElementArgs {
+    clientSecret: string;
+    appearance: Appearance;
+    publishableKey: string;
+    apiBase: string;
+    environment?: _snap_pay_types.Environment;
+    cardFrameUrl?: string | undefined;
+    registerChild: (getSelection: () => SnapSelection | null) => () => void;
+    registerValue: (type: ElementType, getValue: () => unknown | null) => () => void;
+    initialSession?: PublicSession;
+    options: CreateElementOptions;
+}
+declare class ExpressCheckoutElement extends BaseElement {
+    private readonly args;
+    readonly type: ElementType;
+    private selected;
+    private allowed;
+    private readonly resolvedAppearance;
+    private readonly unregisterChild;
+    constructor(args: ExpressCheckoutElementArgs);
+    destroy(): void;
+    protected render(container: HTMLElement): void;
+    private paint;
+    private renderButton;
+}
+declare function createExpressCheckoutElement(args: ExpressCheckoutElementArgs): ExpressCheckoutElement;
+
+interface PaymentMethodSelectorArgs {
+    clientSecret: string;
+    appearance: Appearance;
+    publishableKey: string;
+    apiBase: string;
+    environment: _snap_pay_types.Environment;
+    cardFrameUrl: string | undefined;
+    registerChild: (getSelection: () => SnapSelection | null) => () => void;
+    registerValue: (type: ElementType, getValue: () => unknown | null) => () => void;
+    options: CreateElementOptions;
+}
+declare class PaymentMethodSelector extends BaseElement {
+    private readonly args;
+    readonly type: ElementType;
+    protected deferReadyOnMount: boolean;
+    private readonly resolvedAppearance;
+    private walletChild;
+    private cardChild;
+    private activeTab;
+    private walletSlot;
+    private cardSlot;
+    private tabs;
+    private hasWallets;
+    private hasCard;
+    private session;
+    constructor(args: PaymentMethodSelectorArgs);
+    destroy(): void;
+    protected render(container: HTMLElement): void;
+    private mountUi;
+    private renderTab;
+    private applyTab;
+}
+declare function createPaymentMethodSelector(args: PaymentMethodSelectorArgs): PaymentMethodSelector;
+
+interface BillingAddressElementArgs {
+    clientSecret: string;
+    appearance: Appearance;
+    publishableKey: string;
+    apiBase: string;
+    environment?: _snap_pay_types.Environment;
+    cardFrameUrl?: string | undefined;
+    registerChild: (getSelection: () => _snap_pay_types.SnapSelection | null) => () => void;
+    registerValue: (type: ElementType, getValue: () => unknown | null) => () => void;
+    options: CreateElementOptions;
+}
+declare class BillingAddressElement extends BaseElement {
+    private readonly args;
+    readonly type: ElementType;
+    private value;
+    private readonly resolvedAppearance;
+    private readonly unregisterValue;
+    constructor(args: BillingAddressElementArgs);
+    destroy(): void;
+    getValue(): BillingAddressValue;
+    protected render(container: HTMLElement): void;
+    private renderField;
+    private isComplete;
+}
+declare function createBillingAddressElement(args: BillingAddressElementArgs): BillingAddressElement;
+
+interface CustomerElementArgs {
+    clientSecret: string;
+    appearance: Appearance;
+    publishableKey: string;
+    apiBase: string;
+    environment?: _snap_pay_types.Environment;
+    cardFrameUrl?: string | undefined;
+    registerChild: (getSelection: () => _snap_pay_types.SnapSelection | null) => () => void;
+    registerValue: (type: ElementType, getValue: () => unknown | null) => () => void;
+    options: CreateElementOptions;
+}
+declare class CustomerElement extends BaseElement {
+    private readonly args;
+    readonly type: ElementType;
+    private value;
+    private readonly resolvedAppearance;
+    private readonly unregisterValue;
+    constructor(args: CustomerElementArgs);
+    destroy(): void;
+    getValue(): CustomerValue;
+    protected render(container: HTMLElement): void;
+    private renderField;
+    private isComplete;
+}
+declare function createCustomerElement(args: CustomerElementArgs): CustomerElement;
+
+interface OtpElementArgs {
+    clientSecret: string;
+    appearance: Appearance;
+    publishableKey: string;
+    apiBase: string;
+    environment?: _snap_pay_types.Environment;
+    cardFrameUrl?: string | undefined;
+    registerChild: (getSelection: () => _snap_pay_types.SnapSelection | null) => () => void;
+    registerValue: (type: ElementType, getValue: () => unknown | null) => () => void;
+    options: CreateElementOptions;
+}
+declare class OtpElement extends BaseElement {
+    private readonly args;
+    readonly type: ElementType;
+    private digits;
+    private inputs;
+    private readonly length;
+    private readonly resolvedAppearance;
+    private readonly unregisterValue;
+    constructor(args: OtpElementArgs);
+    destroy(): void;
+    getValue(): OtpValue;
+    protected render(container: HTMLElement): void;
+    private onInput;
+    private onKeyDown;
+    private onPaste;
+    private isComplete;
+}
+declare function createOtpElement(args: OtpElementArgs): OtpElement;
+
+interface QrElementArgs {
+    clientSecret: string;
+    appearance: Appearance;
+    publishableKey: string;
+    apiBase: string;
+    environment?: _snap_pay_types.Environment;
+    cardFrameUrl?: string | undefined;
+    registerChild: (getSelection: () => _snap_pay_types.SnapSelection | null) => () => void;
+    registerValue: (type: ElementType, getValue: () => unknown | null) => () => void;
+    options: CreateElementOptions;
+}
+declare class QrElement extends BaseElement {
+    private readonly args;
+    readonly type: ElementType;
+    protected deferReadyOnMount: boolean;
+    private readonly resolvedAppearance;
+    constructor(args: QrElementArgs);
+    protected render(container: HTMLElement): void;
+}
+declare function createQrElement(args: QrElementArgs): QrElement;
+
+interface ResolvedAppearance {
+    primaryColor: string;
+    borderRadius: string;
+    fontFamily: string;
+    theme: "light" | "dark";
+    background: string;
+    foreground: string;
+    border: string;
+    hoverBackground: string;
+    spacingUnit: string;
+    labelColor: string;
+    errorColor: string;
+    mutedColor: string;
+}
+declare function resolveAppearance(input: Appearance, forType?: ElementType): ResolvedAppearance;
+declare function formInputStyle(a: ResolvedAppearance): Partial<CSSStyleDeclaration>;
+declare function formLabelStyle(a: ResolvedAppearance): Partial<CSSStyleDeclaration>;
+
+type CardBrand = "visa" | "mastercard" | "amex" | "discover" | "unknown";
+declare function normalizeCardNumber(raw: string): string;
+declare function luhnValid(cardNumber: string): boolean;
+declare function detectBrand(cardNumber: string): CardBrand;
+declare function formatCardNumber(raw: string): string;
+declare function cvcLengthFor(brand: CardBrand): 3 | 4;
+declare function cvcValid(cvc: string, brand: CardBrand): boolean;
+declare function expiryValid(input: string, now?: number): boolean;
+declare function formatExpiry(raw: string): string;
+
+export { BaseElement, BillingAddressElement, type CardBrand, CardElement, CustomerElement, ExpressCheckoutElement, OtpElement, PaymentElement, PaymentMethodSelector, QrElement, type ResolvedAppearance, WalletElement, createBillingAddressElement, createCardElement, createCustomerElement, createExpressCheckoutElement, createOtpElement, createPaymentElement, createPaymentMethodSelector, createQrElement, createWalletElement, cvcLengthFor, cvcValid, detectBrand, expiryValid, formInputStyle, formLabelStyle, formatCardNumber, formatExpiry, luhnValid, normalizeCardNumber, resolveAppearance };

package/dist/index.d.ts

@@ -0,0 +1,299 @@
+import * as _snap_pay_types from '@snap-pay/types';
+import { SnapElementHandle, ElementType, ElementEventName, ElementEventHandler, ElementEventMap, Appearance, PublicSession, CreateElementOptions, Environment, SnapSelection, BillingAddressValue, CustomerValue, OtpValue } from '@snap-pay/types';
+
+declare abstract class BaseElement implements SnapElementHandle {
+    abstract readonly type: ElementType;
+    private container;
+    private mounted;
+    private listeners;
+    mount(target: string | HTMLElement): void;
+    protected deferReadyOnMount: boolean;
+    unmount(): void;
+    destroy(): void;
+    on<E extends ElementEventName>(event: E, handler: ElementEventHandler<E>): void;
+    off<E extends ElementEventName>(event: E, handler: ElementEventHandler<E>): void;
+    protected emit<E extends ElementEventName>(event: E, payload: ElementEventMap[E]): void;
+    protected abstract render(container: HTMLElement): void;
+    getValue(): unknown;
+}
+
+interface WalletElementArgs {
+    clientSecret: string;
+    appearance: Appearance;
+    publishableKey: string;
+    apiBase: string;
+    environment?: _snap_pay_types.Environment;
+    cardFrameUrl?: string | undefined;
+    registerChild: (getSelection: () => _snap_pay_types.SnapSelection | null) => () => void;
+    registerValue: (type: _snap_pay_types.ElementType, getValue: () => unknown | null) => () => void;
+    initialSession?: PublicSession;
+    options: CreateElementOptions;
+}
+declare class WalletElement extends BaseElement {
+    private readonly args;
+    readonly type: ElementType;
+    private selected;
+    private allowed;
+    private readonly resolvedAppearance;
+    private buttons;
+    private renderTarget;
+    private readonly unregisterChild;
+    constructor(args: WalletElementArgs);
+    destroy(): void;
+    protected render(container: HTMLElement): void;
+    private renderButtons;
+    private renderProviderButton;
+    private select;
+    private buttonStyle;
+}
+declare function createWalletElement(args: WalletElementArgs): WalletElement;
+
+interface CardElementArgs {
+    clientSecret: string;
+    appearance: Appearance;
+    publishableKey: string;
+    apiBase: string;
+    environment: Environment | undefined;
+    cardFrameUrl: string | undefined;
+    registerChild: (getSelection: () => SnapSelection | null) => () => void;
+    registerValue: (type: _snap_pay_types.ElementType, getValue: () => unknown | null) => () => void;
+    options: CreateElementOptions;
+}
+declare class CardElement extends BaseElement {
+    private readonly args;
+    readonly type: ElementType;
+    protected deferReadyOnMount: boolean;
+    private selection;
+    private ready;
+    private failedFired;
+    private iframe;
+    private readonly frameOrigin;
+    private readonly unregisterChild;
+    private messageHandler;
+    private readyTimer;
+    constructor(args: CardElementArgs);
+    destroy(): void;
+    protected render(container: HTMLElement): void;
+    private onMessage;
+    private sendInit;
+    private clearReadyTimer;
+}
+declare function createCardElement(args: CardElementArgs): CardElement;
+
+interface PaymentElementArgs {
+    clientSecret: string;
+    appearance: Appearance;
+    publishableKey: string;
+    apiBase: string;
+    environment: _snap_pay_types.Environment;
+    cardFrameUrl: string | undefined;
+    registerChild: (getSelection: () => SnapSelection | null) => () => void;
+    registerValue: (type: ElementType, getValue: () => unknown | null) => () => void;
+    options: CreateElementOptions;
+}
+declare class PaymentElement extends BaseElement {
+    private readonly args;
+    readonly type: ElementType;
+    protected deferReadyOnMount: boolean;
+    private readonly resolvedAppearance;
+    private children;
+    constructor(args: PaymentElementArgs);
+    destroy(): void;
+    protected render(container: HTMLElement): void;
+    private mountChildren;
+}
+declare function createPaymentElement(args: PaymentElementArgs): PaymentElement;
+
+interface ExpressCheckoutElementArgs {
+    clientSecret: string;
+    appearance: Appearance;
+    publishableKey: string;
+    apiBase: string;
+    environment?: _snap_pay_types.Environment;
+    cardFrameUrl?: string | undefined;
+    registerChild: (getSelection: () => SnapSelection | null) => () => void;
+    registerValue: (type: ElementType, getValue: () => unknown | null) => () => void;
+    initialSession?: PublicSession;
+    options: CreateElementOptions;
+}
+declare class ExpressCheckoutElement extends BaseElement {
+    private readonly args;
+    readonly type: ElementType;
+    private selected;
+    private allowed;
+    private readonly resolvedAppearance;
+    private readonly unregisterChild;
+    constructor(args: ExpressCheckoutElementArgs);
+    destroy(): void;
+    protected render(container: HTMLElement): void;
+    private paint;
+    private renderButton;
+}
+declare function createExpressCheckoutElement(args: ExpressCheckoutElementArgs): ExpressCheckoutElement;
+
+interface PaymentMethodSelectorArgs {
+    clientSecret: string;
+    appearance: Appearance;
+    publishableKey: string;
+    apiBase: string;
+    environment: _snap_pay_types.Environment;
+    cardFrameUrl: string | undefined;
+    registerChild: (getSelection: () => SnapSelection | null) => () => void;
+    registerValue: (type: ElementType, getValue: () => unknown | null) => () => void;
+    options: CreateElementOptions;
+}
+declare class PaymentMethodSelector extends BaseElement {
+    private readonly args;
+    readonly type: ElementType;
+    protected deferReadyOnMount: boolean;
+    private readonly resolvedAppearance;
+    private walletChild;
+    private cardChild;
+    private activeTab;
+    private walletSlot;
+    private cardSlot;
+    private tabs;
+    private hasWallets;
+    private hasCard;
+    private session;
+    constructor(args: PaymentMethodSelectorArgs);
+    destroy(): void;
+    protected render(container: HTMLElement): void;
+    private mountUi;
+    private renderTab;
+    private applyTab;
+}
+declare function createPaymentMethodSelector(args: PaymentMethodSelectorArgs): PaymentMethodSelector;
+
+interface BillingAddressElementArgs {
+    clientSecret: string;
+    appearance: Appearance;
+    publishableKey: string;
+    apiBase: string;
+    environment?: _snap_pay_types.Environment;
+    cardFrameUrl?: string | undefined;
+    registerChild: (getSelection: () => _snap_pay_types.SnapSelection | null) => () => void;
+    registerValue: (type: ElementType, getValue: () => unknown | null) => () => void;
+    options: CreateElementOptions;
+}
+declare class BillingAddressElement extends BaseElement {
+    private readonly args;
+    readonly type: ElementType;
+    private value;
+    private readonly resolvedAppearance;
+    private readonly unregisterValue;
+    constructor(args: BillingAddressElementArgs);
+    destroy(): void;
+    getValue(): BillingAddressValue;
+    protected render(container: HTMLElement): void;
+    private renderField;
+    private isComplete;
+}
+declare function createBillingAddressElement(args: BillingAddressElementArgs): BillingAddressElement;
+
+interface CustomerElementArgs {
+    clientSecret: string;
+    appearance: Appearance;
+    publishableKey: string;
+    apiBase: string;
+    environment?: _snap_pay_types.Environment;
+    cardFrameUrl?: string | undefined;
+    registerChild: (getSelection: () => _snap_pay_types.SnapSelection | null) => () => void;
+    registerValue: (type: ElementType, getValue: () => unknown | null) => () => void;
+    options: CreateElementOptions;
+}
+declare class CustomerElement extends BaseElement {
+    private readonly args;
+    readonly type: ElementType;
+    private value;
+    private readonly resolvedAppearance;
+    private readonly unregisterValue;
+    constructor(args: CustomerElementArgs);
+    destroy(): void;
+    getValue(): CustomerValue;
+    protected render(container: HTMLElement): void;
+    private renderField;
+    private isComplete;
+}
+declare function createCustomerElement(args: CustomerElementArgs): CustomerElement;
+
+interface OtpElementArgs {
+    clientSecret: string;
+    appearance: Appearance;
+    publishableKey: string;
+    apiBase: string;
+    environment?: _snap_pay_types.Environment;
+    cardFrameUrl?: string | undefined;
+    registerChild: (getSelection: () => _snap_pay_types.SnapSelection | null) => () => void;
+    registerValue: (type: ElementType, getValue: () => unknown | null) => () => void;
+    options: CreateElementOptions;
+}
+declare class OtpElement extends BaseElement {
+    private readonly args;
+    readonly type: ElementType;
+    private digits;
+    private inputs;
+    private readonly length;
+    private readonly resolvedAppearance;
+    private readonly unregisterValue;
+    constructor(args: OtpElementArgs);
+    destroy(): void;
+    getValue(): OtpValue;
+    protected render(container: HTMLElement): void;
+    private onInput;
+    private onKeyDown;
+    private onPaste;
+    private isComplete;
+}
+declare function createOtpElement(args: OtpElementArgs): OtpElement;
+
+interface QrElementArgs {
+    clientSecret: string;
+    appearance: Appearance;
+    publishableKey: string;
+    apiBase: string;
+    environment?: _snap_pay_types.Environment;
+    cardFrameUrl?: string | undefined;
+    registerChild: (getSelection: () => _snap_pay_types.SnapSelection | null) => () => void;
+    registerValue: (type: ElementType, getValue: () => unknown | null) => () => void;
+    options: CreateElementOptions;
+}
+declare class QrElement extends BaseElement {
+    private readonly args;
+    readonly type: ElementType;
+    protected deferReadyOnMount: boolean;
+    private readonly resolvedAppearance;
+    constructor(args: QrElementArgs);
+    protected render(container: HTMLElement): void;
+}
+declare function createQrElement(args: QrElementArgs): QrElement;
+
+interface ResolvedAppearance {
+    primaryColor: string;
+    borderRadius: string;
+    fontFamily: string;
+    theme: "light" | "dark";
+    background: string;
+    foreground: string;
+    border: string;
+    hoverBackground: string;
+    spacingUnit: string;
+    labelColor: string;
+    errorColor: string;
+    mutedColor: string;
+}
+declare function resolveAppearance(input: Appearance, forType?: ElementType): ResolvedAppearance;
+declare function formInputStyle(a: ResolvedAppearance): Partial<CSSStyleDeclaration>;
+declare function formLabelStyle(a: ResolvedAppearance): Partial<CSSStyleDeclaration>;
+
+type CardBrand = "visa" | "mastercard" | "amex" | "discover" | "unknown";
+declare function normalizeCardNumber(raw: string): string;
+declare function luhnValid(cardNumber: string): boolean;
+declare function detectBrand(cardNumber: string): CardBrand;
+declare function formatCardNumber(raw: string): string;
+declare function cvcLengthFor(brand: CardBrand): 3 | 4;
+declare function cvcValid(cvc: string, brand: CardBrand): boolean;
+declare function expiryValid(input: string, now?: number): boolean;
+declare function formatExpiry(raw: string): string;
+
+export { BaseElement, BillingAddressElement, type CardBrand, CardElement, CustomerElement, ExpressCheckoutElement, OtpElement, PaymentElement, PaymentMethodSelector, QrElement, type ResolvedAppearance, WalletElement, createBillingAddressElement, createCardElement, createCustomerElement, createExpressCheckoutElement, createOtpElement, createPaymentElement, createPaymentMethodSelector, createQrElement, createWalletElement, cvcLengthFor, cvcValid, detectBrand, expiryValid, formInputStyle, formLabelStyle, formatCardNumber, formatExpiry, luhnValid, normalizeCardNumber, resolveAppearance };