xendit-components-web 0.0.12 → 0.0.13

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 No unreleased changes.
 
+# 0.0.13
+
+### Notable
+
+Added support for QR channels (QRIS, QR_PH, PROMPTPAY, SGQR)
+
+Added support for the installment selection UI in the Cards channel (only affects merchants with that feature enabled)
+
+### Bug fixes
+
+- Fixed bug where phone number field is not marked as touched on blur
+
 # 0.0.12
 
 ### Bug fixes

package/README.md

@@ -19,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.12/index.umd.js"></script>
+<script src="https://assets.xendit.co/components/v0.0.13/index.umd.js"></script>
 ```
 
-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.
+Our npm package includes TypeScript types. You also download the [.d.ts file](https://assets.xendit.co/components/v0.0.13/index.d.ts) directly.
 
 ## Sessions
 
@@ -254,6 +254,12 @@ Notifies you when the session is in a terminal state.
 
 `session-complete` means the session was successful, `session-expired-or-canceled` means the session was cancelled or expired.
 
+### `session-pending` and `session-not-pending`
+
+Notifies you when the session is in the pending state. The pending state means a payment request or token will take some time to complete due to a manual approval flow. This affects FPX business payments. No other payment attempts can be made while in the pending state.
+
+You might want to show a pending state UI when in the pending state.
+
 ### `submission-ready` and `submission-not-ready`
 
 Notifies you when the user is ready to submit the payment, meaning a channel is selected and all required information is collected.
@@ -267,21 +273,25 @@ You might want to disable your submit button when not in the ready state.
 
 Notifies you when a submission is in progress.
 
-You might want to show a pending state UI when in the submission state.
+You might want to show a pending state UI when in the submission state, and allowing the action UI to show on top.
 
 ### `action-begin` and `action-end`
 
 Notifies you when an action is in progress.
 
-You might want to create an action container in the action-begin event.
+Optionally, you can create an action container in the action-begin event. A default action container modal will be created if you don't.
 
 ## Appearance
 
-### CSS Variables
+### CSS
 
-The Xendit Components SDK is customizable by overriding its CSS. The SDK inserts its CSS above any other CSS at the time of loading to allow it to be easily overridden.
+The Xendit Components SDK is designed to be customized with CSS. You can override any styles with your own CSS. The SDK's base is inserted above other stylesheets at the time of loading to allow it to be easily overridden.
 
-CSS variables can be overridden to change styles across all components.
+Refer to [styles.css](https://github.com/xendit/xendit-components-web/blob/main/sdk/src/styles.css) for all the overidable selectors.
+
+### CSS Variables
+
+Some CSS variables are provided to allow for easy customization. These are defined on `:root` and can be overridden by your own CSS.
 
 The following variables are available:
 | Variable | Description |
@@ -301,7 +311,7 @@ The following variables are available:
 | --xendit-radius-1 | Border radius applied to some components |
 | --xendit-z-index-focus | Z-index applied to focused fields |
 
-### Appearance of Iframe fields
+### CSS In Iframe Fields
 
 Some form fields (credit card inputs) are implemented inside iframes to protect the user's information.
 
@@ -319,6 +329,20 @@ const sdk = new XenditComponents({
       // apply styles to input placeholders in iframe fields
       color: "#ccc",
     },
+  },
+});
+```
+
+### Fonts In Iframe Fields
+
+Iframes can't inherit fonts you define on your page, so we allow you to load the font separately inside the iframe, by passing the font source to the constructor.
+
+```typescript
+const sdk = new XenditComponents({
+  iframeFieldAppearance: {
+    inputStyles: {
+      // fontFamily: "serif", // this is ignored if a fontFace is provided
+    }
     fontFace: {
       // insert a @font-face rule inside iframe fields
       source: "url(https://example.com/my-font-file) format(woff2)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xendit-components-web",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "Xendit frontend payment components SDK",
   "type": "module",
   "author": "Xendit",
@@ -52,18 +52,18 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "card-validator": "^10.0.3",
+    "card-validator": "^10.0.4",
     "classnames": "^2.5.1",
-    "i18next": "^25.8.0",
-    "libphonenumber-js": "^1.12.35",
-    "preact": "^10.28.2",
+    "libphonenumber-js": "^1.12.38",
+    "preact": "^10.28.4",
     "qrcode": "^1.5.4",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.2",
-    "@microsoft/api-extractor": "^7.55.2",
-    "@preact/preset-vite": "^2.10.2",
+    "@codecov/rollup-plugin": "^1.9.1",
+    "@eslint/js": "^9.39.3",
+    "@microsoft/api-extractor": "^7.57.6",
+    "@preact/preset-vite": "^2.10.3",
     "@rollup/plugin-alias": "^6.0.0",
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-json": "^6.1.0",
@@ -75,21 +75,21 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/user-event": "^14.6.1",
     "@types/mime-types": "^3.0.1",
-    "@types/node": "^24.10.1",
+    "@types/node": "^24.11.0",
     "@types/qrcode": "^1.5.6",
-    "@vitest/coverage-v8": "4.0.17",
-    "eslint": "^9.39.2",
+    "@vitest/coverage-v8": "4.0.18",
+    "eslint": "^9.39.3",
     "eslint-plugin-react-hooks": "^7.0.1",
     "husky": "^9.1.7",
-    "jsdom": "^27.4.0",
-    "lint-staged": "^16.2.7",
+    "jsdom": "^28.1.0",
+    "lint-staged": "^16.3.1",
     "mime-types": "^3.0.2",
     "prettier": "^3.8.1",
-    "rollup": "^4.56.0",
-    "rollup-plugin-import-css": "^4.1.2",
+    "rollup": "^4.59.0",
+    "rollup-plugin-import-css": "^4.2.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.53.1",
-    "vitest": "^4.0.17"
+    "typescript-eslint": "^8.56.1",
+    "vitest": "4.0.18"
   },
   "packageManager": "pnpm@10.28.1"
 }

package/sdk/dist/index.d.ts

@@ -380,6 +380,27 @@ export declare class XenditComponents extends EventTarget {
      * Event handler called when the session has expired or been cancelled.
      */
     addEventListener(name: "session-expired-or-canceled", listener: XenditEventListener<XenditSessionExpiredOrCanceledEvent>, options?: boolean | AddEventListenerOptions): void;
+    /**
+     * @public
+     * Event handler called on pending state. You should show a pending UI in response to this event.
+     *
+     * The pending state means an associated payment request or token will take some time to complete.
+     * No other payment attempts can be made while in the pending state.
+     *
+     * This occurs for payments requiring manual confirmation, e.g. FPX business payments.
+     *
+     * The pending state usually occurs after a submission-end event.
+     * This event will also be fired if the SDK is initialized and the session is already pending.
+     */
+    addEventListener(name: "session-pending", listener: XenditEventListener<XenditSessionPendingEvent>, options?: boolean | AddEventListenerOptions): void;
+    /**
+     * @public
+     * Event handler called when exiting the pending state.
+     *
+     * After the pending state, the session may be in the active state, allowing further attempts, or
+     * it may be completed or expired/canceled, in which case the respective event will be fired immediently after this one.
+     */
+    addEventListener(name: "session-not-pending", listener: XenditEventListener<XenditSessionNotPendingEvent>, options?: boolean | AddEventListenerOptions): void;
     /**
      * @public
      * Event handler called when something unrecoverable has happened. You should create a new
@@ -471,11 +492,15 @@ export declare type XenditEventMap = {
     init: XenditInitEvent;
     "submission-ready": XenditReadyEvent;
     "submission-not-ready": XenditReadyEvent;
+    "submission-begin": XenditSubmissionBeginEvent;
+    "submission-end": XenditSubmissionEndEvent;
     "action-begin": XenditActionBeginEvent;
     "action-end": XenditActionEndEvent;
     "will-redirect": XenditWillRedirectEvent;
     "session-complete": XenditSessionCompleteEvent;
     "session-expired-or-canceled": XenditSessionExpiredOrCanceledEvent;
+    "session-pending": XenditSessionPendingEvent;
+    "session-not-pending": XenditSessionNotPendingEvent;
     "payment-request-created": XenditPaymentRequestCreatedEvent;
     "payment-request-discarded": XenditPaymentRequestDiscardedEvent;
     "payment-token-created": XenditPaymentTokenCreatedEvent;
@@ -720,7 +745,7 @@ export declare interface XenditSession {
     /**
      * Status of the session.
      */
-    status: "ACTIVE" | "CANCELED" | "EXPIRED" | "COMPLETED";
+    status: "ACTIVE" | "PENDING" | "CANCELED" | "EXPIRED" | "COMPLETED";
     /**
      * Indicates whether the customer is allowed to save their payment method during this session.
      *
@@ -788,6 +813,24 @@ export declare class XenditSessionExpiredOrCanceledEvent extends Event {
     constructor();
 }
 
+/**
+ * @public
+ * Event fired when the session is no longer pending.
+ */
+export declare class XenditSessionNotPendingEvent extends Event {
+    static type: "session-not-pending";
+    constructor();
+}
+
+/**
+ * @public
+ * Event fired when the session is pending.
+ */
+export declare class XenditSessionPendingEvent extends Event {
+    static type: "session-pending";
+    constructor();
+}
+
 /**
  * @public
  * Event fired after submission begins.