From f2640a60235a5325eee86e5753c3977d19ab27b3 Mon Sep 17 00:00:00 2001 From: Seras3 Date: Fri, 8 Aug 2025 13:42:15 +0300 Subject: [PATCH 1/5] PIQ-3113: Add onCardBrandChangeCallback --- README.md | 19 +++++++++++++------ dist/esm/sdk/api/actions.js | 2 +- dist/esm/sdk/api/index.js | 2 +- dist/sdk/api/actions.js | 2 +- dist/sdk/api/index.js | 2 +- package-lock.json | 4 ++-- src/sdk/api/actions.js | 4 +++- src/sdk/api/index.js | 20 +++++++------------- 8 files changed, 29 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index fbe7620..1147708 100644 --- 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', @@ -95,6 +95,7 @@ Setup is the first function you will call. It takes a config-object as its only callback: () => someFunction, autoFocusNext: true, onLoadCallback: () => someFunction + ononCardBrandChangeCallback: ({ 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'`. @@ -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 @@ -255,7 +262,7 @@ HostedFields.setup({ ```` -```` +````js // scripts.js import { HostedFields, Field, FieldTypes } from 'hosted-fields-sdk' diff --git a/dist/esm/sdk/api/actions.js b/dist/esm/sdk/api/actions.js index 7a1c752..c53e0c1 100644 --- a/dist/esm/sdk/api/actions.js +++ b/dist/esm/sdk/api/actions.js @@ -1 +1 @@ -import _typeof from"@babel/runtime/helpers/typeof";var actions={get:"get",setupContent:"setupContent",setupSingleIframeContent:"setupSingleIframeContent",formData:"formData",formSubmit:"formSubmit"};function _getGlobalObject(){try{if(global)return global}catch(_){try{if(window)return window}catch(_){return this}}}Object.freeze(_get__("actions"));var _RewireModuleId__=null;function _getRewireModuleId__(){var _;return null===_RewireModuleId__&&((_=_getGlobalObject()).__$$GLOBAL_REWIRE_NEXT_MODULE_ID__||(_.__$$GLOBAL_REWIRE_NEXT_MODULE_ID__=0),_RewireModuleId__=__$$GLOBAL_REWIRE_NEXT_MODULE_ID__++),_RewireModuleId__}function _getRewireRegistry__(){var _=_getGlobalObject();return _.__$$GLOBAL_REWIRE_REGISTRY__||(_.__$$GLOBAL_REWIRE_REGISTRY__=Object.create(null)),_.__$$GLOBAL_REWIRE_REGISTRY__}function _getRewiredData__(){var _=_getRewireModuleId__(),e=_getRewireRegistry__(),t=e[_];return t||(e[_]=Object.create(null),t=e[_]),t}(()=>{var _=_getGlobalObject();_.__rewire_reset_all__||(_.__rewire_reset_all__=function(){_.__$$GLOBAL_REWIRE_REGISTRY__=Object.create(null)})})();var INTENTIONAL_UNDEFINED="__INTENTIONAL_UNDEFINED__",_RewireAPI__={};function _get__(_){var e=_getRewiredData__();return void 0===e[_]?_get_original__(_):(e=e[_])!==INTENTIONAL_UNDEFINED?e:void 0}function _get_original__(_){if("actions"===_)return actions}function _assign__(_,e){var t=_getRewiredData__();return void 0===t[_]?_set_original__(_,e):t[_]=e}function _set_original__(_,e){_}function _update_operation__(_,e,t){var r=_get__(e),_="++"===_?r+1:r-1;return _assign__(e,_),t?_:r}function _set__(e,_){var t=_getRewiredData__();return"object"===_typeof(e)?(Object.keys(e).forEach(function(_){t[_]=e[_]}),function(){Object.keys(e).forEach(function(_){_reset__(e)})}):(t[e]=void 0===_?INTENTIONAL_UNDEFINED:_,function(){_reset__(e)})}function _reset__(_){var e=_getRewiredData__();delete e[_],0==Object.keys(e).length&&delete _getRewireRegistry__()[_getRewireModuleId__]}function _with__(e){var t=_getRewiredData__(),r=Object.keys(e),n={};function i(){r.forEach(function(_){t[_]=n[_]})}return function(_){r.forEach(function(_){n[_]=t[_],t[_]=e[_]});_=_();return _&&"function"==typeof _.then?_.then(i).catch(i):i(),_}}(()=>{function _(_,e){Object.defineProperty(_RewireAPI__,_,{value:e,enumerable:!1,configurable:!0})}_("__get__",_get__),_("__GetDependency__",_get__),_("__Rewire__",_set__),_("__set__",_set__),_("__reset__",_reset__),_("__ResetDependency__",_reset__),_("__with__",_with__)})();export default _RewireAPI__;export{actions,_get__ as __get__,_get__ as __GetDependency__,_set__ as __Rewire__,_set__ as __set__,_reset__ as __ResetDependency__,_RewireAPI__ as __RewireAPI__}; \ No newline at end of file +import _typeof from"@babel/runtime/helpers/typeof";var actions={get:"get",setupContent:"setupContent",setupSingleIframeContent:"setupSingleIframeContent",formData:"formData",formSubmit:"formSubmit",cardBrandChange:"cardBrandChange"};function _getGlobalObject(){try{if(global)return global}catch(_){try{if(window)return window}catch(_){return this}}}Object.freeze(_get__("actions"));var _RewireModuleId__=null;function _getRewireModuleId__(){var _;return null===_RewireModuleId__&&((_=_getGlobalObject()).__$$GLOBAL_REWIRE_NEXT_MODULE_ID__||(_.__$$GLOBAL_REWIRE_NEXT_MODULE_ID__=0),_RewireModuleId__=__$$GLOBAL_REWIRE_NEXT_MODULE_ID__++),_RewireModuleId__}function _getRewireRegistry__(){var _=_getGlobalObject();return _.__$$GLOBAL_REWIRE_REGISTRY__||(_.__$$GLOBAL_REWIRE_REGISTRY__=Object.create(null)),_.__$$GLOBAL_REWIRE_REGISTRY__}function _getRewiredData__(){var _=_getRewireModuleId__(),e=_getRewireRegistry__(),t=e[_];return t||(e[_]=Object.create(null),t=e[_]),t}(()=>{var _=_getGlobalObject();_.__rewire_reset_all__||(_.__rewire_reset_all__=function(){_.__$$GLOBAL_REWIRE_REGISTRY__=Object.create(null)})})();var INTENTIONAL_UNDEFINED="__INTENTIONAL_UNDEFINED__",_RewireAPI__={};function _get__(_){var e=_getRewiredData__();return void 0===e[_]?_get_original__(_):(e=e[_])!==INTENTIONAL_UNDEFINED?e:void 0}function _get_original__(_){if("actions"===_)return actions}function _assign__(_,e){var t=_getRewiredData__();return void 0===t[_]?_set_original__(_,e):t[_]=e}function _set_original__(_,e){_}function _update_operation__(_,e,t){var r=_get__(e),_="++"===_?r+1:r-1;return _assign__(e,_),t?_:r}function _set__(e,_){var t=_getRewiredData__();return"object"===_typeof(e)?(Object.keys(e).forEach(function(_){t[_]=e[_]}),function(){Object.keys(e).forEach(function(_){_reset__(e)})}):(t[e]=void 0===_?INTENTIONAL_UNDEFINED:_,function(){_reset__(e)})}function _reset__(_){var e=_getRewiredData__();delete e[_],0==Object.keys(e).length&&delete _getRewireRegistry__()[_getRewireModuleId__]}function _with__(e){var t=_getRewiredData__(),r=Object.keys(e),n={};function i(){r.forEach(function(_){t[_]=n[_]})}return function(_){r.forEach(function(_){n[_]=t[_],t[_]=e[_]});_=_();return _&&"function"==typeof _.then?_.then(i).catch(i):i(),_}}(()=>{function _(_,e){Object.defineProperty(_RewireAPI__,_,{value:e,enumerable:!1,configurable:!0})}_("__get__",_get__),_("__GetDependency__",_get__),_("__Rewire__",_set__),_("__set__",_set__),_("__reset__",_reset__),_("__ResetDependency__",_reset__),_("__with__",_with__)})();export default _RewireAPI__;export{actions,_get__ as __get__,_get__ as __GetDependency__,_set__ as __Rewire__,_set__ as __set__,_reset__ as __ResetDependency__,_RewireAPI__ as __RewireAPI__}; \ No newline at end of file diff --git a/dist/esm/sdk/api/index.js b/dist/esm/sdk/api/index.js index 4c6692d..85eb803 100644 --- a/dist/esm/sdk/api/index.js +++ b/dist/esm/sdk/api/index.js @@ -1 +1 @@ -import _typeof from"@babel/runtime/helpers/typeof";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var merchantId,renderMode,fields,hostedfieldsurl,service,styles,_excluded=["errors"],_excluded2=["errors"];function ownKeys(t,e){var _,r=Object.keys(t);return Object.getOwnPropertySymbols&&(_=Object.getOwnPropertySymbols(t),e&&(_=_.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),r.push.apply(r,_)),r}function _objectSpread(t){for(var e=1;e{var e=_getGlobalObject();e.__rewire_reset_all__||(e.__rewire_reset_all__=function(){e.__$$GLOBAL_REWIRE_REGISTRY__=Object.create(null)})})();var INTENTIONAL_UNDEFINED="__INTENTIONAL_UNDEFINED__",_RewireAPI__={};function _get__(e){var t=_getRewiredData__();return void 0===t[e]?_get_original__(e):(t=t[e])!==INTENTIONAL_UNDEFINED?t:void 0}function _get_original__(e){switch(e){case"merchantId":return merchantId;case"renderMode":return renderMode;case"hostedfieldsurl":return hostedfieldsurl;case"fields":return fields;case"service":return service;case"styles":return styles;case"callback":return callback;case"onLoadCallback":return onLoadCallback;case"autoFocusNext":return autoFocusNext;case"el":return el;case"registerSingleIframe":return registerSingleIframe;case"registerIframes":return registerIframes;case"targets":return targets;case"actions":return actions;case"responses":return responses;case"onLoadCounter":return onLoadCounter;case"initIframe":return initIframe;case"initSingleIframe":return initSingleIframe;case"validateOrigin":return validateOrigin;case"sendCallback":return sendCallback;case"get":return get;case"createIframeProxy":return createIframeProxy;case"window":return window;case"eventHandler":return eventHandler;case"createSingleIframeProxy":return createSingleIframeProxy;case"setup":return setup;case"reset":return reset}}function _assign__(e,t){var _=_getRewiredData__();return void 0===_[e]?_set_original__(e,t):_[e]=t}function _set_original__(e,t){switch(e){case"merchantId":return merchantId=t;case"renderMode":return renderMode=t;case"hostedfieldsurl":return hostedfieldsurl=t;case"fields":return fields=t;case"service":return service=t;case"styles":return styles=t;case"callback":return callback=t;case"onLoadCallback":return onLoadCallback=t;case"autoFocusNext":return autoFocusNext=t;case"el":return el=t;case"targets":return targets=t;case"responses":return responses=t;case"onLoadCounter":return onLoadCounter=t}}function _update_operation__(e,t,_){var r=_get__(t),e="++"===e?r+1:r-1;return _assign__(t,e),_?e:r}function _set__(t,e){var _=_getRewiredData__();return"object"===_typeof(t)?(Object.keys(t).forEach(function(e){_[e]=t[e]}),function(){Object.keys(t).forEach(function(e){_reset__(t)})}):(_[t]=void 0===e?INTENTIONAL_UNDEFINED:e,function(){_reset__(t)})}function _reset__(e){var t=_getRewiredData__();delete t[e],0==Object.keys(t).length&&delete _getRewireRegistry__()[_getRewireModuleId__]}function _with__(t){var _=_getRewiredData__(),r=Object.keys(t),n={};function a(){r.forEach(function(e){_[e]=n[e]})}return function(e){r.forEach(function(e){n[e]=_[e],_[e]=t[e]});e=e();return e&&"function"==typeof e.then?e.then(a).catch(a):a(),e}}(()=>{function e(e,t){Object.defineProperty(_RewireAPI__,e,{value:t,enumerable:!1,configurable:!0})}e("__get__",_get__),e("__GetDependency__",_get__),e("__Rewire__",_set__),e("__set__",_set__),e("__reset__",_reset__),e("__ResetDependency__",_reset__),e("__with__",_with__)})();export default _RewireAPI__;export{HostedFields,_get__ as __get__,_get__ as __GetDependency__,_set__ as __Rewire__,_set__ as __set__,_reset__ as __ResetDependency__,_RewireAPI__ as __RewireAPI__}; \ No newline at end of file +import _typeof from"@babel/runtime/helpers/typeof";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var merchantId,renderMode,fields,hostedfieldsurl,service,styles,_excluded=["errors"],_excluded2=["errors"];function ownKeys(t,e){var r,_=Object.keys(t);return Object.getOwnPropertySymbols&&(r=Object.getOwnPropertySymbols(t),e&&(r=r.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),_.push.apply(_,r)),_}function _objectSpread(t){for(var e=1;e{var e=_getGlobalObject();e.__rewire_reset_all__||(e.__rewire_reset_all__=function(){e.__$$GLOBAL_REWIRE_REGISTRY__=Object.create(null)})})();var INTENTIONAL_UNDEFINED="__INTENTIONAL_UNDEFINED__",_RewireAPI__={};function _get__(e){var t=_getRewiredData__();return void 0===t[e]?_get_original__(e):(t=t[e])!==INTENTIONAL_UNDEFINED?t:void 0}function _get_original__(e){switch(e){case"merchantId":return merchantId;case"renderMode":return renderMode;case"hostedfieldsurl":return hostedfieldsurl;case"fields":return fields;case"service":return service;case"styles":return styles;case"callback":return callback;case"onLoadCallback":return onLoadCallback;case"onCardBrandChangeCallback":return onCardBrandChangeCallback;case"autoFocusNext":return autoFocusNext;case"el":return el;case"registerSingleIframe":return registerSingleIframe;case"registerIframes":return registerIframes;case"targets":return targets;case"actions":return actions;case"initIframe":return initIframe;case"initSingleIframe":return initSingleIframe;case"validateOrigin":return validateOrigin;case"responses":return responses;case"sendCallback":return sendCallback;case"get":return get;case"createIframeProxy":return createIframeProxy;case"window":return window;case"eventHandler":return eventHandler;case"onLoadCounter":return onLoadCounter;case"createSingleIframeProxy":return createSingleIframeProxy;case"setup":return setup;case"reset":return reset}}function _assign__(e,t){var r=_getRewiredData__();return void 0===r[e]?_set_original__(e,t):r[e]=t}function _set_original__(e,t){switch(e){case"merchantId":return merchantId=t;case"renderMode":return renderMode=t;case"hostedfieldsurl":return hostedfieldsurl=t;case"fields":return fields=t;case"service":return service=t;case"styles":return styles=t;case"callback":return callback=t;case"onLoadCallback":return onLoadCallback=t;case"onCardBrandChangeCallback":return onCardBrandChangeCallback=t;case"autoFocusNext":return autoFocusNext=t;case"el":return el=t;case"targets":return targets=t;case"responses":return responses=t;case"onLoadCounter":return onLoadCounter=t}}function _update_operation__(e,t,r){var _=_get__(t),e="++"===e?_+1:_-1;return _assign__(t,e),r?e:_}function _set__(t,e){var r=_getRewiredData__();return"object"===_typeof(t)?(Object.keys(t).forEach(function(e){r[e]=t[e]}),function(){Object.keys(t).forEach(function(e){_reset__(t)})}):(r[t]=void 0===e?INTENTIONAL_UNDEFINED:e,function(){_reset__(t)})}function _reset__(e){var t=_getRewiredData__();delete t[e],0==Object.keys(t).length&&delete _getRewireRegistry__()[_getRewireModuleId__]}function _with__(t){var r=_getRewiredData__(),_=Object.keys(t),n={};function a(){_.forEach(function(e){r[e]=n[e]})}return function(e){_.forEach(function(e){n[e]=r[e],r[e]=t[e]});e=e();return e&&"function"==typeof e.then?e.then(a).catch(a):a(),e}}(()=>{function e(e,t){Object.defineProperty(_RewireAPI__,e,{value:t,enumerable:!1,configurable:!0})}e("__get__",_get__),e("__GetDependency__",_get__),e("__Rewire__",_set__),e("__set__",_set__),e("__reset__",_reset__),e("__ResetDependency__",_reset__),e("__with__",_with__)})();export default _RewireAPI__;export{HostedFields,_get__ as __get__,_get__ as __GetDependency__,_set__ as __Rewire__,_set__ as __set__,_reset__ as __ResetDependency__,_RewireAPI__ as __RewireAPI__}; \ No newline at end of file diff --git a/dist/sdk/api/actions.js b/dist/sdk/api/actions.js index a79d80b..79e8db8 100644 --- a/dist/sdk/api/actions.js +++ b/dist/sdk/api/actions.js @@ -1 +1 @@ -var _typeof=require("@babel/runtime/helpers/typeof"),actions=(Object.defineProperty(exports,"__esModule",{value:!0}),exports.__ResetDependency__=_reset__,exports.__RewireAPI__=void 0,exports.__set__=exports.__Rewire__=_set__,exports.__GetDependency__=exports.__get__=_get__,exports.default=exports.actions=void 0,exports.actions={get:"get",setupContent:"setupContent",setupSingleIframeContent:"setupSingleIframeContent",formData:"formData",formSubmit:"formSubmit"});function _getGlobalObject(){try{if(global)return global}catch(_){try{if(window)return window}catch(_){return this}}}Object.freeze(_get__("actions"));var _RewireModuleId__=null;function _getRewireModuleId__(){var _;return null===_RewireModuleId__&&((_=_getGlobalObject()).__$$GLOBAL_REWIRE_NEXT_MODULE_ID__||(_.__$$GLOBAL_REWIRE_NEXT_MODULE_ID__=0),_RewireModuleId__=__$$GLOBAL_REWIRE_NEXT_MODULE_ID__++),_RewireModuleId__}function _getRewireRegistry__(){var _=_getGlobalObject();return _.__$$GLOBAL_REWIRE_REGISTRY__||(_.__$$GLOBAL_REWIRE_REGISTRY__=Object.create(null)),_.__$$GLOBAL_REWIRE_REGISTRY__}function _getRewiredData__(){var _=_getRewireModuleId__(),e=_getRewireRegistry__(),t=e[_];return t||(e[_]=Object.create(null),t=e[_]),t}(()=>{var _=_getGlobalObject();_.__rewire_reset_all__||(_.__rewire_reset_all__=function(){_.__$$GLOBAL_REWIRE_REGISTRY__=Object.create(null)})})();var INTENTIONAL_UNDEFINED="__INTENTIONAL_UNDEFINED__",_RewireAPI__=exports.__RewireAPI__={};function _get__(_){var e=_getRewiredData__();return void 0===e[_]?_get_original__(_):(e=e[_])!==INTENTIONAL_UNDEFINED?e:void 0}function _get_original__(_){if("actions"===_)return actions}function _assign__(_,e){var t=_getRewiredData__();return void 0===t[_]?_set_original__(_,e):t[_]=e}function _set_original__(_,e){_}function _update_operation__(_,e,t){var r=_get__(e),_="++"===_?r+1:r-1;return _assign__(e,_),t?_:r}function _set__(e,_){var t=_getRewiredData__();return"object"===_typeof(e)?(Object.keys(e).forEach(function(_){t[_]=e[_]}),function(){Object.keys(e).forEach(function(_){_reset__(e)})}):(t[e]=void 0===_?INTENTIONAL_UNDEFINED:_,function(){_reset__(e)})}function _reset__(_){var e=_getRewiredData__();delete e[_],0==Object.keys(e).length&&delete _getRewireRegistry__()[_getRewireModuleId__]}function _with__(e){var t=_getRewiredData__(),r=Object.keys(e),n={};function i(){r.forEach(function(_){t[_]=n[_]})}return function(_){r.forEach(function(_){n[_]=t[_],t[_]=e[_]});_=_();return _&&"function"==typeof _.then?_.then(i).catch(i):i(),_}}(()=>{function _(_,e){Object.defineProperty(_RewireAPI__,_,{value:e,enumerable:!1,configurable:!0})}_("__get__",_get__),_("__GetDependency__",_get__),_("__Rewire__",_set__),_("__set__",_set__),_("__reset__",_reset__),_("__ResetDependency__",_reset__),_("__with__",_with__)})();var _default=exports.default=_RewireAPI__; \ No newline at end of file +var _typeof=require("@babel/runtime/helpers/typeof"),actions=(Object.defineProperty(exports,"__esModule",{value:!0}),exports.__ResetDependency__=_reset__,exports.__RewireAPI__=void 0,exports.__set__=exports.__Rewire__=_set__,exports.__GetDependency__=exports.__get__=_get__,exports.default=exports.actions=void 0,exports.actions={get:"get",setupContent:"setupContent",setupSingleIframeContent:"setupSingleIframeContent",formData:"formData",formSubmit:"formSubmit",cardBrandChange:"cardBrandChange"});function _getGlobalObject(){try{if(global)return global}catch(_){try{if(window)return window}catch(_){return this}}}Object.freeze(_get__("actions"));var _RewireModuleId__=null;function _getRewireModuleId__(){var _;return null===_RewireModuleId__&&((_=_getGlobalObject()).__$$GLOBAL_REWIRE_NEXT_MODULE_ID__||(_.__$$GLOBAL_REWIRE_NEXT_MODULE_ID__=0),_RewireModuleId__=__$$GLOBAL_REWIRE_NEXT_MODULE_ID__++),_RewireModuleId__}function _getRewireRegistry__(){var _=_getGlobalObject();return _.__$$GLOBAL_REWIRE_REGISTRY__||(_.__$$GLOBAL_REWIRE_REGISTRY__=Object.create(null)),_.__$$GLOBAL_REWIRE_REGISTRY__}function _getRewiredData__(){var _=_getRewireModuleId__(),e=_getRewireRegistry__(),t=e[_];return t||(e[_]=Object.create(null),t=e[_]),t}(()=>{var _=_getGlobalObject();_.__rewire_reset_all__||(_.__rewire_reset_all__=function(){_.__$$GLOBAL_REWIRE_REGISTRY__=Object.create(null)})})();var INTENTIONAL_UNDEFINED="__INTENTIONAL_UNDEFINED__",_RewireAPI__=exports.__RewireAPI__={};function _get__(_){var e=_getRewiredData__();return void 0===e[_]?_get_original__(_):(e=e[_])!==INTENTIONAL_UNDEFINED?e:void 0}function _get_original__(_){if("actions"===_)return actions}function _assign__(_,e){var t=_getRewiredData__();return void 0===t[_]?_set_original__(_,e):t[_]=e}function _set_original__(_,e){_}function _update_operation__(_,e,t){var r=_get__(e),_="++"===_?r+1:r-1;return _assign__(e,_),t?_:r}function _set__(e,_){var t=_getRewiredData__();return"object"===_typeof(e)?(Object.keys(e).forEach(function(_){t[_]=e[_]}),function(){Object.keys(e).forEach(function(_){_reset__(e)})}):(t[e]=void 0===_?INTENTIONAL_UNDEFINED:_,function(){_reset__(e)})}function _reset__(_){var e=_getRewiredData__();delete e[_],0==Object.keys(e).length&&delete _getRewireRegistry__()[_getRewireModuleId__]}function _with__(e){var t=_getRewiredData__(),r=Object.keys(e),n={};function i(){r.forEach(function(_){t[_]=n[_]})}return function(_){r.forEach(function(_){n[_]=t[_],t[_]=e[_]});_=_();return _&&"function"==typeof _.then?_.then(i).catch(i):i(),_}}(()=>{function _(_,e){Object.defineProperty(_RewireAPI__,_,{value:e,enumerable:!1,configurable:!0})}_("__get__",_get__),_("__GetDependency__",_get__),_("__Rewire__",_set__),_("__set__",_set__),_("__reset__",_reset__),_("__ResetDependency__",_reset__),_("__with__",_with__)})();var _default=exports.default=_RewireAPI__; \ No newline at end of file diff --git a/dist/sdk/api/index.js b/dist/sdk/api/index.js index 1b73dec..f7b5cd3 100644 --- a/dist/sdk/api/index.js +++ b/dist/sdk/api/index.js @@ -1 +1 @@ -var merchantId,renderMode,fields,hostedfieldsurl,service,styles,_interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault"),_typeof=require("@babel/runtime/helpers/typeof"),_defineProperty2=(Object.defineProperty(exports,"__esModule",{value:!0}),exports.HostedFields=void 0,exports.__ResetDependency__=_reset__,exports.__RewireAPI__=void 0,exports.__set__=exports.__Rewire__=_set__,exports.__GetDependency__=exports.__get__=_get__,exports.default=void 0,_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"))),_objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties")),_actions=require("./actions"),_excluded=["errors"],_excluded2=["errors"];function ownKeys(t,e){var _,r=Object.keys(t);return Object.getOwnPropertySymbols&&(_=Object.getOwnPropertySymbols(t),e&&(_=_.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),r.push.apply(r,_)),r}function _objectSpread(t){for(var e=1;e{var e=_getGlobalObject();e.__rewire_reset_all__||(e.__rewire_reset_all__=function(){e.__$$GLOBAL_REWIRE_REGISTRY__=Object.create(null)})})();var INTENTIONAL_UNDEFINED="__INTENTIONAL_UNDEFINED__",_RewireAPI__=exports.__RewireAPI__={};function _get__(e){var t=_getRewiredData__();return void 0===t[e]?_get_original__(e):(t=t[e])!==INTENTIONAL_UNDEFINED?t:void 0}function _get_original__(e){switch(e){case"merchantId":return merchantId;case"renderMode":return renderMode;case"hostedfieldsurl":return hostedfieldsurl;case"fields":return fields;case"service":return service;case"styles":return styles;case"callback":return callback;case"onLoadCallback":return onLoadCallback;case"autoFocusNext":return autoFocusNext;case"el":return el;case"registerSingleIframe":return registerSingleIframe;case"registerIframes":return registerIframes;case"targets":return targets;case"actions":return _actions.actions;case"responses":return responses;case"onLoadCounter":return onLoadCounter;case"initIframe":return initIframe;case"initSingleIframe":return initSingleIframe;case"validateOrigin":return validateOrigin;case"sendCallback":return sendCallback;case"get":return get;case"createIframeProxy":return createIframeProxy;case"window":return window;case"eventHandler":return eventHandler;case"createSingleIframeProxy":return createSingleIframeProxy;case"setup":return setup;case"reset":return reset}}function _assign__(e,t){var _=_getRewiredData__();return void 0===_[e]?_set_original__(e,t):_[e]=t}function _set_original__(e,t){switch(e){case"merchantId":return merchantId=t;case"renderMode":return renderMode=t;case"hostedfieldsurl":return hostedfieldsurl=t;case"fields":return fields=t;case"service":return service=t;case"styles":return styles=t;case"callback":return callback=t;case"onLoadCallback":return onLoadCallback=t;case"autoFocusNext":return autoFocusNext=t;case"el":return el=t;case"targets":return targets=t;case"responses":return responses=t;case"onLoadCounter":return onLoadCounter=t}}function _update_operation__(e,t,_){var r=_get__(t),e="++"===e?r+1:r-1;return _assign__(t,e),_?e:r}function _set__(t,e){var _=_getRewiredData__();return"object"===_typeof(t)?(Object.keys(t).forEach(function(e){_[e]=t[e]}),function(){Object.keys(t).forEach(function(e){_reset__(t)})}):(_[t]=void 0===e?INTENTIONAL_UNDEFINED:e,function(){_reset__(t)})}function _reset__(e){var t=_getRewiredData__();delete t[e],0==Object.keys(t).length&&delete _getRewireRegistry__()[_getRewireModuleId__]}function _with__(t){var _=_getRewiredData__(),r=Object.keys(t),n={};function a(){r.forEach(function(e){_[e]=n[e]})}return function(e){r.forEach(function(e){n[e]=_[e],_[e]=t[e]});e=e();return e&&"function"==typeof e.then?e.then(a).catch(a):a(),e}}(()=>{function e(e,t){Object.defineProperty(_RewireAPI__,e,{value:t,enumerable:!1,configurable:!0})}e("__get__",_get__),e("__GetDependency__",_get__),e("__Rewire__",_set__),e("__set__",_set__),e("__reset__",_reset__),e("__ResetDependency__",_reset__),e("__with__",_with__)})();var _default=exports.default=_RewireAPI__; \ No newline at end of file +var merchantId,renderMode,fields,hostedfieldsurl,service,styles,_interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault"),_typeof=require("@babel/runtime/helpers/typeof"),_defineProperty2=(Object.defineProperty(exports,"__esModule",{value:!0}),exports.HostedFields=void 0,exports.__ResetDependency__=_reset__,exports.__RewireAPI__=void 0,exports.__set__=exports.__Rewire__=_set__,exports.__GetDependency__=exports.__get__=_get__,exports.default=void 0,_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"))),_objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties")),_actions=require("./actions"),_excluded=["errors"],_excluded2=["errors"];function ownKeys(t,e){var r,_=Object.keys(t);return Object.getOwnPropertySymbols&&(r=Object.getOwnPropertySymbols(t),e&&(r=r.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),_.push.apply(_,r)),_}function _objectSpread(t){for(var e=1;e{var e=_getGlobalObject();e.__rewire_reset_all__||(e.__rewire_reset_all__=function(){e.__$$GLOBAL_REWIRE_REGISTRY__=Object.create(null)})})();var INTENTIONAL_UNDEFINED="__INTENTIONAL_UNDEFINED__",_RewireAPI__=exports.__RewireAPI__={};function _get__(e){var t=_getRewiredData__();return void 0===t[e]?_get_original__(e):(t=t[e])!==INTENTIONAL_UNDEFINED?t:void 0}function _get_original__(e){switch(e){case"merchantId":return merchantId;case"renderMode":return renderMode;case"hostedfieldsurl":return hostedfieldsurl;case"fields":return fields;case"service":return service;case"styles":return styles;case"callback":return callback;case"onLoadCallback":return onLoadCallback;case"onCardBrandChangeCallback":return onCardBrandChangeCallback;case"autoFocusNext":return autoFocusNext;case"el":return el;case"registerSingleIframe":return registerSingleIframe;case"registerIframes":return registerIframes;case"targets":return targets;case"actions":return _actions.actions;case"initIframe":return initIframe;case"initSingleIframe":return initSingleIframe;case"validateOrigin":return validateOrigin;case"responses":return responses;case"sendCallback":return sendCallback;case"get":return get;case"createIframeProxy":return createIframeProxy;case"window":return window;case"eventHandler":return eventHandler;case"onLoadCounter":return onLoadCounter;case"createSingleIframeProxy":return createSingleIframeProxy;case"setup":return setup;case"reset":return reset}}function _assign__(e,t){var r=_getRewiredData__();return void 0===r[e]?_set_original__(e,t):r[e]=t}function _set_original__(e,t){switch(e){case"merchantId":return merchantId=t;case"renderMode":return renderMode=t;case"hostedfieldsurl":return hostedfieldsurl=t;case"fields":return fields=t;case"service":return service=t;case"styles":return styles=t;case"callback":return callback=t;case"onLoadCallback":return onLoadCallback=t;case"onCardBrandChangeCallback":return onCardBrandChangeCallback=t;case"autoFocusNext":return autoFocusNext=t;case"el":return el=t;case"targets":return targets=t;case"responses":return responses=t;case"onLoadCounter":return onLoadCounter=t}}function _update_operation__(e,t,r){var _=_get__(t),e="++"===e?_+1:_-1;return _assign__(t,e),r?e:_}function _set__(t,e){var r=_getRewiredData__();return"object"===_typeof(t)?(Object.keys(t).forEach(function(e){r[e]=t[e]}),function(){Object.keys(t).forEach(function(e){_reset__(t)})}):(r[t]=void 0===e?INTENTIONAL_UNDEFINED:e,function(){_reset__(t)})}function _reset__(e){var t=_getRewiredData__();delete t[e],0==Object.keys(t).length&&delete _getRewireRegistry__()[_getRewireModuleId__]}function _with__(t){var r=_getRewiredData__(),_=Object.keys(t),n={};function a(){_.forEach(function(e){r[e]=n[e]})}return function(e){_.forEach(function(e){n[e]=r[e],r[e]=t[e]});e=e();return e&&"function"==typeof e.then?e.then(a).catch(a):a(),e}}(()=>{function e(e,t){Object.defineProperty(_RewireAPI__,e,{value:t,enumerable:!1,configurable:!0})}e("__get__",_get__),e("__GetDependency__",_get__),e("__Rewire__",_set__),e("__set__",_set__),e("__reset__",_reset__),e("__ResetDependency__",_reset__),e("__with__",_with__)})();var _default=exports.default=_RewireAPI__; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index ab73321..3f94394 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "hosted-fields-sdk", - "version": "1.2.6", + "version": "1.2.7", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "hosted-fields-sdk", - "version": "1.2.6", + "version": "1.2.7", "license": "ISC", "dependencies": { "@babel/runtime": "^7.27.0" diff --git a/src/sdk/api/actions.js b/src/sdk/api/actions.js index 1413220..71b6b13 100644 --- a/src/sdk/api/actions.js +++ b/src/sdk/api/actions.js @@ -9,6 +9,8 @@ export const actions = { // Received when with the hosted field data. formData: 'formData', // Received when enter was pressed in the hosted fields to submit the form. - formSubmit: 'formSubmit' + formSubmit: 'formSubmit', + // Received when the hosted fields credit card number changed and returs the detected card brand. + cardBrandChange: 'cardBrandChange', } Object.freeze(actions) diff --git a/src/sdk/api/index.js b/src/sdk/api/index.js index 2f4ee80..868aa59 100644 --- a/src/sdk/api/index.js +++ b/src/sdk/api/index.js @@ -24,6 +24,9 @@ var callback; // Method to call when all responses from hosted fields // has been loaded var onLoadCallback; +// Method to call when card brand(e.g. visa, mastercard, etc.) has changed +// based on the credit card nunmber that was entered. +var onCardBrandChangeCallback; // Boolean - should the next field be focused when a valid value has been set var autoFocusNext; // Keep track of number of loaded fields @@ -40,6 +43,7 @@ function setup (config) { styles = config.styles; callback = config.callback; onLoadCallback = config.onLoadCallback; + onCardBrandChangeCallback = config.onCardBrandChangeCallback; autoFocusNext = config.autoFocusNext || false el = config.el; @@ -73,19 +77,6 @@ function reset () { targets = [] } -function destroyContent () { - merchantId = null - fields = null; - hostedfieldsurl = null - service = null - styles = null - targets = [] - responses = [] - el = null - callback = null - onLoadCallback = null - onLoadCounter = 0 -} function registerIframes () { targets = targets.concat(fields.map((field) => { @@ -104,6 +95,9 @@ function eventHandler ($event) { responses.push({ id: $event.data.id, data: $event.data.formData }) sendCallback() break; + case actions.cardBrandChange: + onCardBrandChangeCallback?.({cardBrand: $event.data.cardBrand }) + break; case actions.formSubmit: get() break; From 5568de997cb891cbd7fd9efe3c505e4541a6f267 Mon Sep 17 00:00:00 2001 From: Seras3 Date: Fri, 8 Aug 2025 13:46:18 +0300 Subject: [PATCH 2/5] PIQ-3113: Readme typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1147708..33e79c0 100644 --- a/README.md +++ b/README.md @@ -95,7 +95,7 @@ Setup is the first function you will call. It takes a config-object as its only callback: () => someFunction, autoFocusNext: true, onLoadCallback: () => someFunction - ononCardBrandChangeCallback: ({ cardBrand: string }) => unknown + onCardBrandChangeCallback: ({ cardBrand: string }) => unknown el = A domElement to render the hosted fields in } ```` From 9d9bc589bddc3226d791c1dceb8c4ad1f9c00610 Mon Sep 17 00:00:00 2001 From: Adam Adrian-Claudiu <50520077+Seras3@users.noreply.github.com> Date: Fri, 8 Aug 2025 13:48:21 +0300 Subject: [PATCH 3/5] Update README.md --- README.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 33e79c0..0799ac7 100644 --- a/README.md +++ b/README.md @@ -94,8 +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 - onCardBrandChangeCallback: ({ cardBrand: string }) => unknown + onLoadCallback: () => someFunction, + onCardBrandChangeCallback: ({ cardBrand: string }) => unknown, el = A domElement to render the hosted fields in } ```` @@ -145,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', @@ -166,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; @@ -296,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 { @@ -314,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 @@ -430,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. \ No newline at end of file +Reach out to our support team if you encounter any issues during the transition or require further assistance. From 906db5ad820793590792f0a0df2bc375cd83093a Mon Sep 17 00:00:00 2001 From: Seras3 Date: Mon, 11 Aug 2025 13:03:50 +0300 Subject: [PATCH 4/5] Bump version to 1.2.8 + update CHANGES.md --- CHANGES.md | 3 +++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 0bf698b..780f0c9 100644 --- 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/package-lock.json b/package-lock.json index 3f94394..6793981 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "hosted-fields-sdk", - "version": "1.2.7", + "version": "1.2.8", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "hosted-fields-sdk", - "version": "1.2.7", + "version": "1.2.8", "license": "ISC", "dependencies": { "@babel/runtime": "^7.27.0" diff --git a/package.json b/package.json index c842a4d..8faeca9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hosted-fields-sdk", - "version": "1.2.7", + "version": "1.2.8", "description": "Hosted fields sdk", "main": "dist/index.js", "module": "dist/esm/index.js", From 09973bbcc84067eed445d58d4e5bceaad02d8049 Mon Sep 17 00:00:00 2001 From: Seras3 Date: Mon, 11 Aug 2025 14:33:24 +0300 Subject: [PATCH 5/5] Remove unused files --- actions.js | 1 - index.js | 1 - 2 files changed, 2 deletions(-) delete mode 100644 actions.js delete mode 100644 index.js diff --git a/actions.js b/actions.js deleted file mode 100644 index 4089637..0000000 --- a/actions.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.actions=void 0;var _freeze=require("babel-runtime/core-js/object/freeze"),_freeze2=_interopRequireDefault(_freeze),actions=exports.actions={get:"get",setupContent:"setupContent",formData:"formData",formSubmit:"formSubmit"};_freeze2["default"](actions); \ No newline at end of file diff --git a/index.js b/index.js deleted file mode 100644 index 4ac935a..0000000 --- a/index.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _api=require("./sdk/api");Object.defineProperty(exports,"HostedFields",{enumerable:!0,get:function(){return _api.HostedFields}});var _index=require("./sdk/model/field/index.js");Object.defineProperty(exports,"Field",{enumerable:!0,get:function(){return _index.Field}}),Object.defineProperty(exports,"FieldTypes",{enumerable:!0,get:function(){return _index.FieldTypes}}); \ No newline at end of file