xendit-components-web 0.0.12 → 0.0.14

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 No unreleased changes.
 
+# 0.0.14
+
+### Bug Fixes
+
+- Fixed a bug in the publish workflow
+- Fixed a bug where the channel picker dropdown was not disabled when there was only one channel
+
+# 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.14/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.14/index.d.ts) directly.
 
 ## Sessions
 
@@ -109,6 +109,16 @@ const groups = components.getActiveChannelGroups();
 Returns a list of channel groups. This can be used to categorize channels by type, if you want to build
 your own channel selection UI. Each channel has a `uiGroup` property which matches one group's `id` property.
 
+<!--
+### `getActiveDigitalWallets`
+
+```typescript
+const digitalWallets = components.getActiveDigitalWallets();
+```
+
+Returns a list of digital wallets available in this session.
+-->
+
 ### `createChannelComponent`
 
 ```typescript
@@ -127,6 +137,20 @@ This returns a `HTMLElement`, which you need to insert into your document.
 This method uses caching, it will always return the same element for the same channel, to preserve the
 values the user enters into any form fields. If you don't want that, use `destroyComponent`.
 
+<!--
+### `createDigitalWalletComponent`
+
+```typescript
+const htmlElement = components.createDigitalWalletComponent("GOOGLE_PAY");
+```
+
+Creates a digital wallet CTA button for the specified digital wallet.
+
+After a user clicks the button and completes the digital wallet flow, a submission will automatically begin. This is equivalent to setting the channel used (using `setCurrentChannel()`), and then calling `submit()`. The same events will be fired as a normal submission.
+
+This returns a `HTMLElement`, which you need to insert into your document.
+-->
+
 ### `createActionContainerComponent`
 
 ```typescript
@@ -254,6 +278,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,25 +297,29 @@ 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 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.
 
-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.
+Refer to [styles.css](https://github.com/xendit/xendit-components-web/blob/main/sdk/src/styles.css) for all the overidable selectors.
 
-CSS variables can be overridden to change styles across all components.
+### 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 |
-| :- | -: |
+| :- | :- |
 | --xendit-font-family | Font applied to all xendit components |
 | --xendit-color-primary | Accent color |
 | --xendit-color-text | Base text color |
@@ -300,8 +334,15 @@ The following variables are available:
 | --xendit-animation-ease | Ease function of animations |
 | --xendit-radius-1 | Border radius applied to some components |
 | --xendit-z-index-focus | Z-index applied to focused fields |
+| --xendit-qr-foreground-color | The color used for QR codes (the black pixels). |
+| --xendit-qr-background-color | The color used as the background of QR codes (the white pixels). |
+
+Additionally, the following variables are set at component scope, where applicable:
+| Variable | Description |
+| :- | :- |
+| --xendit-channel-brand-color | A brand color. Varies depending on the channel or action component where it's used. Will always be a dark color appropriate for use as a background behind white text. |
 
-### 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 +360,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)",
@@ -327,3 +382,29 @@ const sdk = new XenditComponents({
   },
 });
 ```
+
+<!--
+## Digital Wallet Support
+
+Any available Digital Wallet integration is automatically added at the top of the channel picker component. You may also create a Digital Wallet button manually by calling `createDigitalWalletComponent("GOOGLE_PAY")`.
+
+When the user pays using the digital wallet, the submission flow will automatically begin, the same as if you had called `submit()`.
+
+Google Pay is currently the only supported digital wallet.
+
+### Google Pay™
+
+Google Pay is available to Sessions that meet the following requirements:
+
+- Your Session country is a country where Google Pay is supported.
+- You have at least one Google Pay compatible payment method available in your session. (e.g. cards)
+- You've provided your Google MerchantID to Xendit on the Xendit Dashboard. (If you don't have a Google MerchantID, complete registration with the [Google Pay & Wallet Console](https://pay.google.com/business/console/?utm_source=devsite&utm_medium=devsite&utm_campaign=devsite) to provision one)
+- The Google Pay SDK is loaded using `<script async src="https://pay.google.com/gp/p/js/pay.js"></script>`. (You need to include the SDK yourself, we don't bundle it. There's no need to wait for it to finish loading, if it's still loading when you create the component, it'll have `display:none` until it finishes loading)
+- The user is using a compatible browser. (The component will have `display:none` if the user is using an incompatible browser)
+
+We configure Google Pay for you, providing your MerchantID, merchant name, and the allowed payment methods, including allowed card networks and authentication methods.
+
+You can customize the appearance of the button using the options parameter of `createDigitalWalletComponent`, it accepts the same options as the [Google Pay API](https://developers.google.com/pay/api/web/reference/request-objects#ButtonOptions).
+
+To use Google Pay, you must adhere to the Google Pay and Wallet API's [Acceptable Use Policy](https://payments.developers.google.com/terms/aup) and accept the terms defined in the [Google Pay API Terms of Service](https://payments.developers.google.com/terms/sellertos). Additionally, please ensure you follow the [Google Pay brand guidelines](https://developers.google.com/pay/api/web/guides/brand-guidelines).
+-->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xendit-components-web",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "Xendit frontend payment components SDK",
   "type": "module",
   "author": "Xendit",
@@ -19,11 +19,7 @@
     "components"
   ],
   "files": [
-    "./sdk/dist/index.umd.js",
-    "./sdk/dist/index.umd.js.map",
-    "./sdk/dist/index.esm.js",
-    "./sdk/dist/index.esm.js.map",
-    "./sdk/dist/index.d.ts",
+    "./sdk/dist/",
     "./README.md",
     "./CHANGELOG.md"
   ],
@@ -31,7 +27,7 @@
   "exports": {
     "import": {
       "types": "./sdk/dist/index.d.ts",
-      "default": "./sdk/dist/index.esm.js"
+      "default": "./sdk/dist/esm/index.js"
     },
     "require": {
       "types": "./sdk/dist/index.d.ts",
@@ -52,18 +48,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",
@@ -74,22 +70,23 @@
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/user-event": "^14.6.1",
+    "@types/googlepay": "^0.7.10",
     "@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"
 }