@gatepayfe/pay-js-react 0.0.1

package/README.md

@@ -0,0 +1,66 @@
+# @gatepayfe/pay-js-react
+
+React bindings for [`@gatepayfe/pay-js`](../pay-js). Provides a declarative `<GatePayElement />` component.
+
+## Install
+
+```bash
+npm install @gatepayfe/pay-js @gatepayfe/pay-js-react react react-dom
+```
+
+Peer dependencies: `react` ^18.2.0 or ^19.0.0, `react-dom` ^18.2.0 or ^19.0.0.
+
+## Quick start
+
+```tsx
+import { GatePayElement } from '@gatepayfe/pay-js-react'
+
+export function Checkout() {
+  return (
+    <GatePayElement
+      gatePay={{
+        clientId: 'your-client-id',
+        locale: 'en-US',
+        theme: 'auto',
+      }}
+      payment={{
+        clientSessionSecret: 'cs_xxx',
+        onReady: () => console.log('ready'),
+        onSuccess: result => console.log('paid', result),
+        onError: error => console.error(error),
+      }}
+    />
+  )
+}
+```
+
+## Next.js App Router
+
+This package is marked with `"use client"`. Import it only in Client Components.
+
+```tsx
+'use client'
+
+import { GatePayElement } from '@gatepayfe/pay-js-react'
+```
+
+## Ref API
+
+```tsx
+import { useRef } from 'react'
+import { GatePayElement, type GatePayElementRef } from '@gatepayfe/pay-js-react'
+
+const ref = useRef<GatePayElementRef>(null)
+
+// ref.current?.updateLocale('zh-CN')
+// ref.current?.updateTheme('dark')
+// ref.current?.destroy()
+```
+
+## Re-exports
+
+This package also re-exports core APIs from `@gatepayfe/pay-js` (`GatePay`, `CheckoutBridge`, types, etc.).
+
+## License
+
+UNLICENSED — contact Gate Pay for usage terms.

package/dist/cjs/gate-pay-element.cjs

