Tebex 694 - Add defaultPaymentMethod option, expose CheckoutZoidProps type

dist/tebex.cjs

@@ -12506,7 +12506,7 @@
         return html;
     };
 
-    var _Checkout_instances, _Checkout_didRender, _Checkout_onRender, _Checkout_resolveLocale, _Checkout_resolveTheme, _Checkout_resolveColors, _Checkout_resolvePopupOnMobile, _Checkout_resolveEndpoint, _Checkout_resolveCloseOnClickOutside, _Checkout_resolveCloseOnEsc, _Checkout_onRequestLightboxClose, _Checkout_showLightbox, _Checkout_buildComponent, _Checkout_renderComponent;
+    var _Checkout_instances, _Checkout_didRender, _Checkout_onRender, _Checkout_resolveLocale, _Checkout_resolveTheme, _Checkout_resolveColors, _Checkout_resolvePopupOnMobile, _Checkout_resolveEndpoint, _Checkout_resolveCloseOnClickOutside, _Checkout_resolveCloseOnEsc, _Checkout_resolveDefaultPaymentMethod, _Checkout_onRequestLightboxClose, _Checkout_showLightbox, _Checkout_buildComponent, _Checkout_renderComponent;
     const DEFAULT_WIDTH = "800px";
     const DEFAULT_HEIGHT = "760px";
     const THEME_NAMES = [
@@ -12537,6 +12537,7 @@
             this.colors = [];
             this.closeOnClickOutside = false;
             this.closeOnEsc = false;
+            this.defaultPaymentMethod = undefined;
             this.popupOnMobile = false;
             this.endpoint = "https://pay.tebex.io";
             this.isOpen = false;
@@ -12564,6 +12565,7 @@
             this.endpoint = __classPrivateFieldGet(this, _Checkout_instances, "m", _Checkout_resolveEndpoint).call(this, options) ?? this.endpoint;
             this.closeOnClickOutside = __classPrivateFieldGet(this, _Checkout_instances, "m", _Checkout_resolveCloseOnClickOutside).call(this, options) ?? this.closeOnClickOutside;
             this.closeOnEsc = __classPrivateFieldGet(this, _Checkout_instances, "m", _Checkout_resolveCloseOnEsc).call(this, options) ?? this.closeOnEsc;
+            this.defaultPaymentMethod = __classPrivateFieldGet(this, _Checkout_instances, "m", _Checkout_resolveDefaultPaymentMethod).call(this, options) ?? this.defaultPaymentMethod;
         }
         /**
          * Subscribe to Tebex checkout events, such as when the embed is closed or when a payment is completed.
@@ -12729,6 +12731,14 @@
             return null;
         }
         return options.closeOnEsc;
+    }, _Checkout_resolveDefaultPaymentMethod = function _Checkout_resolveDefaultPaymentMethod(options) {
+        if (isNullOrUndefined(options.defaultPaymentMethod))
+            return null;
+        if (!isNonEmptyString(options.defaultPaymentMethod)) {
+            warn(`invalid default payment method option "${options.defaultPaymentMethod}" - must be a non-empty string`);
+            return null;
+        }
+        return options.defaultPaymentMethod;
     }, _Checkout_showLightbox = async function _Checkout_showLightbox() {
         if (!this.lightbox)
             this.lightbox = new Lightbox();
@@ -12768,6 +12778,7 @@
             colors: this.colors,
             closeOnClickOutside: this.closeOnClickOutside,
             closeOnEsc: this.closeOnEsc,
+            defaultPaymentMethod: this.defaultPaymentMethod,
             theme: this.theme,
             onOpenWindow: (url) => {
                 window.open(url);
@@ -12791,7 +12802,7 @@
             origin: url.origin,
             path: url.pathname,
             params: url.search,
-            version: "1.6.1",
+            version: "1.7.0",
         });
         await this.zoid.renderTo(window, container, popup ? "popup" : "iframe");
         __classPrivateFieldSet(this, _Checkout_didRender, true, "f");
@@ -12950,6 +12961,7 @@
                 colors: colors,
                 closeOnClickOutside: getAttribute(this, "close-on-click-outside") !== null,
                 closeOnEsc: getAttribute(this, "close-on-esc") !== null,
+                defaultPaymentMethod: getAttribute(this, "default-payment-method"),
                 popupOnMobile: getAttribute(this, "popup-on-mobile") !== null,
                 endpoint: getAttribute(this, "endpoint"),
             });
@@ -13000,7 +13012,7 @@
     /**
      * Current Tebex.js package version
      */
