devcode-git · mellyynda · Aug 11, 2025 · Aug 8, 2025 · Aug 8, 2025 · Aug 8, 2025
diff --git a/CHANGES.md b/CHANGES.md
@@ -1,3 +1,6 @@
+#### 1.2.8
+- Add onCardBrandChangeCallback
+
 #### 1.2.7
 - Add full ESM support under /esm
 

diff --git a/README.md b/README.md
@@ -84,7 +84,7 @@ HostedFields in turn will expose three functions
 
 Setup is the first function you will call. It takes a config-object as its only parameter:
 
-````
+````js
 {
     merchantId: 123456789,
     hostedfieldsurl: 'https://card-fields.paymentiq.io/1.0.51/index.html',
@@ -94,7 +94,8 @@ Setup is the first function you will call. It takes a config-object as its only
     styles: 'any custom styles you wish to include',
     callback: () => someFunction,
     autoFocusNext: true,
-    onLoadCallback: () => someFunction
+    onLoadCallback: () => someFunction,
+    onCardBrandChangeCallback: ({ cardBrand: string }) => unknown,
     el = A domElement to render the hosted fields in
 }
 ````
@@ -121,6 +122,12 @@ This allows you to run for example your own validation on the values before you
 Optionally, you can pass in a function that will be called when all the fields you have passed in have
 loaded, allowing you to display some kind of loader until this callback has been triggered.
 
+**onCardBrandChangeCallback**
+Optionally, you can pass in a function that will be called when credit card number input has changed,
+and will return the detected **cardBrand**(e.g. visa, mastercard, etc.).
+
+This is usually used for dynamic credit card flow handling based on the card brand(e.g. for ClickToPay).
+
 **Possible values for hostedfieldsurl:**
 
 For test environments use: `'https://test-hostedpages.paymentiq.io/1.0.51/index.html'`.
@@ -138,13 +145,13 @@ For production environments use `'https://card-fields.paymentiq.io/1.0.51/index.
 **get**
 
 If you want to get the encrypted values from the fields you can call
-```
+```js
 HostedFields.get()
 ```
 This will trigger the supplied callback-function registered in HostedFields.setup() to be called with the values for each field.
 Note that the callback function will also be called if the user presses enter in any of the fields.
 
-```
+```js
 {
    cardHolder: 'Admiral Ackbar',
    encCreditcardNumber: 'ENCRYPTED_STRING',
@@ -159,7 +166,7 @@ Note that the callback function will also be called if the user presses enter in
 If you wish to reset the currently rendered iframes (fields) you can call HostedFields.reset() before running a new setup().
 This can be required if your page that contains the fields gets re-rendered. In that case you will have registered duplicates of the fields. So it's a good idea to call HostedFields.reset() on a beforeDestroy-hook if you are using Vue or React.
 
-````
+````js
 //Each iframe will get an id 'hosted-field-' + the id of the field
 iframe.id = 'hosted-field-' + field.id;
 
@@ -178,7 +185,7 @@ Each field can have an appended string of css. This will be added to each field'
 
 ## Basic Example
 Two simple text fields for first & last name
-````
+````js
 import { FieldTypes } from 'hosted-fields-sdk'
 
 let fieldConfig = [
@@ -210,7 +217,7 @@ let fieldConfig = [
 ````
 
 **Generate Field-objects using the Field-constructor for each one**
-````
+````js
 import { Field } from 'hosted-fields-sdk'
 
 let fields = fieldConfig.map(conf => {
@@ -230,7 +237,7 @@ let fields = fieldConfig.map(conf => {
 ````
 
 **Call the setup function**
-````
+````js
 HostedFields.setup({
   merchantId: 123456789,
   hostedfieldsurl: 'https://card-fields.paymentiq.io/1.0.51/index.html',
@@ -244,7 +251,7 @@ HostedFields.setup({
 ````
 
 **Adding the callback handler and including the domElement stated as 'el'**
-````
+````html
 <!--index.html--->
 <html>
     <head></head>
@@ -255,7 +262,7 @@ HostedFields.setup({
 </html>
 ````
 
-````
+````js
 // scripts.js
 import { HostedFields, Field, FieldTypes } from 'hosted-fields-sdk'
 
@@ -289,7 +296,7 @@ The RenderAsFloatingLabel rule will render the input placeholder as a floating l
 Each field will get wrapped by a div with the class *.hosted-field-container* and an id suffixed with the stated id for that field.
 
 By adding the following styles a basic layout will be created:
-````
+````css
 //style.css
 
 #hosted-fields-wrapper {
@@ -307,7 +314,7 @@ By adding the following styles a basic layout will be created:
 ````
 
 ## Full checkout form
-````
+````js
 import { HostedFields, Field, FieldTypes } from 'hosted-fields-sdk'
 
 // Configure your fields
@@ -423,4 +430,4 @@ Migrate to the New Domain: Begin using the new domain by updating your configura
 Old Domain: The old domain will be deprecated on 15 March, after which it will no longer be supported.
 
 #### Additional Notes:
-Reach out to our support team if you encounter any issues during the transition or require further assistance.
+Reach out to our support team if you encounter any issues during the transition or require further assistance.
diff --git a/actions.js b/actions.js
diff --git a/dist/esm/sdk/api/actions.js b/dist/esm/sdk/api/actions.js
diff --git a/dist/esm/sdk/api/index.js b/dist/esm/sdk/api/index.js
diff --git a/dist/sdk/api/actions.js b/dist/sdk/api/actions.js