@@ -0,0 +1,187 @@
+"use strict";
+"use client";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    GatePayElement: ()=>gate_pay_element_GatePayElement
+});
+const pay_js_namespaceObject = require("@gatepayfe/pay-js");
+const external_react_namespaceObject = require("react");
+function toMethodKey(methods) {
+    var _ref;
+    return null != (_ref = null == methods ? void 0 : methods.join('|')) ? _ref : '';
+}
+function toRecreateKey(gatePay, payment) {
+    var _gatePay_baseUrl, _gatePay_debug, _gatePay_fiatCurrency, _payment_showLanguageSwitcher;
+    return JSON.stringify({
+        baseUrl: null != (_gatePay_baseUrl = gatePay.baseUrl) ? _gatePay_baseUrl : pay_js_namespaceObject.DEFAULT_GATE_PAY_BASE_URL,
+        clientId: gatePay.clientId,
+        debug: null != (_gatePay_debug = gatePay.debug) ? _gatePay_debug : false,
+        fiatCurrency: null != (_gatePay_fiatCurrency = gatePay.fiatCurrency) ? _gatePay_fiatCurrency : '',
+        clientSessionSecret: payment.clientSessionSecret,
+        paymentMethods: toMethodKey(payment.paymentMethods),
+        showLanguageSwitcher: null != (_payment_showLanguageSwitcher = payment.showLanguageSwitcher) ? _payment_showLanguageSwitcher : false
+    });
+}
+function getRuntimeConfig(gatePay, payment) {
+    var _payment_locale, _payment_theme;
+    return {
+        locale: null != (_payment_locale = payment.locale) ? _payment_locale : gatePay.locale,
+        theme: null != (_payment_theme = payment.theme) ? _payment_theme : gatePay.theme
+    };
+}
+const gate_pay_element_GatePayElement = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(function(param, ref) {
+    let { gatePay, payment, ...divProps } = param;
+    const containerRef = (0, external_react_namespaceObject.useRef)(null);
+    const elementRef = (0, external_react_namespaceObject.useRef)(null);
+    const runtimeConfigRef = (0, external_react_namespaceObject.useRef)({});
+    const callbacksRef = (0, external_react_namespaceObject.useRef)({});
+    callbacksRef.current = {
+        onReady: payment.onReady,
+        onProcessing: payment.onProcessing,
+        onSuccess: payment.onSuccess,
+        onCancel: payment.onCancel,
+        onExpired: payment.onExpired,
+        onSessionExpired: payment.onSessionExpired,
+        onError: payment.onError,
+        onStatusChange: payment.onStatusChange
+    };
+    const recreateKey = toRecreateKey(gatePay, payment);
+    const destroyElement = ()=>{
+        var _elementRef_current;
+        null == (_elementRef_current = elementRef.current) || _elementRef_current.destroy();
+        elementRef.current = null;
+    };
+    const mountElement = ()=>{
+        const container = containerRef.current;
+        if (!container) return;
+        destroyElement();
+        const runtimeConfig = getRuntimeConfig(gatePay, payment);
+        const gatePayInstance = (0, pay_js_namespaceObject.GatePay)({
+            ...gatePay,
+            locale: runtimeConfig.locale,
+            theme: runtimeConfig.theme
+        });
+        const paymentElement = gatePayInstance.createPaymentElement({
+            clientSessionSecret: payment.clientSessionSecret,
+            paymentMethods: payment.paymentMethods,
+            locale: runtimeConfig.locale,
+            theme: runtimeConfig.theme,
+            showLanguageSwitcher: payment.showLanguageSwitcher,
+            onReady: ()=>{
+                var _callbacksRef_current_onReady, _callbacksRef_current;
+                return null == (_callbacksRef_current_onReady = (_callbacksRef_current = callbacksRef.current).onReady) ? void 0 : _callbacksRef_current_onReady.call(_callbacksRef_current);
+            },
+            onProcessing: (detail)=>{
+                var _callbacksRef_current_onProcessing, _callbacksRef_current;
+                return null == (_callbacksRef_current_onProcessing = (_callbacksRef_current = callbacksRef.current).onProcessing) ? void 0 : _callbacksRef_current_onProcessing.call(_callbacksRef_current, detail);
+            },
+            onSuccess: (result)=>{
+                var _callbacksRef_current_onSuccess, _callbacksRef_current;
+                return null == (_callbacksRef_current_onSuccess = (_callbacksRef_current = callbacksRef.current).onSuccess) ? void 0 : _callbacksRef_current_onSuccess.call(_callbacksRef_current, result);
+            },
+            onCancel: ()=>{
+                var _callbacksRef_current_onCancel, _callbacksRef_current;
+                return null == (_callbacksRef_current_onCancel = (_callbacksRef_current = callbacksRef.current).onCancel) ? void 0 : _callbacksRef_current_onCancel.call(_callbacksRef_current);
+            },
+            onExpired: ()=>{
+                var _callbacksRef_current_onExpired, _callbacksRef_current;
+                return null == (_callbacksRef_current_onExpired = (_callbacksRef_current = callbacksRef.current).onExpired) ? void 0 : _callbacksRef_current_onExpired.call(_callbacksRef_current);
+            },
+            onSessionExpired: ()=>{
+                var _callbacksRef_current_onSessionExpired, _callbacksRef_current;
+                return null == (_callbacksRef_current_onSessionExpired = (_callbacksRef_current = callbacksRef.current).onSessionExpired) ? void 0 : _callbacksRef_current_onSessionExpired.call(_callbacksRef_current);
+            },
+            onError: (error)=>{
+                var _callbacksRef_current_onError, _callbacksRef_current;
+                return null == (_callbacksRef_current_onError = (_callbacksRef_current = callbacksRef.current).onError) ? void 0 : _callbacksRef_current_onError.call(_callbacksRef_current, error);
+            },
+            onStatusChange: (status, detail)=>{
+                var _callbacksRef_current_onStatusChange, _callbacksRef_current;
+                return null == (_callbacksRef_current_onStatusChange = (_callbacksRef_current = callbacksRef.current).onStatusChange) ? void 0 : _callbacksRef_current_onStatusChange.call(_callbacksRef_current, status, detail);
+            }
+        });
+        paymentElement.mount(container);
+        elementRef.current = paymentElement;
+        runtimeConfigRef.current = runtimeConfig;
+    };
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        mountElement();
+        return ()=>{
+            destroyElement();
+        };
+    }, [
+        recreateKey
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        var _elementRef_current;
+        const nextLocale = getRuntimeConfig(gatePay, payment).locale;
+        if (nextLocale === runtimeConfigRef.current.locale) return;
+        if (!nextLocale) return void mountElement();
+        null == (_elementRef_current = elementRef.current) || _elementRef_current.updateLocale(nextLocale);
+        runtimeConfigRef.current.locale = nextLocale;
+    }, [
+        gatePay.locale,
+        payment.locale
+    ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        var _elementRef_current;
+        const nextTheme = getRuntimeConfig(gatePay, payment).theme;
+        if (nextTheme === runtimeConfigRef.current.theme) return;
+        if (!nextTheme) return void mountElement();
+        null == (_elementRef_current = elementRef.current) || _elementRef_current.updateTheme(nextTheme);
+        runtimeConfigRef.current.theme = nextTheme;
+    }, [
+        gatePay.theme,
+        payment.theme
+    ]);
+    (0, external_react_namespaceObject.useImperativeHandle)(ref, ()=>({
+            destroy: ()=>{
+                destroyElement();
+            },
+            getInstance: ()=>elementRef.current,
+            updateLocale: (locale)=>{
+                var _elementRef_current;
+                null == (_elementRef_current = elementRef.current) || _elementRef_current.updateLocale(locale);
+                runtimeConfigRef.current.locale = locale;
+            },
+            updateTheme: (theme)=>{
+                var _elementRef_current;
+                null == (_elementRef_current = elementRef.current) || _elementRef_current.updateTheme(theme);
+                runtimeConfigRef.current.theme = theme;
+            }
+        }), []);
+    return /*#__PURE__*/ React.createElement("div", {
+        ref: containerRef,
+        ...divProps
+    });
+});
+exports.GatePayElement = __webpack_exports__.GatePayElement;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "GatePayElement"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/gate-pay-element.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { GatePayElementProps, GatePayElementRef } from './types';
+export declare const GatePayElement: import("react").ForwardRefExoticComponent<GatePayElementProps & import("react").RefAttributes<GatePayElementRef>>;
+//# sourceMappingURL=gate-pay-element.d.ts.map

