TEBEX-1183 Add closeOnPaymentComplete option

.build.vars

@@ -0,0 +1,7 @@
+# These vars are public and will be used for the example page
+# They should match vars in wrangler.toml
+CHECKOUT_HOST_ENDPOINT = "https://pay.tebex.io"
+HEADLESS_API_ENDPOINT = "https://headless.tebex.io"
+ACCOUNT_ID = "t6c9-0927595131662ac732bf5f1d9bd5570482db5316"
+PACKAGE_IDS = "5987844,5987895"
+USERNAME = "notch"

dist/tebex.cjs

@@ -12508,7 +12508,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_resolveDefaultPaymentMethod, _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_resolveCloseOnPaymentComplete, _Checkout_resolveDefaultPaymentMethod, _Checkout_onRequestLightboxClose, _Checkout_showLightbox, _Checkout_buildComponent, _Checkout_renderComponent;
     const DEFAULT_WIDTH = "800px";
     const DEFAULT_HEIGHT = "760px";
     const THEME_NAMES = [
@@ -12549,6 +12549,7 @@
             this.colors = [];
             this.closeOnClickOutside = false;
             this.closeOnEsc = false;
+            this.closeOnPaymentComplete = false;
             this.defaultPaymentMethod = undefined;
             this.popupOnMobile = false;
             this.endpoint = "https://pay.tebex.io";
@@ -12577,6 +12578,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.closeOnPaymentComplete = __classPrivateFieldGet(this, _Checkout_instances, "m", _Checkout_resolveCloseOnPaymentComplete).call(this, options) ?? this.closeOnPaymentComplete;
             this.defaultPaymentMethod = __classPrivateFieldGet(this, _Checkout_instances, "m", _Checkout_resolveDefaultPaymentMethod).call(this, options) ?? this.defaultPaymentMethod;
         }
         /**
@@ -12743,6 +12745,14 @@
             return null;
         }
         return options.closeOnEsc;
+    }, _Checkout_resolveCloseOnPaymentComplete = function _Checkout_resolveCloseOnPaymentComplete(options) {
+        if (isNullOrUndefined(options.closeOnPaymentComplete))
+            return null;
+        if (!isBoolean(options.closeOnPaymentComplete)) {
+            warn(`invalid closeOnPaymentComplete option "${options.closeOnPaymentComplete}" - must be a boolean`);
+            return null;
+        }
+        return options.closeOnPaymentComplete;
     }, _Checkout_resolveDefaultPaymentMethod = function _Checkout_resolveDefaultPaymentMethod(options) {
         if (isNullOrUndefined(options.defaultPaymentMethod))
             return null;
@@ -12790,6 +12800,7 @@
             colors: this.colors,
             closeOnClickOutside: this.closeOnClickOutside,
             closeOnEsc: this.closeOnEsc,
+            closeOnPaymentComplete: this.closeOnPaymentComplete,
             defaultPaymentMethod: this.defaultPaymentMethod,
             theme: this.theme,
             onOpenWindow: (url) => {
@@ -12814,7 +12825,7 @@
             origin: url.origin,
             path: url.pathname,
             params: url.search,
-            version: "1.8.1",
+            version: "1.9.0",
         });
         await this.zoid.renderTo(window, container, popup ? "popup" : "iframe");
         __classPrivateFieldSet(this, _Checkout_didRender, true, "f");
@@ -12973,6 +12984,7 @@
                 colors: colors,
                 closeOnClickOutside: getAttribute(this, "close-on-click-outside") !== null,
                 closeOnEsc: getAttribute(this, "close-on-esc") !== null,
+                closeOnPaymentComplete: getAttribute(this, "close-on-payment-complete") !== null,
                 defaultPaymentMethod: getAttribute(this, "default-payment-method"),
                 popupOnMobile: getAttribute(this, "popup-on-mobile") !== null,
                 endpoint: getAttribute(this, "endpoint"),
@@ -13024,7 +13036,7 @@
     /**
      * Current Tebex.js package version
      */
-    const version = "1.8.1";
+    const version = "1.9.0";
     /**
      * Tebex checkout API
      */

dist/tebex.mjs

