@monei-js/components 2.0.0 → 2.1.0

package/README.md

@@ -1,6 +1,19 @@
 # @monei-js/components
 
-MONEI UI Components — drop-in payment UI for the web. Renders secure iframes for card input, PayPal, Bizum, Google Pay, Apple Pay, and a full payment modal. Works with any framework or vanilla JS.
+MONEI UI Components — drop-in payment UI for the web. Renders secure iframes for card input, PayPal, Bizum, Apple Pay, and a full payment modal. Works with any framework or vanilla JS.
+
+## Framework Packages
+
+For framework-specific components with idiomatic APIs and full type support:
+
+| Package                        | Framework   | Install                              |
+| ------------------------------ | ----------- | ------------------------------------ |
+| `@monei-js/react-components`   | React 17+   | `npm i @monei-js/react-components`   |
+| `@monei-js/vue-components`     | Vue 3.3+    | `npm i @monei-js/vue-components`     |
+| `@monei-js/angular-components` | Angular 14+ | `npm i @monei-js/angular-components` |
+| `@monei-js/svelte-components`  | Svelte 5+   | `npm i @monei-js/svelte-components`  |
+
+All framework packages require `@monei-js/components` as a peer dependency for API functions (`confirmPayment`, `api`, etc.).
 
 ## Install
 
@@ -22,28 +35,23 @@ Or load via CDN:
 | `PaymentModal`   | Full-screen payment flow modal               |
 | `Bizum`          | Bizum button + phone verification modal      |
 | `PayPal`         | PayPal checkout button                       |
-| `GooglePay`      | Google Pay button                            |
 | `PaymentRequest` | Apple Pay / browser Payment Request button   |
 
-## Quick Start
+## Quick Start (Vanilla JS)
 
 ```js
-import {CardInput, createToken, confirmPayment} from '@monei-js/components';
+import {CardInput, confirmPayment} from '@monei-js/components';
 
-// Render card input
 const cardInput = CardInput({
   paymentId: 'pay_...',
   onChange({isTouched, error, cardType}) {
     // handle validation state
-  },
-  onLoad() {
-    // component ready
   }
 });
 cardInput.render('#card-input');
 
 // Tokenize and confirm
-const {token} = await createToken(cardInput);
+const {token} = await cardInput.submit();
 const result = await confirmPayment({paymentId: 'pay_...', paymentToken: token});
 ```
 
@@ -51,21 +59,41 @@ const result = await confirmPayment({paymentId: 'pay_...', paymentToken: token})
 
 Exported via `api` namespace:
 
-- `createToken(request)` — tokenize a payment method (card, PayPal, Google Pay, Apple Pay, Bizum)
 - `confirmPayment({paymentId, ...})` — confirm a payment with token
 - `getPaymentMethods({accountId | paymentId})` — list available payment methods
 - `getPayment(paymentId)` — fetch payment status
 - `createPayment({accountId, amount, currency, ...})` — create a client-side payment (POS)
 - `sendPaymentReceipt({paymentId, customerEmail, ...})` — send receipt email
 
-## Framework Drivers
+## Migrating from `createToken`
 
-Built-in rendering drivers for React, Vue 3, and Angular via `.driver()`:
+Before:
 
 ```js
-const MoneiCardInput = CardInput.driver('react');
+import {CardInput, createToken} from '@monei-js/components';
+
+const cardInput = CardInput({paymentId: 'pay_...'});
+cardInput.render('#card-input');
+const {token} = await createToken(cardInput);
 ```
 