package/dist/cjs/gate-pay-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gate-pay-element.d.ts","sourceRoot":"","sources":["../../src/gate-pay-element.tsx"],"names":[],"mappings":";AAaA,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AA6CrE,eAAO,MAAM,cAAc,mHAoHzB,CAAA"}

package/dist/cjs/index.cjs

@@ -0,0 +1,56 @@
+"use strict";
+"use client";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    PROTOCOL_VERSION: ()=>pay_js_namespaceObject.PROTOCOL_VERSION,
+    GatePayElement: ()=>external_gate_pay_element_cjs_namespaceObject.GatePayElement,
+    PROCESSING_PAYMENT_STATUSES: ()=>pay_js_namespaceObject.PROCESSING_PAYMENT_STATUSES,
+    isProcessingPaymentStatus: ()=>pay_js_namespaceObject.isProcessingPaymentStatus,
+    CheckoutBridge: ()=>pay_js_namespaceObject.CheckoutBridge,
+    CheckoutPageBridge: ()=>pay_js_namespaceObject.CheckoutPageBridge,
+    GatePay: ()=>pay_js_namespaceObject.GatePay
+});
+const pay_js_namespaceObject = require("@gatepayfe/pay-js");
+const external_gate_pay_element_cjs_namespaceObject = require("./gate-pay-element.cjs");
+exports.CheckoutBridge = __webpack_exports__.CheckoutBridge;
+exports.CheckoutPageBridge = __webpack_exports__.CheckoutPageBridge;
+exports.GatePay = __webpack_exports__.GatePay;
+exports.GatePayElement = __webpack_exports__.GatePayElement;
+exports.PROCESSING_PAYMENT_STATUSES = __webpack_exports__.PROCESSING_PAYMENT_STATUSES;
+exports.PROTOCOL_VERSION = __webpack_exports__.PROTOCOL_VERSION;
+exports.isProcessingPaymentStatus = __webpack_exports__.isProcessingPaymentStatus;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "CheckoutBridge",
+    "CheckoutPageBridge",
+    "GatePay",
+    "GatePayElement",
+    "PROCESSING_PAYMENT_STATUSES",
+    "PROTOCOL_VERSION",
+    "isProcessingPaymentStatus"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/index.d.ts

