xendit-components-web 0.0.10 → 0.0.12

package/CHANGELOG.md

@@ -2,15 +2,38 @@
 
 No unreleased changes.
 
+# 0.0.12
+
+### Bug fixes
+
+- Fixed a bug where the credit card expiry field would not insert a slash if the user pasted the expiry date without a slash.
+- Fixed poor UX when typing a slash in the credit card expiry field.
+- Allow card expiry up to 2099
+
+# 0.0.11
+
+### Notable
+
+Disabled Google Translate using the `translate=no` attribute as it causes issues.
+
+Added new public method `pollImmediately` to immediently check for updates.
+
+Changed the layout of the default action container.
+
+### Bug fixes
+
+- Fixed UX bugs in the dropdown widget.
+- Prevent auto-updating the phone number country code if the user already typed a phone number.
+
 # 0.0.10
 
-## Bug fixes
+### Bug fixes
 
 Fixed npm publish.
 
 # 0.0.9
 
-## Bug fixes
+### Bug fixes
 
 Missing `.d.ts` file is restored.
 

package/README.md

@@ -1,8 +1,12 @@
 # xendit-components-web
 
-Xendit Components allows you to accept payments directly on your website using the Xendit Sessions API.
+[![npm badge](https://img.shields.io/npm/v/xendit-components-web)](https://www.npmjs.com/package/xendit-components-web) [![build status badge](https://img.shields.io/github/actions/workflow/status/xendit/xendit-components-web/build-and-test.yml)](https://github.com/xendit/xendit-components-web/actions/workflows/build-and-test.yml?query=branch%3Amain) [![coverage badge](https://img.shields.io/codecov/c/github/xendit/xendit-components-web)](https://app.codecov.io/gh/xendit/xendit-components-web)
 
-This SDK's role is to take a Session (created on your server using the Xendit Sessions API) and render a payment UI, and allow you to customize the UI to match your site's look & feel.
+With Xendit Components, you can build a checkout experience tightly integrated into your site, powered by the Xendit Sessions API.
+
+This SDK provides UI components for payment method selection, user input (e.g. credit cards), and user actions (e.g. 3DS), all of which can be customized to match your site's look & feel.
+
+View a live demo [here](https://demo-store.xendit.co/) by choosing "Xendit Components". View the demo source code [here](https://github.com/xendit/demo-store/tree/main/src/integrations).
 
 ## Installation
 
@@ -15,10 +19,10 @@ npm install xendit-components-web --save
 Or load it directly from our CDN:
 
 ```html
-<script src="https://assets.xendit.co/components/v0.0.10/index.umd.js"></script>
+<script src="https://assets.xendit.co/components/v0.0.12/index.umd.js"></script>
 ```
 
-Our npm package includes TypeScript types. If you're using the CDN, download type declarations from `https://assets.xendit.co/components/v0.0.10/index.d.ts`
+Our npm package includes TypeScript types. You also download the [.d.ts file](https://assets.xendit.co/components/v0.0.12/index.d.ts) directly.
 
 ## Sessions
 
@@ -36,11 +40,11 @@ Two types of sessions are available:
 
 First, initialize the SDK either with either:
 
-- `XenditComponentsTest` for frontend development or unit tests
-- `XenditComponents`, for production, which requires a `componentsSdkKey`. That key comes from the session object you create on your server. Make an endpoint that creates a session for the user's current transaction, return the `components_sdk_key` to the client, and pass it into the constructor.
+- Use `XenditComponentsTest` to use mock payment methods for development and testing.
+- Use `XenditComponents` to connect to the Xendit backend (including Xendit's test mode). This requires a `componentsSdkKey` option, which you can get by calling the Create Session endpoint. Create a session from your server, passing the `components_sdk_key` property back to your frontend.
 
 ```typescript
-// For frontend development, use XenditComponentsTest
+// For frontend development, use XenditComponentsTest, this provides built-in mock payment methods
 const components: XenditComponents = new XenditComponentsTest({});
 // For production or e2e testing, use XenditComponents, passing in the components_sdk_key from the Session object
 const components: XenditComponents = new XenditComponents({ componentsSdkKey });
@@ -69,11 +73,9 @@ components.addEventListener("session-expired-or-canceled", () => {
 
 ### `XenditComponents` and `XenditComponentsTest`
 
-The constructor.
-
-For production and e2e testing, you need to pass the `componentsSdkKey`, which you can get when you create a Session on your server.
+Constructor functions.
 
-For development and unit testing, use `XenditComponentsTest`, which uses mock data and doesn't connect to Xendit servers.
+Both have the same API. `XenditComponents` will connect to Xendit servers, while `XenditComponentsTest` provides mock payment channels.
 
 ### `createChannelPickerComponent`
 
@@ -112,7 +114,7 @@ your own channel selection UI. Each channel has a `uiGroup` property which match
 ```typescript
 const channel = components.getActiveChannels({ filter: "CARDS" })[0];
 if (channel) {
-  const htmlElement = components.createChannelPickerComponent(channel);
+  const htmlElement = components.createChannelComponent(channel);
   myContainer.replaceChildren(htmlElement);
 }
 ```
@@ -129,7 +131,11 @@ values the user enters into any form fields. If you don't want that, use `destro
 
 ```typescript
 components.addEventListener("action-begin", () => {
-  const htmlElement = components.createActionContainerComponent();
+  const htmlElement = components.createActionContainerComponent({
+    qrCode: {
+      qrCodeOnly: true,
+    },
+  });
   myActionContainer.replaceChildren(htmlElement);
 });
 ```
@@ -226,6 +232,14 @@ if (channel) {
 
 Makes the provided channel the current channel.
 
+### `pollImmediately`
+
+```typescript
+components.pollImmediately();
+```
+
+Immediately poll for the status of a submission. Only applicable while a submission is ongoing. Useful for handling payment affirmation (e.g. I have made the payment) by the user.
+
 ## Events
 
 ### `init`

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "xendit-components-web",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "Xendit frontend payment components SDK",
   "type": "module",
   "author": "Xendit",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/xendit/xendit-components-web"
+  },
   "keywords": [
     "xendit",
     "payment",
@@ -50,16 +54,15 @@
   "dependencies": {
     "card-validator": "^10.0.3",
     "classnames": "^2.5.1",
-    "credit-card-type": "^10.1.0",
-    "i18next": "^25.6.3",
-    "libphonenumber-js": "^1.12.29",
-    "preact": "^10.27.2",
-    "react-circle-flags": "^0.0.24",
+    "i18next": "^25.8.0",
+    "libphonenumber-js": "^1.12.35",
+    "preact": "^10.28.2",
+    "qrcode": "^1.5.4",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.1",
-    "@microsoft/api-extractor": "^7.55.1",
+    "@eslint/js": "^9.39.2",
+    "@microsoft/api-extractor": "^7.55.2",
     "@preact/preset-vite": "^2.10.2",
     "@rollup/plugin-alias": "^6.0.0",
     "@rollup/plugin-commonjs": "^29.0.0",
@@ -73,19 +76,20 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/mime-types": "^3.0.1",
     "@types/node": "^24.10.1",
-    "@vitest/coverage-v8": "4.0.14",
-    "eslint": "^9.39.1",
+    "@types/qrcode": "^1.5.6",
+    "@vitest/coverage-v8": "4.0.17",
+    "eslint": "^9.39.2",
     "eslint-plugin-react-hooks": "^7.0.1",
     "husky": "^9.1.7",
-    "jsdom": "^27.2.0",
+    "jsdom": "^27.4.0",
     "lint-staged": "^16.2.7",
     "mime-types": "^3.0.2",
-    "prettier": "^3.6.2",
-    "rollup": "^4.53.3",
+    "prettier": "^3.8.1",
+    "rollup": "^4.56.0",
     "rollup-plugin-import-css": "^4.1.2",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.48.0",
-    "vitest": "^4.0.14"
+    "typescript-eslint": "^8.53.1",
+    "vitest": "^4.0.17"
   },
-  "packageManager": "pnpm@10.15.1"
+  "packageManager": "pnpm@10.28.1"
 }

package/sdk/dist/index.d.ts

@@ -1,3 +1,19 @@
+/**
+ * @public
+ * Options for configuring action containers.
+ */
+export declare interface ActionContainerOptions {
+    /**
+     * QR code specific options.
+     */
+    qrCode?: {
+        /**
+         * If true, only the QR code will be displayed without any additional UI elements.
+         */
+        qrCodeOnly?: boolean;
+    };
+}
+
 /**
  * @public
  * Channel properties for a payment method or payment token.
@@ -199,6 +215,13 @@ export declare class XenditComponents extends EventTarget {
      * the SDK will create an action container (in a modal dialog) for you.
      */
     createActionContainerComponent(): HTMLElement;
+    /**
+     * @public
+     * Creates a container element for rendering action UIs with options.
+     *
+     * @param options - Configuration options for the action container
+     */
+    createActionContainerComponent(options: ActionContainerOptions): HTMLElement;
     /**
      * @public
      * Destroys a component of any type created by the SDK. Removes it from the DOM if necessary.
@@ -251,6 +274,20 @@ export declare class XenditComponents extends EventTarget {
      * ```
      */
     simulatePayment(): void;
+    /**
+     * @public
+     * Request an immediate poll for session status. Useful for handling payment
+     * affirmation (e.g. I have made the payment) by the user. The session must still
+     * be active.
+     *
+     * @example
+     * ```
+     * function onUserAffirmPayment() {
+     *   components.pollImmediately();
+     * }
+     * ```
+     */
+    pollImmediately(): void;
     /**
      * @public
      * The `init` event lets you know when the session data has been loaded.
@@ -359,6 +396,18 @@ export declare class XenditComponents extends EventTarget {
      * Fallback overload.
      */
     removeEventListener<K extends keyof XenditEventMap>(type: K, listener: (this: XenditComponents, ev: XenditEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+    /**
+     * @public
+     * Formats a currency value according to the currency's conventions.
+     *
+     * e.g.
+     * ```
+     * USD 1000 -> "$1,000"
+     * USD 1000.5 -> "$1,000.50"
+     * IDR 1000000 -> "Rp1.000.000"
+     * PHP 1000 -> "₱1,000.00"
+     * ```
+     */
     static amountFormat(amount: number, currency: string): string;
 }