+After (instance `submit()`):
+
+```js
+import {CardInput} from '@monei-js/components';
+
+const cardInput = CardInput({paymentId: 'pay_...'});
+cardInput.render('#card-input');
+const {token} = await cardInput.submit({cardholderName: 'John'});
+```
+
+`createToken()` still works but logs a deprecation warning.
+
+## Deprecated APIs
+
+- **`.driver()`** — Use the framework-specific packages above instead. `.driver('react')` → `@monei-js/react-components`, `.driver('vue3')` → `@monei-js/vue-components`, `.driver('angular')` → `@monei-js/angular-components`.
+- **`createToken(instance)`** — Use `instance.submit()` instead (see above).
+
 ## Server-Side
 
 For creating payments on your server, use [@monei-js/node-sdk](https://github.com/MONEI/monei-node-sdk).

package/dist/index.cjs

@@ -182,7 +182,7 @@ const validateComponentProps = ({ props }) => {
 };
 //#endregion
 //#region src/config.ts
-const stage = {}.env?.STAGE || "local";
+const stage = {}.env?.STAGE || "prod";
 const domain = {}.env?.DOMAIN || "http://localhost:3001";
 const version = {}.env?.VERSION || "v1";
 const globalConfig = {
@@ -1037,6 +1037,16 @@ function attachRenderMethods(instance, options) {
 }
 //#endregion
 //#region src/bridge/create-component.ts
+const driverPackageMap = {
+	react: "@monei-js/react-components",
+	vue3: "@monei-js/vue-components",
+	angular: "@monei-js/angular-components"
+};
+function warnDriverDeprecation(name) {
+	const pkg = driverPackageMap[name];
+	const replacement = pkg ? `Use ${pkg} instead.` : "";
+	console.warn(`[MONEI] .driver('${name}') is deprecated. ${replacement}`.trim());
+}
 /**
 * Normalize aliased prop names to canonical names.
 * Aliases define alternative INPUT names: { style: 'innerStyle' } means
@@ -1073,6 +1083,7 @@ function createComponent(options) {
 			else this.props = { ...normalizedProps };
 			if (options.validate) options.validate({ props: this.props });
 			attachRenderMethods(this, options);
+			if (options.submit) this.submit = options.submit(this);
 		}
 		async render(_container) {
 			throw new Error("render() not attached");
@@ -1087,6 +1098,7 @@ function createComponent(options) {
 			throw new Error("destroy() not attached");
 		}
 		driver(name, deps) {
+			warnDriverDeprecation(name);
 			return resolveDriver(name, Component, deps);
 		}
 	}
@@ -1096,6 +1108,7 @@ function createComponent(options) {
 	}
 	ComponentWrapper.prototype = Component.prototype;
 	ComponentWrapper.driver = function(name, deps) {
+		warnDriverDeprecation(name);
 		return resolveDriver(name, ComponentWrapper, deps);
 	};
 	Component.prototype.__options = options;
@@ -1260,6 +1273,7 @@ const getCreateTokenFunction = (ref) => {
 	throw new Error("Index is not registered");
 };
 const createToken = async (component, options) => {
+	console.warn("[MONEI] Standalone createToken() is deprecated. Use cardInput.submit() instead.");
 	const { data } = await getCreateTokenFunction(component)(options);
 	return data;
 };
@@ -1283,6 +1297,12 @@ const CardInput = createComponent({
 		type: "function"
 	} },
 	validate: validateComponentProps,
+	submit: (instance) => async (opts) => {
+		const createTokenFn = instance.state?.__createToken;
+		if (!createTokenFn) throw new Error("CardInput is not rendered or connection is pending — call render() first");
+		const { data } = await createTokenFn(opts);
+		return data;
+	},
 	containerTemplate: (params) => {
 		params.state.__createToken = async (data = {}) => {
 			const callChild = params.state.__callChild;

package/dist/index.d.cts

@@ -204,32 +204,6 @@ declare const validateComponentProps: ({
   props: any;
 }) => void;
 //#endregion
-//#region src/bridge/types.d.ts
-type Cancelable = {
-  cancel: () => void;
-};
-type EventEmitterType = {
-  on: (eventName: string, handler: (...args: any[]) => void) => Cancelable;
-  once: (eventName: string, handler: (...args: any[]) => void) => Cancelable;
-  trigger: (eventName: string, ...args: any[]) => void;
-  off: (eventName: string, handler: (...args: any[]) => void) => void;
-  destroy: () => void;
-};
-interface BridgeComponent<P> {
-  render: (container?: string | HTMLElement) => Promise<void>;
-  updateProps: (props: Partial<P>) => Promise<void>;
-  close: () => Promise<void>;
-  destroy: () => Promise<void>;
-  state: Record<string, any>;
-  event: EventEmitterType;
-  props: P;
-  driver: (name: string, deps?: Record<string, any>) => any;
-}
-interface BridgeComponentConstructor<P> {
-  new (props: P): BridgeComponent<P>;
-  driver: (name: string, deps?: Record<string, any>) => any;
-}
-//#endregion
 //#region src/payment-modal/types.d.ts
 type Style = {
   width: string;
@@ -503,8 +477,52 @@ type Config = {
 };
 declare const config: Config;
 //#endregion
+//#region src/bridge/types.d.ts
+type Cancelable = {
+  cancel: () => void;
+};
+type EventEmitterType = {
+  on: (eventName: string, handler: (...args: any[]) => void) => Cancelable;
+  once: (eventName: string, handler: (...args: any[]) => void) => Cancelable;
+  trigger: (eventName: string, ...args: any[]) => void;
+  off: (eventName: string, handler: (...args: any[]) => void) => void;
+  destroy: () => void;
+};
+interface BridgeComponent<P> {
+  render: (container?: string | HTMLElement) => Promise<void>;
+  updateProps: (props: Partial<P>) => Promise<void>;
+  close: () => Promise<void>;
+  destroy: () => Promise<void>;
+  submit?: (options?: any) => Promise<any>;
+  state: Record<string, any>;
+  event: EventEmitterType;
+  props: P;
+  driver: (name: string, deps?: Record<string, any>) => any;
+}
+interface BridgeComponentConstructor<P> {
+  new (props: P): BridgeComponent<P>;
+  driver: (name: string, deps?: Record<string, any>) => any;
+}
+//#endregion
+//#region src/framework-types.d.ts
+/** Public CardInput props — excludes internal bridge props */
+type CardInputComponentProps = Omit<CardInputProps, 'ref' | 'onProps' | 'innerStyle' | 'orderId'>;
+/** Public Bizum props — excludes internal bridge props */
+type BizumComponentProps = Omit<BizumProps, 'onProps'>;
+/** Public PayPal props — excludes internal bridge props */
+type PayPalComponentProps = Omit<PayPalProps, 'onProps'>;
+/** Public PaymentRequest props — excludes internal bridge props */
+type PaymentRequestComponentProps = Omit<PaymentRequestProps, 'onProps'>;
+/** Imperative handle for CardInput ref (framework packages) */
+type CardInputHandle = {
+  submit(options?: any): Promise<{
+    token?: string;
+    error?: string;
+  }>;
+};
+//#endregion
 //#region src/index.d.ts
 declare const api: typeof api_d_exports;
 declare const utils: typeof utils_d_exports;
 //#endregion
-export { Address, BillingDetails, Bizum, BizumModal, BizumModalProps, BizumProps, CardBrand, CardInput, CardInputOnChangeEvent, CardInputProps, CardInputStyle, ConfirmPaymentParams, CreateApplePaySessionRequest, CreatePaymentRequest, CreateTokenRequest, CreateTokenResponse, Customer, GetPaymentMethodsRequest, GetPaymentMethodsResponse, GooglePay, GooglePayProps, NextActionType, PayPal, PayPalProps, PaymentMethod, PaymentModal, PaymentModalProps, PaymentRequest, PaymentRequestProps, PaymentResult, SendPaymentReceiptRequest, TransactionType, ValidateBizumPhoneRequest, api, config, confirmPayment, createToken, utils };
+export { Address, BillingDetails, Bizum, BizumComponentProps, BizumModal, BizumModalProps, BizumProps, type BridgeComponent, type BridgeComponentConstructor, CardBrand, CardInput, CardInputComponentProps, CardInputHandle, CardInputOnChangeEvent, CardInputProps, CardInputStyle, ConfirmPaymentParams, CreateApplePaySessionRequest, CreatePaymentRequest, CreateTokenRequest, CreateTokenResponse, Customer, GetPaymentMethodsRequest, GetPaymentMethodsResponse, GooglePay, GooglePayProps, NextActionType, PayPal, PayPalComponentProps, PayPalProps, PaymentMethod, PaymentModal, PaymentModalProps, PaymentRequest, PaymentRequestComponentProps, PaymentRequestProps, PaymentResult, SendPaymentReceiptRequest, TransactionType, ValidateBizumPhoneRequest, api, config, confirmPayment, createToken, utils };

package/dist/index.d.ts

@@ -202,32 +202,6 @@ declare const validateComponentProps: ({
   props: any;
 }) => void;
 //#endregion
-//#region src/bridge/types.d.ts
-type Cancelable = {
-  cancel: () => void;
-};
-type EventEmitterType = {
-  on: (eventName: string, handler: (...args: any[]) => void) => Cancelable;
-  once: (eventName: string, handler: (...args: any[]) => void) => Cancelable;
-  trigger: (eventName: string, ...args: any[]) => void;
-  off: (eventName: string, handler: (...args: any[]) => void) => void;
-  destroy: () => void;
-};
-interface BridgeComponent<P> {
-  render: (container?: string | HTMLElement) => Promise<void>;
-  updateProps: (props: Partial<P>) => Promise<void>;
-  close: () => Promise<void>;
-  destroy: () => Promise<void>;
-  state: Record<string, any>;
-  event: EventEmitterType;
-  props: P;
-  driver: (name: string, deps?: Record<string, any>) => any;
-}
-interface BridgeComponentConstructor<P> {
-  new (props: P): BridgeComponent<P>;
-  driver: (name: string, deps?: Record<string, any>) => any;
-}
-//#endregion
 //#region src/payment-modal/types.d.ts
 type Style = {
   width: string;
@@ -501,8 +475,52 @@ type Config = {
 };
 declare const config: Config;
 //#endregion
+//#region src/bridge/types.d.ts
+type Cancelable = {
+  cancel: () => void;
+};
+type EventEmitterType = {
+  on: (eventName: string, handler: (...args: any[]) => void) => Cancelable;
+  once: (eventName: string, handler: (...args: any[]) => void) => Cancelable;
+  trigger: (eventName: string, ...args: any[]) => void;
+  off: (eventName: string, handler: (...args: any[]) => void) => void;
+  destroy: () => void;
+};
+interface BridgeComponent<P> {
+  render: (container?: string | HTMLElement) => Promise<void>;
+  updateProps: (props: Partial<P>) => Promise<void>;
+  close: () => Promise<void>;
+  destroy: () => Promise<void>;
+  submit?: (options?: any) => Promise<any>;
+  state: Record<string, any>;
+  event: EventEmitterType;
+  props: P;
+  driver: (name: string, deps?: Record<string, any>) => any;
+}
+interface BridgeComponentConstructor<P> {
+  new (props: P): BridgeComponent<P>;
+  driver: (name: string, deps?: Record<string, any>) => any;
+}
+//#endregion
+//#region src/framework-types.d.ts
+/** Public CardInput props — excludes internal bridge props */
+type CardInputComponentProps = Omit<CardInputProps, 'ref' | 'onProps' | 'innerStyle' | 'orderId'>;
+/** Public Bizum props — excludes internal bridge props */
+type BizumComponentProps = Omit<BizumProps, 'onProps'>;
+/** Public PayPal props — excludes internal bridge props */
+type PayPalComponentProps = Omit<PayPalProps, 'onProps'>;
+/** Public PaymentRequest props — excludes internal bridge props */
+type PaymentRequestComponentProps = Omit<PaymentRequestProps, 'onProps'>;
+/** Imperative handle for CardInput ref (framework packages) */
+type CardInputHandle = {
+  submit(options?: any): Promise<{
+    token?: string;
+    error?: string;
+  }>;
+};
+//#endregion
 //#region src/index.d.ts
 declare const api: typeof api_d_exports;
 declare const utils: typeof utils_d_exports;
 //#endregion
-export { Address, BillingDetails, Bizum, BizumModal, BizumModalProps, BizumProps, CardBrand, CardInput, CardInputOnChangeEvent, CardInputProps, CardInputStyle, ConfirmPaymentParams, CreateApplePaySessionRequest, CreatePaymentRequest, CreateTokenRequest, CreateTokenResponse, Customer, GetPaymentMethodsRequest, GetPaymentMethodsResponse, GooglePay, GooglePayProps, NextActionType, PayPal, PayPalProps, PaymentMethod, PaymentModal, PaymentModalProps, PaymentRequest, PaymentRequestProps, PaymentResult, SendPaymentReceiptRequest, TransactionType, ValidateBizumPhoneRequest, api, config, confirmPayment, createToken, utils };
+export { Address, BillingDetails, Bizum, BizumComponentProps, BizumModal, BizumModalProps, BizumProps, type BridgeComponent, type BridgeComponentConstructor, CardBrand, CardInput, CardInputComponentProps, CardInputHandle, CardInputOnChangeEvent, CardInputProps, CardInputStyle, ConfirmPaymentParams, CreateApplePaySessionRequest, CreatePaymentRequest, CreateTokenRequest, CreateTokenResponse, Customer, GetPaymentMethodsRequest, GetPaymentMethodsResponse, GooglePay, GooglePayProps, NextActionType, PayPal, PayPalComponentProps, PayPalProps, PaymentMethod, PaymentModal, PaymentModalProps, PaymentRequest, PaymentRequestComponentProps, PaymentRequestProps, PaymentResult, SendPaymentReceiptRequest, TransactionType, ValidateBizumPhoneRequest, api, config, confirmPayment, createToken, utils };

package/dist/index.js

@@ -170,7 +170,7 @@ const validateComponentProps = ({ props }) => {
 };
 //#endregion
 //#region src/config.ts
-const stage = import.meta.env?.STAGE || "local";
+const stage = import.meta.env?.STAGE || "prod";
 const domain = import.meta.env?.DOMAIN || "http://localhost:3001";
 const version = import.meta.env?.VERSION || "v1";
 const globalConfig = {
@@ -1025,6 +1025,16 @@ function attachRenderMethods(instance, options) {
 }
 //#endregion
 //#region src/bridge/create-component.ts
+const driverPackageMap = {
+	react: "@monei-js/react-components",
+	vue3: "@monei-js/vue-components",
+	angular: "@monei-js/angular-components"
+};
+function warnDriverDeprecation(name) {
+	const pkg = driverPackageMap[name];
+	const replacement = pkg ? `Use ${pkg} instead.` : "";
+	console.warn(`[MONEI] .driver('${name}') is deprecated. ${replacement}`.trim());
+}
 /**
 * Normalize aliased prop names to canonical names.
 * Aliases define alternative INPUT names: { style: 'innerStyle' } means
@@ -1061,6 +1071,7 @@ function createComponent(options) {
 			else this.props = { ...normalizedProps };
 			if (options.validate) options.validate({ props: this.props });
 			attachRenderMethods(this, options);
+			if (options.submit) this.submit = options.submit(this);
 		}
 		async render(_container) {
 			throw new Error("render() not attached");
@@ -1075,6 +1086,7 @@ function createComponent(options) {
 			throw new Error("destroy() not attached");
 		}
 		driver(name, deps) {
+			warnDriverDeprecation(name);
 			return resolveDriver(name, Component, deps);
 		}
 	}
@@ -1084,6 +1096,7 @@ function createComponent(options) {
 	}
 	ComponentWrapper.prototype = Component.prototype;
 	ComponentWrapper.driver = function(name, deps) {
+		warnDriverDeprecation(name);
 		return resolveDriver(name, ComponentWrapper, deps);
 	};
 	Component.prototype.__options = options;
@@ -1248,6 +1261,7 @@ const getCreateTokenFunction = (ref) => {
 	throw new Error("Index is not registered");
 };
 const createToken = async (component, options) => {
+	console.warn("[MONEI] Standalone createToken() is deprecated. Use cardInput.submit() instead.");
 	const { data } = await getCreateTokenFunction(component)(options);
 	return data;
 };
@@ -1271,6 +1285,12 @@ const CardInput = createComponent({
 		type: "function"
 	} },
 	validate: validateComponentProps,
+	submit: (instance) => async (opts) => {
+		const createTokenFn = instance.state?.__createToken;
+		if (!createTokenFn) throw new Error("CardInput is not rendered or connection is pending — call render() first");
+		const { data } = await createTokenFn(opts);
+		return data;
+	},
 	containerTemplate: (params) => {
 		params.state.__createToken = async (data = {}) => {
 			const callChild = params.state.__callChild;