@@ -0,0 +1,5 @@
+export type { BridgeInitPayload, BridgeLocaleUpdatePayload, BridgeMessage, BridgeMessageType, BridgeResizePayload, BridgeThemeUpdatePayload, CashierType, CheckoutBridgeCallbacks, FiatCurrency, GatePayError, GatePayInstance, GatePayOptions, PaymentElementInstance, PaymentElementOptions, PaymentMethod, PaymentResult, PaymentStatus, PaymentStatusDetail, Theme, } from '@gatepayfe/pay-js';
+export type { GatePayElementProps, GatePayElementRef } from './types';
+export { CheckoutBridge, CheckoutPageBridge, GatePay, isProcessingPaymentStatus, PROCESSING_PAYMENT_STATUSES, PROTOCOL_VERSION, } from '@gatepayfe/pay-js';
+export { GatePayElement } from './gate-pay-element';
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAEA,YAAY,EACV,iBAAiB,EACjB,yBAAyB,EACzB,aAAa,EACb,iBAAiB,EACjB,mBAAmB,EACnB,wBAAwB,EACxB,WAAW,EACX,uBAAuB,EACvB,YAAY,EACZ,YAAY,EACZ,eAAe,EACf,cAAc,EACd,sBAAsB,EACtB,qBAAqB,EACrB,aAAa,EACb,aAAa,EACb,aAAa,EACb,mBAAmB,EACnB,KAAK,GACN,MAAM,mBAAmB,CAAA;AAC1B,YAAY,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAErE,OAAO,EACL,cAAc,EACd,kBAAkB,EAClB,OAAO,EACP,yBAAyB,EACzB,2BAA2B,EAC3B,gBAAgB,GACjB,MAAM,mBAAmB,CAAA;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/cjs/types.cjs

@@ -0,0 +1,18 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+for(var __rspack_i in __webpack_exports__)exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/types.d.ts