@@ -12502,7 +12502,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_resolveDefaultPaymentMethod, _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_resolveCloseOnPaymentComplete, _Checkout_resolveDefaultPaymentMethod, _Checkout_onRequestLightboxClose, _Checkout_showLightbox, _Checkout_buildComponent, _Checkout_renderComponent;
 const DEFAULT_WIDTH = "800px";
 const DEFAULT_HEIGHT = "760px";
 const THEME_NAMES = [
@@ -12543,6 +12543,7 @@ class Checkout {
         this.colors = [];
         this.closeOnClickOutside = false;
         this.closeOnEsc = false;
+        this.closeOnPaymentComplete = false;
         this.defaultPaymentMethod = undefined;
         this.popupOnMobile = false;
         this.endpoint = "https://pay.tebex.io";
@@ -12571,6 +12572,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.closeOnPaymentComplete = __classPrivateFieldGet(this, _Checkout_instances, "m", _Checkout_resolveCloseOnPaymentComplete).call(this, options) ?? this.closeOnPaymentComplete;
         this.defaultPaymentMethod = __classPrivateFieldGet(this, _Checkout_instances, "m", _Checkout_resolveDefaultPaymentMethod).call(this, options) ?? this.defaultPaymentMethod;
     }
     /**
@@ -12737,6 +12739,14 @@ _Checkout_didRender = new WeakMap(), _Checkout_onRender = new WeakMap(), _Checko
         return null;
     }
     return options.closeOnEsc;
+}, _Checkout_resolveCloseOnPaymentComplete = function _Checkout_resolveCloseOnPaymentComplete(options) {
+    if (isNullOrUndefined(options.closeOnPaymentComplete))
+        return null;
+    if (!isBoolean(options.closeOnPaymentComplete)) {
+        warn(`invalid closeOnPaymentComplete option "${options.closeOnPaymentComplete}" - must be a boolean`);
+        return null;
+    }
+    return options.closeOnPaymentComplete;
 }, _Checkout_resolveDefaultPaymentMethod = function _Checkout_resolveDefaultPaymentMethod(options) {
     if (isNullOrUndefined(options.defaultPaymentMethod))
         return null;
@@ -12784,6 +12794,7 @@ _Checkout_didRender = new WeakMap(), _Checkout_onRender = new WeakMap(), _Checko
         colors: this.colors,
         closeOnClickOutside: this.closeOnClickOutside,
         closeOnEsc: this.closeOnEsc,
+        closeOnPaymentComplete: this.closeOnPaymentComplete,
         defaultPaymentMethod: this.defaultPaymentMethod,
         theme: this.theme,
         onOpenWindow: (url) => {
@@ -12808,7 +12819,7 @@ _Checkout_didRender = new WeakMap(), _Checkout_onRender = new WeakMap(), _Checko
         origin: url.origin,
         path: url.pathname,
         params: url.search,
-        version: "1.8.1",
+        version: "1.9.0",
     });
     await this.zoid.renderTo(window, container, popup ? "popup" : "iframe");
     __classPrivateFieldSet(this, _Checkout_didRender, true, "f");
@@ -12967,6 +12978,7 @@ const defineTebexCheckout = () => {
             colors: colors,
             closeOnClickOutside: getAttribute(this, "close-on-click-outside") !== null,
             closeOnEsc: getAttribute(this, "close-on-esc") !== null,
+            closeOnPaymentComplete: getAttribute(this, "close-on-payment-complete") !== null,
             defaultPaymentMethod: getAttribute(this, "default-payment-method"),
             popupOnMobile: getAttribute(this, "popup-on-mobile") !== null,
             endpoint: getAttribute(this, "endpoint"),
@@ -13018,7 +13030,7 @@ if (isEnvBrowser())
 /**
  * Current Tebex.js package version
  */
-const version = "1.8.1";
+const version = "1.9.0";
 /**
  * Tebex checkout API
  */

dist/types/checkout.d.ts

@@ -39,6 +39,11 @@ export type CheckoutOptions = {
      * @default false
      */
     closeOnEsc?: boolean;
+    /**
+     * Whether to automatically close the Tebex.js popup as soon as the payment is completed; `payment:complete` and `close` events will still be emitted.
+     * @default false
+     */
+    closeOnPaymentComplete?: boolean;
     /**
      * Select a payment method to highlight on the checkout by passing its ident.
      * @default undefined
@@ -89,6 +94,7 @@ export type CheckoutZoidProps = {
     colors: CheckoutColorDefinition[];
     closeOnClickOutside: boolean;
     closeOnEsc: boolean;
+    closeOnPaymentComplete: boolean;
     defaultPaymentMethod?: string;
     theme: CheckoutTheme;
     onOpenWindow: (url: string) => void;
@@ -114,6 +120,7 @@ export default class Checkout {
     colors: CheckoutColorDefinition[];
     closeOnClickOutside: boolean;
     closeOnEsc: boolean;
+    closeOnPaymentComplete: boolean;
     defaultPaymentMethod?: string;
     popupOnMobile: boolean;
     endpoint: string;

package.json

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

rollup.config.js

@@ -17,12 +17,12 @@ import copy from "rollup-plugin-copy";
 import dev from "rollup-plugin-dev";
 import dotenv from "dotenv";
 
-dotenv.config({ path: ".dev.vars" });
-
 const build = process.env.BUILD ?? "browser";
 const isBrowser = build === "browser";
 const isNpm = build === "npm";
-const isServer = process.env.SERVER ?? false;
+const isDevServer = process.env.SERVER ?? false;
+
+dotenv.config({ path: isDevServer ? ".dev.vars" : ".build.vars" });
 
 const bannerMessage = readFileSync("./LICENSE")
     .toString()
@@ -35,7 +35,7 @@ const banner = `/**!
 ${bannerMessage}
  */`;
 
-const exampleDist = isServer ? "example/.dist" : "example/dist";
+const exampleDist = isDevServer ? "example/.dist" : "example/dist";
 
 export default [
     // Main Tebex.js build
@@ -155,7 +155,7 @@ export default [
                 target: `${exampleDist}/components.html`,
                 attrs: ["defer"],
             }),
-            isServer &&
+            isDevServer &&
                 dev({
                     silent: true,
                     host: "localhost",

src/checkout.ts

@@ -92,6 +92,11 @@ export type CheckoutOptions = {
      * @default false
      */
     closeOnEsc?: boolean;
+    /**
+     * Whether to automatically close the Tebex.js popup as soon as the payment is completed; `payment:complete` and `close` events will still be emitted.
+     * @default false
+     */
+    closeOnPaymentComplete?: boolean;
     /**
      * Select a payment method to highlight on the checkout by passing its ident.
      * @default undefined
@@ -147,6 +152,7 @@ export type CheckoutZoidProps = {
     colors: CheckoutColorDefinition[];
     closeOnClickOutside: boolean;
     closeOnEsc: boolean;
+    closeOnPaymentComplete: boolean;
     defaultPaymentMethod?: string;
     theme: CheckoutTheme;
     onOpenWindow: (url: string) => void;
@@ -173,6 +179,7 @@ export default class Checkout {
     colors: CheckoutColorDefinition[] = [];
     closeOnClickOutside = false;
     closeOnEsc = false;
+    closeOnPaymentComplete = false;
     defaultPaymentMethod?: string = undefined;
     popupOnMobile = false;
     endpoint = "https://pay.tebex.io";
@@ -200,6 +207,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.closeOnPaymentComplete = this.#resolveCloseOnPaymentComplete(options) ?? this.closeOnPaymentComplete;
         this.defaultPaymentMethod = this.#resolveDefaultPaymentMethod(options) ?? this.defaultPaymentMethod;
     }
 
@@ -414,6 +422,18 @@ export default class Checkout {
         return options.closeOnEsc;
     }
 
+    #resolveCloseOnPaymentComplete(options: CheckoutOptions) {
+        if (isNullOrUndefined(options.closeOnPaymentComplete))
+            return null;
+
+        if (!isBoolean(options.closeOnPaymentComplete)) {
+            warn(`invalid closeOnPaymentComplete option "${ options.closeOnPaymentComplete }" - must be a boolean`);
+            return null;
+        }
+
+        return options.closeOnPaymentComplete;
+    }
+
     #resolveDefaultPaymentMethod(options: CheckoutOptions) {
         if (isNullOrUndefined(options.defaultPaymentMethod))
             return null;
@@ -480,6 +500,7 @@ export default class Checkout {
             colors: this.colors,
             closeOnClickOutside: this.closeOnClickOutside,
             closeOnEsc: this.closeOnEsc,
+            closeOnPaymentComplete: this.closeOnPaymentComplete,
             defaultPaymentMethod: this.defaultPaymentMethod,
             theme: this.theme,
             onOpenWindow: (url) => {

src/webComponents/TebexCheckout.ts

@@ -141,6 +141,7 @@ export const defineTebexCheckout = () => {
                 colors: colors,
                 closeOnClickOutside: getAttribute(this, "close-on-click-outside") !== null,
                 closeOnEsc: getAttribute(this, "close-on-esc") !== null,
+                closeOnPaymentComplete: getAttribute(this, "close-on-payment-complete") !== null,
                 defaultPaymentMethod: getAttribute(this, "default-payment-method"),
                 popupOnMobile: getAttribute(this, "popup-on-mobile") !== null,
                 endpoint: getAttribute(this, "endpoint"),

tests/checkout.test.ts

@@ -280,6 +280,27 @@ describe("Checkout", () => {
             });
         });
 
+        describe("closeOnPaymentComplete option", () => {
+
+            test("Can set closeOnPaymentComplete, which defaults to false", () => {
+                checkout.init({ ident: "test" });
+                expect(checkout.closeOnPaymentComplete).toBe(false);
+                checkout.init({ ident: "test", closeOnPaymentComplete: true });
+                expect(checkout.closeOnPaymentComplete).toBe(true);
+            });
+
+            test("Warns if closeOnPaymentComplete option isn't valid, and falls back to default", () => {
+                const spy = vi.spyOn(console, "warn").mockImplementation(() => {});
+                checkout.init({
+                    ident: "test",
+                    closeOnPaymentComplete: 123 as any
+                });
+                expect(spy).toHaveBeenCalledOnce();
+                expect(spy.mock.lastCall[0]).toContain("invalid closeOnPaymentComplete option");
+                expect(checkout.closeOnPaymentComplete).toBe(false);
+            });
+        });
+
         describe("defaultPaymentMethod option", () => {
 
             test("Can set defaultPaymentMethod, which defaults to undefined", () => {

tests/index.test-d.ts

@@ -36,6 +36,7 @@ describe("Typechecks", () => {
                 theme?: "light" | "dark" | "default" | "auto";
                 closeOnClickOutside?: boolean;
                 closeOnEsc?: boolean;
+                closeOnPaymentComplete?: boolean;
                 colors?: {
                     name: "primary" | "secondary" | "background" | "surface" | "surface-variant" | "success" | "warning" | "error" | "green" | "red" | "fields" | "field-border",
                     color: string
@@ -92,6 +93,7 @@ describe("Typechecks", () => {
                 }[];
                 closeOnClickOutside: boolean;
                 closeOnEsc: boolean;
+                closeOnPaymentComplete: boolean;
                 defaultPaymentMethod?: string;
                 theme: "light" | "dark" | "default" | "auto";
                 onOpenWindow: (url: string) => void;
@@ -143,6 +145,7 @@ describe("Typechecks", () => {
                 theme?: "light" | "dark" | "default" | "auto";
                 closeOnClickOutside?: boolean;
                 closeOnEsc?: boolean;
+                closeOnPaymentComplete?: boolean;
                 colors?: {
                     name: "primary" | "secondary" | "background" | "surface" | "surface-variant" | "success" | "warning" | "error" | "green" | "red" | "fields" | "field-border",
                     color: string

tests/webComponents/TebexCheckout.test.ts

@@ -71,15 +71,17 @@ describe("<tebex-checkout> Web component", () => {
             expect(el.checkout.theme).toEqual("dark");
         });
 
-        test("Close behavior can be set with the close-on-click-outside and close-on-esc attributes", () => {
+        test("Close behavior can be set with the close-on-click-outside, close-on-esc, and close-on-payment-complete attributes", () => {
             const el = document.createElement("tebex-checkout") as TebexCheckout;
             document.body.append(el);
             el.setAttribute("close-on-click-outside", "aaaa");
             el.setAttribute("close-on-esc", "aaaa");
+            el.setAttribute("close-on-payment-complete", "aaaa");
             el.setAttribute("ident", __TEST_BASKET_IDENT__);
 
             expect(el.checkout.closeOnClickOutside).toEqual(true);
             expect(el.checkout.closeOnEsc).toEqual(true);
+            expect(el.checkout.closeOnPaymentComplete).toEqual(true);
         });
 
         test("Default payment method can be set with the default-payment-method attribute", () => {