xendit-components-web 0.0.20 → 0.0.22

package/CHANGELOG.md

@@ -1,8 +1,18 @@
-# Unreleased
+# 0.0.22
 
-None
+### Notable
 
-# 0.0.19
+Added custom branded layouts for some QR channels.
+
+### Bug fixes
+
+# 0.0.21
+
+### Bug Fixes
+
+- Fixed missing card brand icons in card input
+
+# 0.0.20
 
 ### 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.20/index.umd.js"></script>
+<script src="https://assets.xendit.co/components/v0.0.22/index.umd.js"></script>
 ```
 
-Our npm package includes TypeScript types. You also download the [.d.ts file](https://assets.xendit.co/components/v0.0.20/index.d.ts) directly.
+Our npm package includes TypeScript types. You also download the [.d.ts file](https://assets.xendit.co/components/v0.0.22/index.d.ts) directly.
 
 ## Sessions
 
@@ -408,3 +408,24 @@ You can customize the appearance of the button using the options parameter of `c
 
 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).
 -->
+
+## Troubleshooting
+
+### Usage with React Strict Mode
+
+Since React 18, Strict Mode will perform mount/unmount checks during development. This means React intentionally unmounts and remounts every component on its initial mount.
+
+If you instantiate XenditComponents and add a listener for the `init` event in a side effect, this can cause a race condition where the event fires for the last instance before the first instance finishes mounting. Hence, you should remember to remove the `init` event listener in the effect cleanup function when Strict Mode is on.
+
+```typescript
+useEffect(() => {
+  // ...
+  const handleInit = () => {
+    // ...
+  };
+  components.addEventListener("init", handleInit);
+  return () => {
+    components.removeEventListener("init", handleInit);
+  };
+}, []);
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xendit-components-web",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "description": "Xendit frontend payment components SDK",
   "type": "module",
   "author": "Xendit",
@@ -56,6 +56,7 @@
   "dependencies": {
     "card-validator": "^10.0.4",
     "classnames": "^2.5.1",
+    "jsbarcode": "^3.12.3",
     "libphonenumber-js": "^1.12.41",
     "preact": "^10.29.0",
     "qrcode": "^1.5.4",