@@ -0,0 +1,13 @@
+import type { GatePayOptions, PaymentElementInstance, PaymentElementOptions, Theme } from '@gatepayfe/pay-js';
+import type { ComponentPropsWithoutRef } from 'react';
+export interface GatePayElementProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    gatePay: GatePayOptions;
+    payment: PaymentElementOptions;
+}
+export interface GatePayElementRef {
+    destroy: () => void;
+    getInstance: () => PaymentElementInstance | null;
+    updateLocale: (locale: string) => void;
+    updateTheme: (theme: Theme) => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/cjs/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAC7G,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAErD,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC5F,OAAO,EAAE,cAAc,CAAA;IACvB,OAAO,EAAE,qBAAqB,CAAA;CAC/B;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,WAAW,EAAE,MAAM,sBAAsB,GAAG,IAAI,CAAA;IAChD,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACpC"}

package/dist/esm/gate-pay-element.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { GatePayElementProps, GatePayElementRef } from './types';
+export declare const GatePayElement: import("react").ForwardRefExoticComponent<GatePayElementProps & import("react").RefAttributes<GatePayElementRef>>;
+//# sourceMappingURL=gate-pay-element.d.ts.map

package/dist/esm/gate-pay-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gate-pay-element.d.ts","sourceRoot":"","sources":["../../src/gate-pay-element.tsx"],"names":[],"mappings":";AAaA,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AA6CrE,eAAO,MAAM,cAAc,mHAoHzB,CAAA"}

package/dist/esm/gate-pay-element.js

@@ -0,0 +1,153 @@
+"use client";
+import { DEFAULT_GATE_PAY_BASE_URL, GatePay } from "@gatepayfe/pay-js";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+function toMethodKey(methods) {
+    var _ref;
+    return null != (_ref = null == methods ? void 0 : methods.join('|')) ? _ref : '';
+}
+function toRecreateKey(gatePay, payment) {
+    var _gatePay_baseUrl, _gatePay_debug, _gatePay_fiatCurrency, _payment_showLanguageSwitcher;
+    return JSON.stringify({
+        baseUrl: null != (_gatePay_baseUrl = gatePay.baseUrl) ? _gatePay_baseUrl : DEFAULT_GATE_PAY_BASE_URL,
+        clientId: gatePay.clientId,
+        debug: null != (_gatePay_debug = gatePay.debug) ? _gatePay_debug : false,
+        fiatCurrency: null != (_gatePay_fiatCurrency = gatePay.fiatCurrency) ? _gatePay_fiatCurrency : '',
+        clientSessionSecret: payment.clientSessionSecret,
+        paymentMethods: toMethodKey(payment.paymentMethods),
+        showLanguageSwitcher: null != (_payment_showLanguageSwitcher = payment.showLanguageSwitcher) ? _payment_showLanguageSwitcher : false
+    });
+}
+function getRuntimeConfig(gatePay, payment) {
+    var _payment_locale, _payment_theme;
+    return {
+        locale: null != (_payment_locale = payment.locale) ? _payment_locale : gatePay.locale,
+        theme: null != (_payment_theme = payment.theme) ? _payment_theme : gatePay.theme
+    };
+}
+const gate_pay_element_GatePayElement = /*#__PURE__*/ forwardRef(function(param, ref) {
+    let { gatePay, payment, ...divProps } = param;
+    const containerRef = useRef(null);
+    const elementRef = useRef(null);
+    const runtimeConfigRef = useRef({});
+    const callbacksRef = useRef({});
+    callbacksRef.current = {
+        onReady: payment.onReady,
+        onProcessing: payment.onProcessing,
+        onSuccess: payment.onSuccess,
+        onCancel: payment.onCancel,
+        onExpired: payment.onExpired,
+        onSessionExpired: payment.onSessionExpired,
+        onError: payment.onError,
+        onStatusChange: payment.onStatusChange
+    };
+    const recreateKey = toRecreateKey(gatePay, payment);
+    const destroyElement = ()=>{
+        var _elementRef_current;
+        null == (_elementRef_current = elementRef.current) || _elementRef_current.destroy();
+        elementRef.current = null;
+    };
+    const mountElement = ()=>{
+        const container = containerRef.current;
+        if (!container) return;
+        destroyElement();
+        const runtimeConfig = getRuntimeConfig(gatePay, payment);
+        const gatePayInstance = GatePay({
+            ...gatePay,
+            locale: runtimeConfig.locale,
+            theme: runtimeConfig.theme
+        });
+        const paymentElement = gatePayInstance.createPaymentElement({
+            clientSessionSecret: payment.clientSessionSecret,
+            paymentMethods: payment.paymentMethods,
+            locale: runtimeConfig.locale,
+            theme: runtimeConfig.theme,
+            showLanguageSwitcher: payment.showLanguageSwitcher,
+            onReady: ()=>{
+                var _callbacksRef_current_onReady, _callbacksRef_current;
+                return null == (_callbacksRef_current_onReady = (_callbacksRef_current = callbacksRef.current).onReady) ? void 0 : _callbacksRef_current_onReady.call(_callbacksRef_current);
+            },
+            onProcessing: (detail)=>{
+                var _callbacksRef_current_onProcessing, _callbacksRef_current;
+                return null == (_callbacksRef_current_onProcessing = (_callbacksRef_current = callbacksRef.current).onProcessing) ? void 0 : _callbacksRef_current_onProcessing.call(_callbacksRef_current, detail);
+            },
+            onSuccess: (result)=>{
+                var _callbacksRef_current_onSuccess, _callbacksRef_current;
+                return null == (_callbacksRef_current_onSuccess = (_callbacksRef_current = callbacksRef.current).onSuccess) ? void 0 : _callbacksRef_current_onSuccess.call(_callbacksRef_current, result);
+            },
+            onCancel: ()=>{
+                var _callbacksRef_current_onCancel, _callbacksRef_current;
+                return null == (_callbacksRef_current_onCancel = (_callbacksRef_current = callbacksRef.current).onCancel) ? void 0 : _callbacksRef_current_onCancel.call(_callbacksRef_current);
+            },
+            onExpired: ()=>{
+                var _callbacksRef_current_onExpired, _callbacksRef_current;
+                return null == (_callbacksRef_current_onExpired = (_callbacksRef_current = callbacksRef.current).onExpired) ? void 0 : _callbacksRef_current_onExpired.call(_callbacksRef_current);
+            },
+            onSessionExpired: ()=>{
+                var _callbacksRef_current_onSessionExpired, _callbacksRef_current;
+                return null == (_callbacksRef_current_onSessionExpired = (_callbacksRef_current = callbacksRef.current).onSessionExpired) ? void 0 : _callbacksRef_current_onSessionExpired.call(_callbacksRef_current);
+            },
+            onError: (error)=>{
+                var _callbacksRef_current_onError, _callbacksRef_current;
+                return null == (_callbacksRef_current_onError = (_callbacksRef_current = callbacksRef.current).onError) ? void 0 : _callbacksRef_current_onError.call(_callbacksRef_current, error);
+            },
+            onStatusChange: (status, detail)=>{
+                var _callbacksRef_current_onStatusChange, _callbacksRef_current;
+                return null == (_callbacksRef_current_onStatusChange = (_callbacksRef_current = callbacksRef.current).onStatusChange) ? void 0 : _callbacksRef_current_onStatusChange.call(_callbacksRef_current, status, detail);
+            }
+        });
+        paymentElement.mount(container);
+        elementRef.current = paymentElement;
+        runtimeConfigRef.current = runtimeConfig;
+    };
+    useEffect(()=>{
+        mountElement();
+        return ()=>{
+            destroyElement();
+        };
+    }, [
+        recreateKey
+    ]);
+    useEffect(()=>{
+        var _elementRef_current;
+        const nextLocale = getRuntimeConfig(gatePay, payment).locale;
+        if (nextLocale === runtimeConfigRef.current.locale) return;
+        if (!nextLocale) return void mountElement();
+        null == (_elementRef_current = elementRef.current) || _elementRef_current.updateLocale(nextLocale);
+        runtimeConfigRef.current.locale = nextLocale;
+    }, [
+        gatePay.locale,
+        payment.locale
+    ]);
+    useEffect(()=>{
+        var _elementRef_current;
+        const nextTheme = getRuntimeConfig(gatePay, payment).theme;
+        if (nextTheme === runtimeConfigRef.current.theme) return;
+        if (!nextTheme) return void mountElement();
+        null == (_elementRef_current = elementRef.current) || _elementRef_current.updateTheme(nextTheme);
+        runtimeConfigRef.current.theme = nextTheme;
+    }, [
+        gatePay.theme,
+        payment.theme
+    ]);
+    useImperativeHandle(ref, ()=>({
+            destroy: ()=>{
+                destroyElement();
+            },
+            getInstance: ()=>elementRef.current,
+            updateLocale: (locale)=>{
+                var _elementRef_current;
+                null == (_elementRef_current = elementRef.current) || _elementRef_current.updateLocale(locale);
+                runtimeConfigRef.current.locale = locale;
+            },
+            updateTheme: (theme)=>{
+                var _elementRef_current;
+                null == (_elementRef_current = elementRef.current) || _elementRef_current.updateTheme(theme);
+                runtimeConfigRef.current.theme = theme;
+            }
+        }), []);
+    return /*#__PURE__*/ React.createElement("div", {
+        ref: containerRef,
+        ...divProps
+    });
+});
+export { gate_pay_element_GatePayElement as GatePayElement };

package/dist/esm/index.d.ts

@@ -0,0 +1,5 @@
+export type { BridgeInitPayload, BridgeLocaleUpdatePayload, BridgeMessage, BridgeMessageType, BridgeResizePayload, BridgeThemeUpdatePayload, CashierType, CheckoutBridgeCallbacks, FiatCurrency, GatePayError, GatePayInstance, GatePayOptions, PaymentElementInstance, PaymentElementOptions, PaymentMethod, PaymentResult, PaymentStatus, PaymentStatusDetail, Theme, } from '@gatepayfe/pay-js';
+export type { GatePayElementProps, GatePayElementRef } from './types';
+export { CheckoutBridge, CheckoutPageBridge, GatePay, isProcessingPaymentStatus, PROCESSING_PAYMENT_STATUSES, PROTOCOL_VERSION, } from '@gatepayfe/pay-js';
+export { GatePayElement } from './gate-pay-element';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAEA,YAAY,EACV,iBAAiB,EACjB,yBAAyB,EACzB,aAAa,EACb,iBAAiB,EACjB,mBAAmB,EACnB,wBAAwB,EACxB,WAAW,EACX,uBAAuB,EACvB,YAAY,EACZ,YAAY,EACZ,eAAe,EACf,cAAc,EACd,sBAAsB,EACtB,qBAAqB,EACrB,aAAa,EACb,aAAa,EACb,aAAa,EACb,mBAAmB,EACnB,KAAK,GACN,MAAM,mBAAmB,CAAA;AAC1B,YAAY,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAErE,OAAO,EACL,cAAc,EACd,kBAAkB,EAClB,OAAO,EACP,yBAAyB,EACzB,2BAA2B,EAC3B,gBAAgB,GACjB,MAAM,mBAAmB,CAAA;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/esm/index.js

@@ -0,0 +1,4 @@
+"use client";
+import { CheckoutBridge, CheckoutPageBridge, GatePay, PROCESSING_PAYMENT_STATUSES, PROTOCOL_VERSION, isProcessingPaymentStatus } from "@gatepayfe/pay-js";
+import { GatePayElement } from "./gate-pay-element.js";
+export { CheckoutBridge, CheckoutPageBridge, GatePay, GatePayElement, PROCESSING_PAYMENT_STATUSES, PROTOCOL_VERSION, isProcessingPaymentStatus };

package/dist/esm/types.d.ts

@@ -0,0 +1,13 @@
+import type { GatePayOptions, PaymentElementInstance, PaymentElementOptions, Theme } from '@gatepayfe/pay-js';
+import type { ComponentPropsWithoutRef } from 'react';
+export interface GatePayElementProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    gatePay: GatePayOptions;
+    payment: PaymentElementOptions;
+}
+export interface GatePayElementRef {
+    destroy: () => void;
+    getInstance: () => PaymentElementInstance | null;
+    updateLocale: (locale: string) => void;
+    updateTheme: (theme: Theme) => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/esm/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAC7G,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAErD,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC5F,OAAO,EAAE,cAAc,CAAA;IACvB,OAAO,EAAE,qBAAqB,CAAA;CAC/B;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,WAAW,EAAE,MAAM,sBAAsB,GAAG,IAAI,CAAA;IAChD,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACpC"}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@gatepayfe/pay-js-react",
+  "version": "0.0.1",
+  "description": "React bindings for @gatepayfe/pay-js embedded cashier SDK",
+  "type": "module",
+  "main": "dist/cjs/index.cjs",
+  "module": "dist/esm/index.js",
+  "types": "dist/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/index.d.ts",
+        "default": "./dist/cjs/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "@gatepayfe/pay-js": "0.0.1"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@rslib/core": "^0.18.2",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "typescript": "5.0.4"
+  },
+  "scripts": {
+    "build": "rslib build",
+    "build:test": "rslib build",
+    "build:pre": "rslib build",
+    "build:prod": "rslib build",
+    "dev": "rslib build --watch",
+    "check": "biome check --write --no-errors-on-unmatched",
+    "check:staged": "pnpm run check --staged"
+  }
+}