@monei-js/components 1.7.10 → 2.1.0

package/README.md

@@ -1,16 +1,107 @@
-# MONEI Components
+# @monei-js/components
 
-MONEI UI Components enable you to collect sensitive payment information using customizable UI components.
+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.
 
-UI components include features like:
+## Framework Packages
 
-Formatting card information automatically as it’s entered
-Translating placeholders into your customer’s preferred language
-Using responsive design to fit the width of your customer’s screen or mobile device
-Customizing the styling to match the look and feel of your checkout flow
+For framework-specific components with idiomatic APIs and full type support:
 
-For creating payments on your server, use [@monei-js/node-sdk](https://github.com/MONEI/monei-node-sdk)
+| 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
+
+```bash
+npm install @monei-js/components
+```
+
+Or load via CDN:
+
+```html
+<script src="https://js.monei.com/v3/monei.js"></script>
+```
+
+## Components
+
+| Component        | Description                                  |
+| ---------------- | -------------------------------------------- |
+| `CardInput`      | Secure card number/expiry/CVC input (iframe) |
+| `PaymentModal`   | Full-screen payment flow modal               |
+| `Bizum`          | Bizum button + phone verification modal      |
+| `PayPal`         | PayPal checkout button                       |
+| `PaymentRequest` | Apple Pay / browser Payment Request button   |
+
+## Quick Start (Vanilla JS)
+
+```js
+import {CardInput, confirmPayment} from '@monei-js/components';
+
+const cardInput = CardInput({
+  paymentId: 'pay_...',
+  onChange({isTouched, error, cardType}) {
+    // handle validation state
+  }
+});
+cardInput.render('#card-input');
+
+// Tokenize and confirm
+const {token} = await cardInput.submit();
+const result = await confirmPayment({paymentId: 'pay_...', paymentToken: token});
+```
+
+## API
+
+Exported via `api` namespace:
+
+- `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
+
+## Migrating from `createToken`
+
+Before:
+
+```js
+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).
 
 ## Documentation
 
-Check full documentation in our [Documentation portal](https://docs.monei.com/docs/monei-js-overview)
+Full docs: [docs.monei.com/docs/monei-js-overview](https://docs.monei.com/docs/monei-js-overview)
+
+## License
+
+MIT

package/dist/chunk.js

@@ -0,0 +1,13 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __exportAll as t };