-    const version = "1.6.1";
+    const version = "1.7.0";
     /**
      * Tebex checkout API
      */

dist/tebex.mjs

@@ -12500,7 +12500,7 @@ const spinnerRender = ({ doc, props }) => {
     return html;
 };
 
-var _Checkout_instances, _Checkout_didRender, _Checkout_onRender, _Checkout_resolveLocale, _Checkout_resolveTheme, _Checkout_resolveColors, _Checkout_resolvePopupOnMobile, _Checkout_resolveEndpoint, _Checkout_resolveCloseOnClickOutside, _Checkout_resolveCloseOnEsc, _Checkout_onRequestLightboxClose, _Checkout_showLightbox, _Checkout_buildComponent, _Checkout_renderComponent;
+var _Checkout_instances, _Checkout_didRender, _Checkout_onRender, _Checkout_resolveLocale, _Checkout_resolveTheme, _Checkout_resolveColors, _Checkout_resolvePopupOnMobile, _Checkout_resolveEndpoint, _Checkout_resolveCloseOnClickOutside, _Checkout_resolveCloseOnEsc, _Checkout_resolveDefaultPaymentMethod, _Checkout_onRequestLightboxClose, _Checkout_showLightbox, _Checkout_buildComponent, _Checkout_renderComponent;
 const DEFAULT_WIDTH = "800px";
 const DEFAULT_HEIGHT = "760px";
 const THEME_NAMES = [
@@ -12531,6 +12531,7 @@ class Checkout {
         this.colors = [];
         this.closeOnClickOutside = false;
         this.closeOnEsc = false;
+        this.defaultPaymentMethod = undefined;
         this.popupOnMobile = false;
         this.endpoint = "https://pay.tebex.io";
         this.isOpen = false;
@@ -12558,6 +12559,7 @@ class Checkout {
         this.endpoint = __classPrivateFieldGet(this, _Checkout_instances, "m", _Checkout_resolveEndpoint).call(this, options) ?? this.endpoint;
         this.closeOnClickOutside = __classPrivateFieldGet(this, _Checkout_instances, "m", _Checkout_resolveCloseOnClickOutside).call(this, options) ?? this.closeOnClickOutside;
         this.closeOnEsc = __classPrivateFieldGet(this, _Checkout_instances, "m", _Checkout_resolveCloseOnEsc).call(this, options) ?? this.closeOnEsc;
+        this.defaultPaymentMethod = __classPrivateFieldGet(this, _Checkout_instances, "m", _Checkout_resolveDefaultPaymentMethod).call(this, options) ?? this.defaultPaymentMethod;
     }
     /**
      * Subscribe to Tebex checkout events, such as when the embed is closed or when a payment is completed.
@@ -12723,6 +12725,14 @@ _Checkout_didRender = new WeakMap(), _Checkout_onRender = new WeakMap(), _Checko
         return null;
     }
     return options.closeOnEsc;
+}, _Checkout_resolveDefaultPaymentMethod = function _Checkout_resolveDefaultPaymentMethod(options) {
+    if (isNullOrUndefined(options.defaultPaymentMethod))
+        return null;
+    if (!isNonEmptyString(options.defaultPaymentMethod)) {
+        warn(`invalid default payment method option "${options.defaultPaymentMethod}" - must be a non-empty string`);
+        return null;
+    }
+    return options.defaultPaymentMethod;
 }, _Checkout_showLightbox = async function _Checkout_showLightbox() {
     if (!this.lightbox)
         this.lightbox = new Lightbox();
@@ -12762,6 +12772,7 @@ _Checkout_didRender = new WeakMap(), _Checkout_onRender = new WeakMap(), _Checko
         colors: this.colors,
         closeOnClickOutside: this.closeOnClickOutside,
         closeOnEsc: this.closeOnEsc,
+        defaultPaymentMethod: this.defaultPaymentMethod,
         theme: this.theme,
         onOpenWindow: (url) => {
             window.open(url);
@@ -12785,7 +12796,7 @@ _Checkout_didRender = new WeakMap(), _Checkout_onRender = new WeakMap(), _Checko
         origin: url.origin,
         path: url.pathname,
         params: url.search,
-        version: "1.6.1",
+        version: "1.7.0",
     });
     await this.zoid.renderTo(window, container, popup ? "popup" : "iframe");
     __classPrivateFieldSet(this, _Checkout_didRender, true, "f");
@@ -12944,6 +12955,7 @@ const defineTebexCheckout = () => {
             colors: colors,
             closeOnClickOutside: getAttribute(this, "close-on-click-outside") !== null,
             closeOnEsc: getAttribute(this, "close-on-esc") !== null,
+            defaultPaymentMethod: getAttribute(this, "default-payment-method"),
             popupOnMobile: getAttribute(this, "popup-on-mobile") !== null,
             endpoint: getAttribute(this, "endpoint"),
         });
@@ -12994,7 +13006,7 @@ if (isEnvBrowser())
 /**
  * Current Tebex.js package version
  */
-const version = "1.6.1";
+const version = "1.7.0";
 /**
  * Tebex checkout API
  */

dist/types/checkout.d.ts

@@ -1,4 +1,6 @@
-import { Unsubscribe } from "nanoevents";
+/// <reference path="../../src/types/zoid.d.ts" />
+import { type ZoidComponent, type ZoidComponentInstance } from "zoid";
+import { type Unsubscribe } from "nanoevents";
 import { Lightbox } from "./lightbox";
 import { type CssDimension, type Implements } from "./utils";
 export declare const THEME_NAMES: readonly ["auto", "default", "light", "dark"];
@@ -37,10 +39,14 @@ export type CheckoutOptions = {
      * @default false
      */
     closeOnEsc?: boolean;
+    /**
+     * Select a payment method to highlight on the checkout by passing its ident.
+     * @default undefined
+     */
+    defaultPaymentMethod?: string;
     /**
      * Whether to still display a popup on mobile or not. If `false` or undefined, then calling `launch()` will open a new window on mobile devices.
      * @default false
-     * @internal
      */
     popupOnMobile?: boolean;
     /**
@@ -74,6 +80,29 @@ export type CheckoutEventMap = Implements<Record<CheckoutEvent, Function>, {
     "payment:complete": (e: Event) => void;
     "payment:error": (e: Event) => void;
 }>;
+/**
+ * Props passed through Zoid component.
+ * @internal
+ */
+export type CheckoutZoidProps = {
+    locale: string;
+    colors: CheckoutColorDefinition[];
+    closeOnClickOutside: boolean;
+    closeOnEsc: boolean;
+    defaultPaymentMethod?: string;
+    theme: CheckoutTheme;
+    onOpenWindow: (url: string) => void;
+    onClosePopup: () => Promise<void>;
+    onPaymentComplete: (e: any) => void;
+    onPaymentError: (e: any) => void;
+    isApplePayAvailable: boolean;
+    isEmbedded: boolean;
+    referrer: string;
+    origin: string;
+    path: string;
+    params: string;
+    version: string;
+};
 /**
  * Tebex checkout instance.
  */
@@ -85,6 +114,7 @@ export default class Checkout {
     colors: CheckoutColorDefinition[];
     closeOnClickOutside: boolean;
     closeOnEsc: boolean;
+    defaultPaymentMethod?: string;
     popupOnMobile: boolean;
     endpoint: string;
     isOpen: boolean;
@@ -95,8 +125,8 @@ export default class Checkout {
         "payment:error": (e: Event) => void;
     }>;
     lightbox: Lightbox;
-    component: any;
-    zoid: any;
+    component: ZoidComponent<CheckoutZoidProps>;
+    zoid: ZoidComponentInstance;
     /**
      * Configure the Tebex checkout settings.
      */

dist/types/index.d.ts

@@ -8,6 +8,7 @@ export declare const version: string;
  * Tebex checkout API
  */
 export declare const checkout: Checkout;
+export type { CheckoutOptions, CheckoutColorDefinition, CheckoutEvent, CheckoutEventMap, CheckoutTheme, CheckoutZoidProps } from "./checkout";
 /**
  * Legacy APIs
  * @deprecated

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tebexio/tebex.js",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "description": "Integrate Tebex Checkout directly into your own website or game using our embedded checkout experience.",
   "type": "module",
   "main": "dist/tebex.cjs",

src/checkout.ts

@@ -1,5 +1,12 @@
-import zoid from "zoid";
-import { createNanoEvents, Unsubscribe } from "nanoevents";
+import zoid, { 
+    type ZoidComponent,
+    type ZoidComponentInstance 
+} from "zoid";
+
+import {
+    createNanoEvents,
+    type Unsubscribe
+} from "nanoevents";
 
 import { Lightbox } from "./lightbox";
 import { spinnerRender } from "./spinner";
@@ -75,10 +82,14 @@ export type CheckoutOptions = {
      * @default false
      */
     closeOnEsc?: boolean;
+    /**
+     * Select a payment method to highlight on the checkout by passing its ident.
+     * @default undefined
+     */
+    defaultPaymentMethod?: string;
     /**
      * Whether to still display a popup on mobile or not. If `false` or undefined, then calling `launch()` will open a new window on mobile devices.
      * @default false
-     * @internal
      */
     popupOnMobile?: boolean;
     /**
@@ -117,6 +128,30 @@ export type CheckoutEventMap = Implements<Record<CheckoutEvent, Function>, {
     "payment:error": (e: Event) => void;
 }>;
 
+/**
+ * Props passed through Zoid component.
+ * @internal
+ */
+export type CheckoutZoidProps = {
+    locale: string;
+    colors: CheckoutColorDefinition[];
+    closeOnClickOutside: boolean;
+    closeOnEsc: boolean;
+    defaultPaymentMethod?: string;
+    theme: CheckoutTheme;
+    onOpenWindow: (url: string) => void;
+    onClosePopup: () => Promise<void>;
+    onPaymentComplete: (e: any) => void;
+    onPaymentError: (e: any) => void;
+    isApplePayAvailable: boolean;
+    isEmbedded: boolean;
+    referrer: string;
+    origin: string;
+    path: string;
+    params: string;
+    version: string;
+};
+
 /**
  * Tebex checkout instance. 
  */
@@ -125,18 +160,19 @@ export default class Checkout {
     ident: string = null;
     locale: string = null;
     theme: CheckoutTheme = "default";
-    colors: CheckoutColorDefinition[] =  [];
+    colors: CheckoutColorDefinition[] = [];
     closeOnClickOutside = false;
     closeOnEsc = false;
+    defaultPaymentMethod?: string = undefined;
     popupOnMobile = false;
     endpoint = "https://pay.tebex.io";
 
     isOpen = false;
     emitter = createNanoEvents<CheckoutEventMap>();
     lightbox: Lightbox = null;
 
-    component: any = null;
-    zoid: any = null;
+    component: ZoidComponent<CheckoutZoidProps> = null;
+    zoid: ZoidComponentInstance = null;
 
     #didRender = false;
     #onRender: Function;
@@ -154,6 +190,7 @@ export default class Checkout {
         this.endpoint = this.#resolveEndpoint(options) ?? this.endpoint;
         this.closeOnClickOutside = this.#resolveCloseOnClickOutside(options) ?? this.closeOnClickOutside;
         this.closeOnEsc = this.#resolveCloseOnEsc(options) ?? this.closeOnEsc;
+        this.defaultPaymentMethod = this.#resolveDefaultPaymentMethod(options) ?? this.defaultPaymentMethod;
     }
 
     /**
@@ -367,6 +404,18 @@ export default class Checkout {
         return options.closeOnEsc;
     }
 
+    #resolveDefaultPaymentMethod(options: CheckoutOptions) {
+        if (isNullOrUndefined(options.defaultPaymentMethod))
+            return null;
+
+        if (!isNonEmptyString(options.defaultPaymentMethod)) {
+            warn(`invalid default payment method option "${ options.defaultPaymentMethod }" - must be a non-empty string`);
+            return null;
+        }
+
+        return options.defaultPaymentMethod;
+    }
+
     #onRequestLightboxClose = async () => {
         if (this.isOpen)
             await this.close();
@@ -421,6 +470,7 @@ export default class Checkout {
             colors: this.colors,
             closeOnClickOutside: this.closeOnClickOutside,
             closeOnEsc: this.closeOnEsc,
+            defaultPaymentMethod: this.defaultPaymentMethod,
             theme: this.theme,
             onOpenWindow: (url) => {
                 window.open(url);

src/index.ts

@@ -13,6 +13,15 @@ export const version = __VERSION__;
  */
 export const checkout = new Checkout();
 
+export type {
+    CheckoutOptions,
+    CheckoutColorDefinition,
+    CheckoutEvent,
+    CheckoutEventMap,
+    CheckoutTheme,
+    CheckoutZoidProps
+} from "./checkout";
+
 /**
  * Legacy APIs
  * @deprecated