diff --git a/dist/bundle.js b/dist/bundle.js
index 4f95990..697cd5b 100644
--- a/dist/bundle.js
+++ b/dist/bundle.js
@@ -1,2 +1,2 @@
 /*! For license information please see bundle.js.LICENSE.txt */
-!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("react"),require("react/jsx-runtime")):"function"==typeof define&&define.amd?define(["react","react/jsx-runtime"],n):"object"==typeof exports?exports.ReactHyperJs=n(require("react"),require("react/jsx-runtime")):e.ReactHyperJs=n(e.React,e[void 0])}(this,(e,n)=>(()=>{"use strict";var t={12(n){n.exports=e},402(e){e.exports=n}},o={};function r(e){var n=o[e];if(void 0!==n)return n.exports;var i=o[e]={exports:{}};return t[e](i,i.exports,r),i.exports}r.d=(e,n)=>{for(var t in n)r.o(n,t)&&!r.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:n[t]})},r.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i={};r.r(i),r.d(i,{ApplePayElement:()=>Ve,CardCVCElement:()=>Me,CardCVCField:()=>qe,CardCVCWidget:()=>Ue,CardElement:()=>be,CardExpiryElement:()=>we,CardExpiryField:()=>Ae,CardExpiryWidget:()=>ze,CardForm:()=>Te,CardNumberElement:()=>Ne,CardNumberField:()=>He,CardNumberWidget:()=>Oe,CardWidget:()=>Ie,Elements:()=>xe,ExpressCheckoutElement:()=>We,GooglePayElement:()=>De,HyperElements:()=>Be,HyperManagementElements:()=>Je,HyperPaymentMethodSession:()=>Fe,PayPalElement:()=>Ke,PaymentElement:()=>je,PaymentMethodsManagementElement:()=>Xe,PazeElement:()=>Ge,UnifiedCheckout:()=>_e,initPaymentSession:()=>he,useCardForm:()=>ke,useElements:()=>Se,useHyper:()=>Pe,usePaymentMethodSession:()=>Re,usePaymentSession:()=>ve,useStripe:()=>Ce,useWidgets:()=>Ee});var u=r(12),a=r(402),c={on:function(e,n){},collapse:function(){},blur:function(){},update:function(e){},destroy:function(){},unmount:function(){},mount:function(e){},focus:function(){},clear:function(){},onSDKHandleClick:function(e){}},s={mount:function(e){},unmount:function(){},destroy:function(){},update:function(e){},focus:function(){},blur:function(){},clear:function(){},on:function(e,n){}};function f(e,n){var t={};t.code=e,t.message=n;var o={status:"error"};return o.error=t,o}function l(){return f("sdk_not_ready","Hyper is not initialized yet — the card form is not ready")}function m(e,n,t){return f("unsupported_on_surface",e+"() is not available on the "+n+" surface — use "+t+"()")}var d=function(e){if("string"==typeof e)return e},p=function(e){if("object"==typeof e&&!Array.isArray(e)&&null!==e)return e},y=function(e){if(Array.isArray(e))return e};function P(e,n,t){for(var o=new Array(t),r=0,i=n;r<t;)o[r]=e[i],r=r+1|0,i=i+1|0;return o}function C(e,n){for(;;){var t=n,o=e,r=o.length,i=0===r?1:r,u=i-t.length|0;if(0===u)return o.apply(null,t);if(u>=0)return function(e,n){return function(t){return C(e,n.concat([t]))}}(o,t);n=P(t,i,0|-u),e=o.apply(null,P(t,0,i))}}function v(e){return 1===e.length?e:function(n){return function(e,n){var t=e.length;if(1===t)return e(n);switch(t){case 1:return e(n);case 2:return function(t){return e(n,t)};case 3:return function(t,o){return e(n,t,o)};case 4:return function(t,o,r){return e(n,t,o,r)};case 5:return function(t,o,r,i){return e(n,t,o,r,i)};case 6:return function(t,o,r,i,u){return e(n,t,o,r,i,u)};case 7:return function(t,o,r,i,u,a){return e(n,t,o,r,i,u,a)};default:return C(e,[n])}}(e,n)}}function h(e){return void 0===e?{BS_PRIVATE_NESTED_SOME_NONE:0}:null!==e&&void 0!==e.BS_PRIVATE_NESTED_SOME_NONE?{BS_PRIVATE_NESTED_SOME_NONE:e.BS_PRIVATE_NESTED_SOME_NONE+1|0}:e}function g(e){if(null===e||void 0===e.BS_PRIVATE_NESTED_SOME_NONE)return e;var n=e.BS_PRIVATE_NESTED_SOME_NONE;return 0===n?void 0:{BS_PRIVATE_NESTED_SOME_NONE:n-1|0}}function E(e,n){return function(e,n){if(void 0!==e)return n(g(e))}(e,v(n))}function k(e,n){if(void 0!==e)return n(g(e))}function R(e,n){return void 0!==e?g(e):n}function S(e){return e}var x={getCustomerSavedPaymentMethods:function(e){return Promise.resolve(null)},updateIntent:function(e){return Promise.resolve({})}},B={clientSecret:"",confirmPayment:function(e){return Promise.resolve({})},confirmCardPayment:function(e,n,t){return Promise.resolve({})},retrievePaymentIntent:function(e){return Promise.resolve({})},paymentRequest:S,initPaymentSession:function(e){return x},completeUpdateIntent:function(e){return Promise.resolve({})},initiateUpdateIntent:function(){return Promise.resolve({})},confirmTokenization:function(e){return Promise.resolve({})}},F=u.createContext(B),T={make:F.Provider},j={ephemeralKey:"",paymentRequest:S},_=u.createContext(j),b={make:F.Provider};function I(e,n,t){return R(E(e[n],d),t)}function N(e){var n=R(p(e),{});return{fonts:R(E(n.fonts,y),[]),locale:I(n,"locale",""),clientSecret:I(n,"clientSecret",""),appearance:R(E(n.appearance,p),{}),loader:I(n,"loader","auto")}}function O(e){}function M(e){}function U(){return new Promise(function(e,n){setTimeout(function(){e({})},1e3)})}function w(e,n){return c}var z={create:function(e,n){return s},on:function(e,n){},confirmPayment:function(){return Promise.resolve(l())},deinit:function(){},update:function(e){},fields:{contents:{}}},H={options:{fonts:[],locale:"",clientSecret:"",appearance:{},loader:""},update:O,getElement:M,fetchUpdates:U,create:w,updateIntent:function(e){return Promise.resolve({})},createCardForm:function(){return z},isReady:!1},A=u.createContext(H),q={make:A.Provider},D={createField:function(e,n){return s},confirmPayment:function(){return Promise.resolve(l())},tokenize:function(){return Promise.resolve(l())},on:function(e,n){},update:function(e){},deinit:function(){},getFields:function(){return{}},isReady:!1},V=u.createContext(D),G={make:V.Provider},K={session:void 0,isPresent:!0},W=u.createContext({session:void 0,isPresent:!1}),J={make:W.Provider},X={getCustomerSavedPaymentMethods:function(e){return Promise.resolve({})},updateIntent:function(e){return Promise.resolve({})}},L=u.createContext(X),Q={make:L.Provider},Y={options:{fonts:[],locale:"",ephemeralKey:"",appearance:{},loader:""},update:O,getElement:M,fetchUpdates:U,create:w},Z=u.createContext(Y),$={make:Z.Provider},ee=function(e){var n=e.imperativeRef,t=e.onPaymentButtonClick,o=e.onPaymentComplete,r=e.onClick,i=e.onBlur,c=e.onFocus,s=e.componentType,f=e.onReady,l=e.onChange,m=e.options,d=e.id,p=void 0!==d?d:"payment-Element",y=void 0!==n?g(n):null,P=u.useContext(F),C=u.useContext(A),v=u.useRef(null),E=C.create(s,m);return u.useImperativeHandle(y,function(){return{confirmPayment:P.confirmPayment}},[P]),u.useEffect(function(){C.create(s,m).mount("#orca-elements-payment-element-"+p)},[v,C]),u.useEffect(function(){E.on("ready",f),E.on("focus",c),E.on("blur",i),E.on("clickTriggered",r),E.on("change",l),E.on("completeDoThis",o),E.onSDKHandleClick(t)},[C,P]),a.jsx("div",{ref:h(v),id:"orca-elements-payment-element-"+p})},ne=function(e){return a.jsx(ee,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"cardCvc",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick,onPaymentComplete:e.onPaymentComplete,onPaymentButtonClick:e.onPaymentButtonClick})},te=u.forwardRef(function(e,n){var t=e.onReady,o=e.onChange,r=u.useContext(A),i=u.useContext(W),c=u.useRef(!1),s=u.useState(function(){return D}),f=s[1],l=s[0];return u.useEffect(function(){if(!c.current)if(i.isPresent)k(i.session,function(e){var n=e.createCardForm();c.current=!0,f(function(e){return{createField:n.create,confirmPayment:function(){return Promise.resolve(m("confirmPayment","vault","tokenize"))},tokenize:n.tokenize,on:n.on,update:n.update,deinit:n.deinit,getFields:function(){return n.fields.contents},isReady:!0}})});else if(r.isReady){var e=r.createCardForm();c.current=!0,f(function(n){return{createField:e.create,confirmPayment:e.confirmPayment,tokenize:function(){return Promise.resolve(m("tokenize","payments","confirmPayment"))},on:e.on,update:e.update,deinit:e.deinit,getFields:function(){return e.fields.contents},isReady:!0}})}},[r,i]),u.useEffect(function(){l.isReady&&(k(o,function(e){l.on("change",e)}),k(t,function(e){l.on("ready",e)}))}),u.useImperativeHandle(n,function(){return{confirmPayment:l.confirmPayment,tokenize:l.tokenize,update:l.update,deinit:l.deinit,on:l.on,getFields:l.getFields}},[l]),a.jsx(G.make,{value:l,children:e.children})});function oe(e){return Promise.resolve(e)}function re(e,n){return e.catch(function(e){return n(function(e){return null!=e&&"string"==typeof e.RE_EXN_ID}(t=e)?t:{RE_EXN_ID:"JsError",_1:t});var t})}new Map;var ie=function(e){return a.jsx(ee,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"cardExpiry",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick,onPaymentComplete:e.onPaymentComplete,onPaymentButtonClick:e.onPaymentButtonClick})},ue=function(e){return a.jsx(ee,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"cardNumber",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick,onPaymentComplete:e.onPaymentComplete,onPaymentButtonClick:e.onPaymentButtonClick})},ae=function(e){return a.jsx(ee,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"card",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick,onPaymentComplete:e.onPaymentComplete,onPaymentButtonClick:e.onPaymentButtonClick})},ce=function(e){var n=e.imperativeRef,t=e.onBlur,o=e.onFocus,r=e.onReady,i=e.onChange,c=e.fieldType,s=void 0!==n?g(n):null,f=u.useContext(V),l=u.useRef(null),m=u.useRef(void 0),d=u.useRef(!1),p="hyper-card-field-"+R(e.id,c),y=R(e.options,{}),P=JSON.stringify(y),C=function(e){k(i,function(n){e.on("change",n)}),k(r,function(n){e.on("ready",n)}),k(o,function(n){e.on("focus",n)}),k(t,function(n){e.on("blur",n)})};return u.useEffect(function(){if(f.isReady){var e,n=m.current;if(void 0!==n)e=n;else{var t=f.createField(c,y);m.current=t,e=t}return C(e),e.mount("#"+p),function(){e.unmount()}}},[f.isReady,p]),u.useEffect(function(){k(m.current,C)}),u.useEffect(function(){d.current?k(m.current,function(e){e.update(y)}):d.current=!0},[P]),u.useImperativeHandle(s,function(){return{mount:function(e){k(m.current,function(n){n.mount(e)})},unmount:function(){k(m.current,function(e){e.unmount()})},destroy:function(){k(m.current,function(e){e.destroy()})},update:function(e){k(m.current,function(n){n.update(e)})},focus:function(){k(m.current,function(e){e.focus()})},blur:function(){k(m.current,function(e){e.blur()})},clear:function(){k(m.current,function(e){e.clear()})},on:function(e,n){k(m.current,function(t){t.on(e,n)})}}},[]),a.jsx("div",{ref:h(l),id:p})},se=u.forwardRef(function(e,n){return a.jsx(ce,{fieldType:"cardCvc",id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,onFocus:e.onFocus,onBlur:e.onBlur,imperativeRef:h(n)})}),fe=u.forwardRef(function(e,n){return a.jsx(ee,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"payment",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick,onPaymentComplete:e.onPaymentComplete,onPaymentButtonClick:e.onPaymentButtonClick,imperativeRef:h(n)})}),le=u.forwardRef(function(e,n){return a.jsx(ce,{fieldType:"cardExpiry",id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,onFocus:e.onFocus,onBlur:e.onBlur,imperativeRef:h(n)})}),me=u.forwardRef(function(e,n){return a.jsx(ce,{fieldType:"cardNumber",id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,onFocus:e.onFocus,onBlur:e.onBlur,imperativeRef:h(n)})});function de(){var e,n,t="function"==typeof Symbol?Symbol:{},o=t.iterator||"@@iterator",r=t.toStringTag||"@@toStringTag";function i(t,o,r,i){var c=o&&o.prototype instanceof a?o:a,s=Object.create(c.prototype);return pe(s,"_invoke",function(t,o,r){var i,a,c,s=0,f=r||[],l=!1,m={p:0,n:0,v:e,a:d,f:d.bind(e,4),d:function(n,t){return i=n,a=0,c=e,m.n=t,u}};function d(t,o){for(a=t,c=o,n=0;!l&&s&&!r&&n<f.length;n++){var r,i=f[n],d=m.p,p=i[2];t>3?(r=p===o)&&(c=i[(a=i[4])?5:(a=3,3)],i[4]=i[5]=e):i[0]<=d&&((r=t<2&&d<i[1])?(a=0,m.v=o,m.n=i[1]):d<p&&(r=t<3||i[0]>o||o>p)&&(i[4]=t,i[5]=o,m.n=p,a=0))}if(r||t>1)return u;throw l=!0,o}return function(r,f,p){if(s>1)throw TypeError("Generator is already running");for(l&&1===f&&d(f,p),a=f,c=p;(n=a<2?e:c)||!l;){i||(a?a<3?(a>1&&(m.n=-1),d(a,c)):m.n=c:m.v=c);try{if(s=2,i){if(a||(r="next"),n=i[r]){if(!(n=n.call(i,c)))throw TypeError("iterator result is not an object");if(!n.done)return n;c=n.value,a<2&&(a=0)}else 1===a&&(n=i.return)&&n.call(i),a<2&&(c=TypeError("The iterator does not provide a '"+r+"' method"),a=1);i=e}else if((n=(l=m.n<0)?c:t.call(o,m))!==u)break}catch(n){i=e,a=1,c=n}finally{s=1}}return{value:n,done:l}}}(t,r,i),!0),s}var u={};function a(){}function c(){}function s(){}n=Object.getPrototypeOf;var f=[][o]?n(n([][o]())):(pe(n={},o,function(){return this}),n),l=s.prototype=a.prototype=Object.create(f);function m(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,s):(e.__proto__=s,pe(e,r,"GeneratorFunction")),e.prototype=Object.create(l),e}return c.prototype=s,pe(l,"constructor",s),pe(s,"constructor",c),c.displayName="GeneratorFunction",pe(s,r,"GeneratorFunction"),pe(l),pe(l,r,"Generator"),pe(l,o,function(){return this}),pe(l,"toString",function(){return"[object Generator]"}),(de=function(){return{w:i,m}})()}function pe(e,n,t,o){var r=Object.defineProperty;try{r({},"",{})}catch(e){r=0}pe=function(e,n,t,o){function i(n,t){pe(e,n,function(e){return this._invoke(n,t,e)})}n?r?r(e,n,{value:t,enumerable:!o,configurable:!o,writable:!o}):e[n]=t:(i("next",0),i("throw",1),i("return",2))},pe(e,n,t,o)}function ye(e,n,t,o,r,i,u){try{var a=e[i](u),c=a.value}catch(e){return void t(e)}a.done?n(c):Promise.resolve(c).then(o,r)}function Pe(){return u.useContext(F)}function Ce(){return console.warn("useStripe() is deprecated. Use useHyper() instead"),u.useContext(F)}function ve(){return u.useContext(L)}function he(e,n){return ge.apply(this,arguments)}function ge(){var e;return e=de().m(function e(n,t){var o;return de().w(function(e){for(;;)switch(e.n){case 0:return e.n=1,n;case 1:return o=e.v,e.a(2,o.initPaymentSession(t))}},e)}),ge=function(){var n=this,t=arguments;return new Promise(function(o,r){var i=e.apply(n,t);function u(e){ye(i,o,r,u,a,"next",e)}function a(e){ye(i,o,r,u,a,"throw",e)}u(void 0)})},ge.apply(this,arguments)}function Ee(){return u.useContext(A)}function ke(){return u.useContext(V)}function Re(){return u.useContext(W)}function Se(){return console.warn("useElements() is deprecated. Use useWidgets() instead"),u.useContext(A)}var xe=function(e){var n=e.options,t=e.stripe,o=u.useState(function(){return B}),r=o[1],i=u.useState(function(){return H}),c=i[1];return u.useEffect(function(){re(Promise.all([t,oe(n)]).then(function(e){var n=e[1],t=e[0],o=N(n),i=t.elements(n),u={options:o,update:i.update,getElement:i.getElement,fetchUpdates:i.fetchUpdates,create:i.create,updateIntent:i.updateIntent,createCardForm:i.createCardForm,isReady:!0},a={clientSecret:o.clientSecret,confirmPayment:t.confirmPayment,confirmCardPayment:t.confirmCardPayment,retrievePaymentIntent:t.retrievePaymentIntent,paymentRequest:t.paymentRequest,initPaymentSession:t.initPaymentSession,completeUpdateIntent:t.completeUpdateIntent,initiateUpdateIntent:t.initiateUpdateIntent,confirmTokenization:t.confirmTokenization};return r(function(e){return a}),c(function(e){return u}),Promise.resolve(a)}),function(e){return console.error("[Elements] Failed to initialise hyper promise:",e),Promise.resolve(B)})},[t,n]),a.jsx(T.make,{value:o[0],children:a.jsx(q.make,{value:i[0],children:e.children})})},Be=function(e){var n=e.options,t=e.hyper,o=u.useState(function(){return B}),r=o[1],i=u.useState(function(){return H}),c=i[1],s=u.useState(function(){return X}),f=s[1];return u.useEffect(function(){re(Promise.all([t,oe(n)]).then(function(e){var n=e[1],t=e[0],o=N(n),i=t.elements(n),u={options:o,update:i.update,getElement:i.getElement,fetchUpdates:i.fetchUpdates,create:i.create,updateIntent:i.updateIntent,createCardForm:i.createCardForm,isReady:!0},a={clientSecret:o.clientSecret,confirmPayment:t.confirmPayment,confirmCardPayment:t.confirmCardPayment,retrievePaymentIntent:t.retrievePaymentIntent,paymentRequest:t.paymentRequest,initPaymentSession:t.initPaymentSession,completeUpdateIntent:t.completeUpdateIntent,initiateUpdateIntent:t.initiateUpdateIntent,confirmTokenization:t.confirmTokenization},s=t.initPaymentSession(n),l={getCustomerSavedPaymentMethods:s.getCustomerSavedPaymentMethods,updateIntent:s.updateIntent};return r(function(e){return a}),c(function(e){return u}),f(function(e){return l}),Promise.resolve(a)}),function(e){return console.error("[HyperElements] Failed to initialise hyper promise:",e),Promise.resolve(B)})},[t,n]),a.jsx(T.make,{value:o[0],children:a.jsx(q.make,{value:i[0],children:a.jsx(Q.make,{value:s[0],children:e.children})})})},Fe=function(e){var n=e.options,t=e.hyper,o=u.useState(function(){return K}),r=o[1];return u.useEffect(function(){re(Promise.all([t,oe(n)]).then(function(e){var n={session:e[0].initPaymentMethodSession(e[1]),isPresent:!0};return r(function(e){return n}),Promise.resolve(n)}),function(e){return console.error("[HyperPaymentMethodSession] Failed to initialise hyper promise:",e),Promise.resolve(K)})},[t,n]),a.jsx(J.make,{value:o[0],children:e.children})},Te=te,je=fe,_e=fe,be=ae,Ie=ae,Ne=ue,Oe=ue,Me=ne,Ue=ne,we=ie,ze=ie,He=me,Ae=le,qe=se,De=function(e){return a.jsx(ee,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"googlePay",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick,onPaymentComplete:e.onPaymentComplete,onPaymentButtonClick:e.onPaymentButtonClick})},Ve=function(e){return a.jsx(ee,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"applePay",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick,onPaymentComplete:e.onPaymentComplete,onPaymentButtonClick:e.onPaymentButtonClick})},Ge=function(e){return a.jsx(ee,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"paze",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick,onPaymentComplete:e.onPaymentComplete,onPaymentButtonClick:e.onPaymentButtonClick})},Ke=function(e){return a.jsx(ee,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"payPal",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick,onPaymentComplete:e.onPaymentComplete,onPaymentButtonClick:e.onPaymentButtonClick})},We=function(e){return a.jsx(ee,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"expressCheckout",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick,onPaymentComplete:e.onPaymentComplete,onPaymentButtonClick:e.onPaymentButtonClick})},Je=function(e){var n=e.options,t=e.hyper,o=u.useState(function(){return B}),r=o[1],i=u.useState(function(){return Y}),c=i[1];return u.useEffect(function(){re(Promise.all([t,oe(n)]).then(function(e){var n=e[1],t=e[0],o=function(e){var n=R(p(e),{});return{fonts:R(E(n.fonts,y),[]),locale:I(n,"locale",""),ephemeralKey:I(n,"ephemeralKey",""),appearance:R(E(n.appearance,p),{}),loader:I(n,"loader","auto")}}(n),i=t.paymentMethodsManagementElements(n),u={options:o,update:i.update,getElement:i.getElement,fetchUpdates:i.fetchUpdates,create:i.create},a={clientSecret:"",confirmPayment:t.confirmPayment,confirmCardPayment:t.confirmCardPayment,retrievePaymentIntent:t.retrievePaymentIntent,paymentRequest:t.paymentRequest,initPaymentSession:t.initPaymentSession,completeUpdateIntent:t.completeUpdateIntent,initiateUpdateIntent:t.initiateUpdateIntent,confirmTokenization:t.confirmTokenization};return r(function(e){return a}),c(function(e){return u}),Promise.resolve(a)}),function(e){return console.error("[HyperManagementElements] Failed to initialise hyper promise:",e),Promise.resolve(B)})},[t,n]),a.jsx(b.make,{value:o[0],children:a.jsx($.make,{value:i[0],children:e.children})})},Xe=function(e){var n=e.onClick,t=e.onBlur,o=e.onFocus,r=e.componentType,i=e.onReady,c=e.onChange,s=e.options,f=e.id,l=void 0!==f?f:"payment-management",m=void 0!==r?r:"paymentMethodsManagement",d=u.useContext(_),p=u.useContext(Z),y=u.useRef(null),P=p.create(m,s);return u.useEffect(function(){p.create(m,s).mount("#orca-elements-payment-management-"+l)},[y,p]),u.useEffect(function(){return P.on("ready",i),P.on("focus",o),P.on("blur",t),P.on("clickTriggered",n),P.on("change",c),function(){P.on("ready",void 0),P.on("focus",void 0),P.on("blur",void 0),P.on("clickTriggered",void 0),P.on("change",void 0)}},[p,d]),a.jsx("div",{ref:h(y),id:"orca-elements-payment-management-"+l})};return i})());
\ No newline at end of file
+!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("react"),require("react/jsx-runtime")):"function"==typeof define&&define.amd?define(["react","react/jsx-runtime"],n):"object"==typeof exports?exports.ReactHyperJs=n(require("react"),require("react/jsx-runtime")):e.ReactHyperJs=n(e.React,e[void 0])}(this,(e,n)=>(()=>{"use strict";var t={12(n){n.exports=e},402(e){e.exports=n}},o={};function r(e){var n=o[e];if(void 0!==n)return n.exports;var i=o[e]={exports:{}};return t[e](i,i.exports,r),i.exports}r.d=(e,n)=>{for(var t in n)r.o(n,t)&&!r.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:n[t]})},r.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i={};r.r(i),r.d(i,{ApplePayElement:()=>Ge,CardCVCElement:()=>Me,CardCVCField:()=>De,CardCVCWidget:()=>Ue,CardElement:()=>be,CardExpiryElement:()=>we,CardExpiryField:()=>qe,CardExpiryWidget:()=>He,CardForm:()=>je,CardNumberElement:()=>Oe,CardNumberField:()=>Ae,CardNumberWidget:()=>ze,CardWidget:()=>Ne,Elements:()=>Be,ExpressCheckoutElement:()=>Je,GooglePayElement:()=>Ve,HyperElements:()=>Fe,HyperManagementElements:()=>Xe,HyperPaymentMethodSession:()=>Te,PayPalElement:()=>We,PaymentElement:()=>_e,PaymentMethodsManagementElement:()=>Le,PazeElement:()=>Ke,UnifiedCheckout:()=>Ie,initPaymentSession:()=>ge,useCardForm:()=>Re,useElements:()=>xe,useHyper:()=>Ce,usePaymentMethodSession:()=>Se,usePaymentSession:()=>he,useStripe:()=>ve,useWidgets:()=>Ee});var u=r(12),a=r(402),c={on:function(e,n){},collapse:function(){},blur:function(){},update:function(e){},destroy:function(){},unmount:function(){},mount:function(e){},focus:function(){},clear:function(){},onSDKHandleClick:function(e){}},s={mount:function(e){},unmount:function(){},destroy:function(){},update:function(e){},focus:function(){},blur:function(){},clear:function(){},on:function(e,n){}};function f(e,n){var t={};t.code=e,t.message=n;var o={status:"error"};return o.error=t,o}function l(){return f("sdk_not_ready","Hyper is not initialized yet — the card form is not ready")}function m(e,n,t){return f("unsupported_on_surface",e+"() is not available on the "+n+" surface — use "+t+"()")}var d=function(e){if("string"==typeof e)return e},p=function(e){if("object"==typeof e&&!Array.isArray(e)&&null!==e)return e},y=function(e){if(Array.isArray(e))return e};function P(e,n,t){for(var o=new Array(t),r=0,i=n;r<t;)o[r]=e[i],r=r+1|0,i=i+1|0;return o}function C(e,n){for(;;){var t=n,o=e,r=o.length,i=0===r?1:r,u=i-t.length|0;if(0===u)return o.apply(null,t);if(u>=0)return function(e,n){return function(t){return C(e,n.concat([t]))}}(o,t);n=P(t,i,0|-u),e=o.apply(null,P(t,0,i))}}function v(e){return 1===e.length?e:function(n){return function(e,n){var t=e.length;if(1===t)return e(n);switch(t){case 1:return e(n);case 2:return function(t){return e(n,t)};case 3:return function(t,o){return e(n,t,o)};case 4:return function(t,o,r){return e(n,t,o,r)};case 5:return function(t,o,r,i){return e(n,t,o,r,i)};case 6:return function(t,o,r,i,u){return e(n,t,o,r,i,u)};case 7:return function(t,o,r,i,u,a){return e(n,t,o,r,i,u,a)};default:return C(e,[n])}}(e,n)}}function h(e){return void 0===e?{BS_PRIVATE_NESTED_SOME_NONE:0}:null!==e&&void 0!==e.BS_PRIVATE_NESTED_SOME_NONE?{BS_PRIVATE_NESTED_SOME_NONE:e.BS_PRIVATE_NESTED_SOME_NONE+1|0}:e}function g(e){if(null===e||void 0===e.BS_PRIVATE_NESTED_SOME_NONE)return e;var n=e.BS_PRIVATE_NESTED_SOME_NONE;return 0===n?void 0:{BS_PRIVATE_NESTED_SOME_NONE:n-1|0}}function k(e,n){return function(e,n){if(void 0!==e)return n(g(e))}(e,v(n))}function E(e,n){if(void 0!==e)return n(g(e))}function R(e,n){return void 0!==e?g(e):n}function S(e){return e}var x={getCustomerSavedPaymentMethods:function(e){return Promise.resolve(null)},updateIntent:function(e){return Promise.resolve({})}},B={clientSecret:"",confirmPayment:function(e){return Promise.resolve({})},confirmCardPayment:function(e,n,t){return Promise.resolve({})},retrievePaymentIntent:function(e){return Promise.resolve({})},paymentRequest:S,initPaymentSession:function(e){return x},completeUpdateIntent:function(e){return Promise.resolve({})},initiateUpdateIntent:function(){return Promise.resolve({})},confirmTokenization:function(e){return Promise.resolve({})},tokenize:function(e){return Promise.resolve({})}},F=u.createContext(B),T={make:F.Provider},j={ephemeralKey:"",paymentRequest:S},_=(u.createContext(j),{make:F.Provider});function I(e,n,t){return R(k(e[n],d),t)}function b(e){var n=R(p(e),{});return{fonts:R(k(n.fonts,y),[]),locale:I(n,"locale",""),clientSecret:I(n,"clientSecret",""),appearance:R(k(n.appearance,p),{}),loader:I(n,"loader","auto")}}function N(e){}function O(e){}function z(){return new Promise(function(e,n){setTimeout(function(){e({})},1e3)})}function M(e,n){return c}var U={create:function(e,n){return s},on:function(e,n){},confirmPayment:function(){return Promise.resolve(l())},deinit:function(){},update:function(e){},fields:{contents:{}}},w={options:{fonts:[],locale:"",clientSecret:"",appearance:{},loader:""},update:N,getElement:O,fetchUpdates:z,create:M,updateIntent:function(e){return Promise.resolve({})},createCardForm:function(){return U},isReady:!1},H=u.createContext(w),A={make:H.Provider},q={createField:function(e,n){return s},confirmPayment:function(){return Promise.resolve(l())},tokenize:function(){return Promise.resolve(l())},on:function(e,n){},update:function(e){},deinit:function(){},getFields:function(){return{}},isReady:!1},D=u.createContext(q),V={make:D.Provider},G={session:void 0,isPresent:!0},K=u.createContext({session:void 0,isPresent:!1}),W={make:K.Provider},J={getCustomerSavedPaymentMethods:function(e){return Promise.resolve({})},updateIntent:function(e){return Promise.resolve({})}},X=u.createContext(J),L={make:X.Provider},Q={options:{fonts:[],locale:"",ephemeralKey:"",appearance:{},loader:""},update:N,getElement:O,fetchUpdates:z,create:M},Y=u.createContext(Q),Z={make:Y.Provider},$=function(e){var n=e.imperativeRef,t=e.onPaymentButtonClick,o=e.onPaymentComplete,r=e.onClick,i=e.onBlur,c=e.onFocus,s=e.componentType,f=e.onReady,l=e.onChange,m=e.options,d=e.id,p=void 0!==d?d:"payment-Element",y=void 0!==n?g(n):null,P=u.useContext(F),C=u.useContext(H),v=u.useRef(null),k=C.create(s,m);return u.useImperativeHandle(y,function(){return{confirmPayment:P.confirmPayment}},[P]),u.useEffect(function(){C.create(s,m).mount("#orca-elements-payment-element-"+p)},[v,C]),u.useEffect(function(){k.on("ready",f),k.on("focus",c),k.on("blur",i),k.on("clickTriggered",r),k.on("change",l),k.on("completeDoThis",o),k.onSDKHandleClick(t)},[C,P]),a.jsx("div",{ref:h(v),id:"orca-elements-payment-element-"+p})},ee=function(e){return a.jsx($,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"cardCvc",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick,onPaymentComplete:e.onPaymentComplete,onPaymentButtonClick:e.onPaymentButtonClick})},ne=u.forwardRef(function(e,n){var t=e.onReady,o=e.onChange,r=u.useContext(H),i=u.useContext(K),c=u.useRef(!1),s=u.useState(function(){return q}),f=s[1],l=s[0];return u.useEffect(function(){if(!c.current)if(i.isPresent)E(i.session,function(e){var n=e.createCardForm();c.current=!0,f(function(e){return{createField:n.create,confirmPayment:function(){return Promise.resolve(m("confirmPayment","vault","tokenize"))},tokenize:n.tokenize,on:n.on,update:n.update,deinit:n.deinit,getFields:function(){return n.fields.contents},isReady:!0}})});else if(r.isReady){var e=r.createCardForm();c.current=!0,f(function(n){return{createField:e.create,confirmPayment:e.confirmPayment,tokenize:function(){return Promise.resolve(m("tokenize","payments","confirmPayment"))},on:e.on,update:e.update,deinit:e.deinit,getFields:function(){return e.fields.contents},isReady:!0}})}},[r,i]),u.useEffect(function(){l.isReady&&(E(o,function(e){l.on("change",e)}),E(t,function(e){l.on("ready",e)}))}),u.useImperativeHandle(n,function(){return{confirmPayment:l.confirmPayment,tokenize:l.tokenize,update:l.update,deinit:l.deinit,on:l.on,getFields:l.getFields}},[l]),a.jsx(V.make,{value:l,children:e.children})});function te(e){return Promise.resolve(e)}function oe(e,n){return e.catch(function(e){return n(function(e){return null!=e&&"string"==typeof e.RE_EXN_ID}(t=e)?t:{RE_EXN_ID:"JsError",_1:t});var t})}new Map;var re=function(e){return a.jsx($,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"cardExpiry",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick,onPaymentComplete:e.onPaymentComplete,onPaymentButtonClick:e.onPaymentButtonClick})},ie=function(e){return a.jsx($,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"cardNumber",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick,onPaymentComplete:e.onPaymentComplete,onPaymentButtonClick:e.onPaymentButtonClick})},ue=function(e){return a.jsx($,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"card",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick,onPaymentComplete:e.onPaymentComplete,onPaymentButtonClick:e.onPaymentButtonClick})},ae=function(e){var n=e.imperativeRef,t=e.onBlur,o=e.onFocus,r=e.onReady,i=e.onChange,c=e.fieldType,s=void 0!==n?g(n):null,f=u.useContext(D),l=u.useRef(null),m=u.useRef(void 0),d=u.useRef(!1),p="hyper-card-field-"+R(e.id,c),y=R(e.options,{}),P=JSON.stringify(y),C=function(e){E(i,function(n){e.on("change",n)}),E(r,function(n){e.on("ready",n)}),E(o,function(n){e.on("focus",n)}),E(t,function(n){e.on("blur",n)})};return u.useEffect(function(){if(f.isReady){var e,n=m.current;if(void 0!==n)e=n;else{var t=f.createField(c,y);m.current=t,e=t}return C(e),e.mount("#"+p),function(){e.unmount()}}},[f.isReady,p]),u.useEffect(function(){E(m.current,C)}),u.useEffect(function(){d.current?E(m.current,function(e){e.update(y)}):d.current=!0},[P]),u.useImperativeHandle(s,function(){return{mount:function(e){E(m.current,function(n){n.mount(e)})},unmount:function(){E(m.current,function(e){e.unmount()})},destroy:function(){E(m.current,function(e){e.destroy()})},update:function(e){E(m.current,function(n){n.update(e)})},focus:function(){E(m.current,function(e){e.focus()})},blur:function(){E(m.current,function(e){e.blur()})},clear:function(){E(m.current,function(e){e.clear()})},on:function(e,n){E(m.current,function(t){t.on(e,n)})}}},[]),a.jsx("div",{ref:h(l),id:p})},ce=u.forwardRef(function(e,n){return a.jsx(ae,{fieldType:"cardCvc",id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,onFocus:e.onFocus,onBlur:e.onBlur,imperativeRef:h(n)})}),se=u.forwardRef(function(e,n){return a.jsx($,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"payment",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick,onPaymentComplete:e.onPaymentComplete,onPaymentButtonClick:e.onPaymentButtonClick,imperativeRef:h(n)})}),fe=u.forwardRef(function(e,n){return a.jsx(ae,{fieldType:"cardExpiry",id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,onFocus:e.onFocus,onBlur:e.onBlur,imperativeRef:h(n)})}),le=u.forwardRef(function(e,n){return a.jsx(ae,{fieldType:"cardNumber",id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,onFocus:e.onFocus,onBlur:e.onBlur,imperativeRef:h(n)})}),me=function(e){var n=e.imperativeRef,t=e.onClick,o=e.onBlur,r=e.onFocus,i=e.componentType,c=e.onReady,s=e.onChange,f=e.options,l=e.id,m=void 0!==l?l:"payment-management",d=void 0!==i?i:"paymentMethodsManagement",p=void 0!==n?g(n):null,y=u.useContext(F),P=u.useContext(Y),C=u.useRef(null),v=P.create(d,f);return u.useImperativeHandle(p,function(){return{confirmTokenization:y.confirmTokenization,tokenize:y.tokenize}},[y]),u.useEffect(function(){P.create(d,f).mount("#orca-elements-payment-management-"+m)},[C,P]),u.useEffect(function(){return v.on("ready",c),v.on("focus",r),v.on("blur",o),v.on("clickTriggered",t),v.on("change",s),function(){v.on("ready",void 0),v.on("focus",void 0),v.on("blur",void 0),v.on("clickTriggered",void 0),v.on("change",void 0)}},[P,y]),a.jsx("div",{ref:h(C),id:"orca-elements-payment-management-"+m})},de=u.forwardRef(function(e,n){return a.jsx(me,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:e.componentType,onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick,imperativeRef:h(n)})});function pe(){var e,n,t="function"==typeof Symbol?Symbol:{},o=t.iterator||"@@iterator",r=t.toStringTag||"@@toStringTag";function i(t,o,r,i){var c=o&&o.prototype instanceof a?o:a,s=Object.create(c.prototype);return ye(s,"_invoke",function(t,o,r){var i,a,c,s=0,f=r||[],l=!1,m={p:0,n:0,v:e,a:d,f:d.bind(e,4),d:function(n,t){return i=n,a=0,c=e,m.n=t,u}};function d(t,o){for(a=t,c=o,n=0;!l&&s&&!r&&n<f.length;n++){var r,i=f[n],d=m.p,p=i[2];t>3?(r=p===o)&&(c=i[(a=i[4])?5:(a=3,3)],i[4]=i[5]=e):i[0]<=d&&((r=t<2&&d<i[1])?(a=0,m.v=o,m.n=i[1]):d<p&&(r=t<3||i[0]>o||o>p)&&(i[4]=t,i[5]=o,m.n=p,a=0))}if(r||t>1)return u;throw l=!0,o}return function(r,f,p){if(s>1)throw TypeError("Generator is already running");for(l&&1===f&&d(f,p),a=f,c=p;(n=a<2?e:c)||!l;){i||(a?a<3?(a>1&&(m.n=-1),d(a,c)):m.n=c:m.v=c);try{if(s=2,i){if(a||(r="next"),n=i[r]){if(!(n=n.call(i,c)))throw TypeError("iterator result is not an object");if(!n.done)return n;c=n.value,a<2&&(a=0)}else 1===a&&(n=i.return)&&n.call(i),a<2&&(c=TypeError("The iterator does not provide a '"+r+"' method"),a=1);i=e}else if((n=(l=m.n<0)?c:t.call(o,m))!==u)break}catch(n){i=e,a=1,c=n}finally{s=1}}return{value:n,done:l}}}(t,r,i),!0),s}var u={};function a(){}function c(){}function s(){}n=Object.getPrototypeOf;var f=[][o]?n(n([][o]())):(ye(n={},o,function(){return this}),n),l=s.prototype=a.prototype=Object.create(f);function m(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,s):(e.__proto__=s,ye(e,r,"GeneratorFunction")),e.prototype=Object.create(l),e}return c.prototype=s,ye(l,"constructor",s),ye(s,"constructor",c),c.displayName="GeneratorFunction",ye(s,r,"GeneratorFunction"),ye(l),ye(l,r,"Generator"),ye(l,o,function(){return this}),ye(l,"toString",function(){return"[object Generator]"}),(pe=function(){return{w:i,m}})()}function ye(e,n,t,o){var r=Object.defineProperty;try{r({},"",{})}catch(e){r=0}ye=function(e,n,t,o){function i(n,t){ye(e,n,function(e){return this._invoke(n,t,e)})}n?r?r(e,n,{value:t,enumerable:!o,configurable:!o,writable:!o}):e[n]=t:(i("next",0),i("throw",1),i("return",2))},ye(e,n,t,o)}function Pe(e,n,t,o,r,i,u){try{var a=e[i](u),c=a.value}catch(e){return void t(e)}a.done?n(c):Promise.resolve(c).then(o,r)}function Ce(){return u.useContext(F)}function ve(){return console.warn("useStripe() is deprecated. Use useHyper() instead"),u.useContext(F)}function he(){return u.useContext(X)}function ge(e,n){return ke.apply(this,arguments)}function ke(){var e;return e=pe().m(function e(n,t){var o;return pe().w(function(e){for(;;)switch(e.n){case 0:return e.n=1,n;case 1:return o=e.v,e.a(2,o.initPaymentSession(t))}},e)}),ke=function(){var n=this,t=arguments;return new Promise(function(o,r){var i=e.apply(n,t);function u(e){Pe(i,o,r,u,a,"next",e)}function a(e){Pe(i,o,r,u,a,"throw",e)}u(void 0)})},ke.apply(this,arguments)}function Ee(){return u.useContext(H)}function Re(){return u.useContext(D)}function Se(){return u.useContext(K)}function xe(){return console.warn("useElements() is deprecated. Use useWidgets() instead"),u.useContext(H)}var Be=function(e){var n=e.options,t=e.stripe,o=u.useState(function(){return B}),r=o[1],i=u.useState(function(){return w}),c=i[1];return u.useEffect(function(){oe(Promise.all([t,te(n)]).then(function(e){var n=e[1],t=e[0],o=b(n),i=t.elements(n),u={options:o,update:i.update,getElement:i.getElement,fetchUpdates:i.fetchUpdates,create:i.create,updateIntent:i.updateIntent,createCardForm:i.createCardForm,isReady:!0},a={clientSecret:o.clientSecret,confirmPayment:t.confirmPayment,confirmCardPayment:t.confirmCardPayment,retrievePaymentIntent:t.retrievePaymentIntent,paymentRequest:t.paymentRequest,initPaymentSession:t.initPaymentSession,completeUpdateIntent:t.completeUpdateIntent,initiateUpdateIntent:t.initiateUpdateIntent,confirmTokenization:t.confirmTokenization,tokenize:function(e){return Promise.resolve(m("tokenize","payments","confirmPayment"))}};return r(function(e){return a}),c(function(e){return u}),Promise.resolve(a)}),function(e){return console.error("[Elements] Failed to initialise hyper promise:",e),Promise.resolve(B)})},[t,n]),a.jsx(T.make,{value:o[0],children:a.jsx(A.make,{value:i[0],children:e.children})})},Fe=function(e){var n=e.options,t=e.hyper,o=u.useState(function(){return B}),r=o[1],i=u.useState(function(){return w}),c=i[1],s=u.useState(function(){return J}),f=s[1];return u.useEffect(function(){oe(Promise.all([t,te(n)]).then(function(e){var n=e[1],t=e[0],o=b(n),i=t.elements(n),u={options:o,update:i.update,getElement:i.getElement,fetchUpdates:i.fetchUpdates,create:i.create,updateIntent:i.updateIntent,createCardForm:i.createCardForm,isReady:!0},a={clientSecret:o.clientSecret,confirmPayment:t.confirmPayment,confirmCardPayment:t.confirmCardPayment,retrievePaymentIntent:t.retrievePaymentIntent,paymentRequest:t.paymentRequest,initPaymentSession:t.initPaymentSession,completeUpdateIntent:t.completeUpdateIntent,initiateUpdateIntent:t.initiateUpdateIntent,confirmTokenization:t.confirmTokenization,tokenize:function(e){return Promise.resolve(m("tokenize","payments","confirmPayment"))}},s=t.initPaymentSession(n),l={getCustomerSavedPaymentMethods:s.getCustomerSavedPaymentMethods,updateIntent:s.updateIntent};return r(function(e){return a}),c(function(e){return u}),f(function(e){return l}),Promise.resolve(a)}),function(e){return console.error("[HyperElements] Failed to initialise hyper promise:",e),Promise.resolve(B)})},[t,n]),a.jsx(T.make,{value:o[0],children:a.jsx(A.make,{value:i[0],children:a.jsx(L.make,{value:s[0],children:e.children})})})},Te=function(e){var n=e.options,t=e.hyper,o=u.useState(function(){return G}),r=o[1];return u.useEffect(function(){oe(Promise.all([t,te(n)]).then(function(e){var n={session:e[0].initPaymentMethodSession(e[1]),isPresent:!0};return r(function(e){return n}),Promise.resolve(n)}),function(e){return console.error("[HyperPaymentMethodSession] Failed to initialise hyper promise:",e),Promise.resolve(G)})},[t,n]),a.jsx(W.make,{value:o[0],children:e.children})},je=ne,_e=se,Ie=se,be=ue,Ne=ue,Oe=ie,ze=ie,Me=ee,Ue=ee,we=re,He=re,Ae=le,qe=fe,De=ce,Ve=function(e){return a.jsx($,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"googlePay",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick,onPaymentComplete:e.onPaymentComplete,onPaymentButtonClick:e.onPaymentButtonClick})},Ge=function(e){return a.jsx($,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"applePay",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick,onPaymentComplete:e.onPaymentComplete,onPaymentButtonClick:e.onPaymentButtonClick})},Ke=function(e){return a.jsx($,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"paze",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick,onPaymentComplete:e.onPaymentComplete,onPaymentButtonClick:e.onPaymentButtonClick})},We=function(e){return a.jsx($,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"payPal",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick,onPaymentComplete:e.onPaymentComplete,onPaymentButtonClick:e.onPaymentButtonClick})},Je=function(e){return a.jsx($,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"expressCheckout",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick,onPaymentComplete:e.onPaymentComplete,onPaymentButtonClick:e.onPaymentButtonClick})},Xe=function(e){var n=e.options,t=e.hyper,o=u.useState(function(){return B}),r=o[1],i=u.useState(function(){return Q}),c=i[1];return u.useEffect(function(){oe(Promise.all([t,te(n)]).then(function(e){var n=e[1],t=e[0],o=function(e){var n=R(p(e),{});return{fonts:R(k(n.fonts,y),[]),locale:I(n,"locale",""),ephemeralKey:I(n,"ephemeralKey",""),appearance:R(k(n.appearance,p),{}),loader:I(n,"loader","auto")}}(n),i=t.paymentMethodsManagementElements(n),u={options:o,update:i.update,getElement:i.getElement,fetchUpdates:i.fetchUpdates,create:i.create},a={clientSecret:"",confirmPayment:t.confirmPayment,confirmCardPayment:t.confirmCardPayment,retrievePaymentIntent:t.retrievePaymentIntent,paymentRequest:t.paymentRequest,initPaymentSession:t.initPaymentSession,completeUpdateIntent:t.completeUpdateIntent,initiateUpdateIntent:t.initiateUpdateIntent,confirmTokenization:t.confirmTokenization,tokenize:t.tokenize};return r(function(e){return a}),c(function(e){return u}),Promise.resolve(a)}),function(e){return console.error("[HyperManagementElements] Failed to initialise hyper promise:",e),Promise.resolve(B)})},[t,n]),a.jsx(_.make,{value:o[0],children:a.jsx(Z.make,{value:i[0],children:e.children})})},Le=de;return i})());
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index da5f633..af8f0c3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@juspay-tech/react-hyper-js",
-  "version": "2.9.0",
+  "version": "2.10.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@juspay-tech/react-hyper-js",
-      "version": "2.9.0",
+      "version": "2.10.0",
       "license": "Apache-2.0",
       "dependencies": {
         "@rescript/core": "^0.7.0",
diff --git a/package.json b/package.json
index 72dacfc..e865cab 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@juspay-tech/react-hyper-js",
-  "version": "2.9.0",
+  "version": "2.10.0",
   "main": "dist/bundle.js",
   "files": [
     "dist/",
diff --git a/src/Context.bs.js b/src/Context.bs.js
index 27e2003..8338266 100644
--- a/src/Context.bs.js
+++ b/src/Context.bs.js
@@ -51,6 +51,10 @@ function defaultSwitchContext_confirmTokenization(param) {
   return Promise.resolve({});
 }
 
+function defaultSwitchContext_tokenize(param) {
+  return Promise.resolve({});
+}
+
 var defaultSwitchContext = {
   clientSecret: "",
   confirmPayment: confirmPaymentFn,
@@ -60,7 +64,8 @@ var defaultSwitchContext = {
   initPaymentSession: defaultSwitchContext_initPaymentSession,
   completeUpdateIntent: defaultSwitchContext_completeUpdateIntent,
   initiateUpdateIntent: defaultSwitchContext_initiateUpdateIntent,
-  confirmTokenization: defaultSwitchContext_confirmTokenization
+  confirmTokenization: defaultSwitchContext_confirmTokenization,
+  tokenize: defaultSwitchContext_tokenize
 };
 
 var switchContext = React.createContext(defaultSwitchContext);
diff --git a/src/Context.res b/src/Context.res
index 4403944..51c5e2f 100644
--- a/src/Context.res
+++ b/src/Context.res
@@ -86,6 +86,7 @@ type switchContextType = {
   completeUpdateIntent: string => promise<JSON.t>,
   initiateUpdateIntent: unit => promise<JSON.t>,
   confirmTokenization: JSON.t => Promise.t<JSON.t>,
+  tokenize: JSON.t => Promise.t<JSON.t>,
 }
 
 type paymentMethodsManagementSwitchContextType = {
@@ -131,6 +132,7 @@ let defaultSwitchContext = {
   completeUpdateIntent: _ => Promise.resolve(Dict.make()->JSON.Encode.object),
   initiateUpdateIntent: _ => Promise.resolve(Dict.make()->JSON.Encode.object),
   confirmTokenization: _ => Promise.resolve(Dict.make()->JSON.Encode.object),
+  tokenize: _ => Promise.resolve(Dict.make()->JSON.Encode.object),
 }
 
 let switchContext = React.createContext(defaultSwitchContext)
diff --git a/src/Index.resi b/src/Index.resi
index 90f8ae1..db07a4b 100644
--- a/src/Index.resi
+++ b/src/Index.resi
@@ -188,13 +188,4 @@ let \"HyperManagementElements": HyperManagementElements.props<
   RescriptCore.Promise.t<OrcaJs.switchInstance>,
   RescriptCore.JSON.t,
 > => React.element
-let \"PaymentMethodsManagementElement": PaymentMethodsManagementElement.props<
-  string,
-  RescriptCore.JSON.t,
-  option<option<RescriptCore.JSON.t> => unit>,
-  option<option<RescriptCore.JSON.t> => unit>,
-  string,
-  option<option<RescriptCore.JSON.t> => unit>,
-  option<option<RescriptCore.JSON.t> => unit>,
-  option<option<RescriptCore.JSON.t> => unit>,
-> => Jsx.element
+let \"PaymentMethodsManagementElement": React.component<OrcaJs.paymentMethodsManagementElementProps>
diff --git a/src/OrcaJs.res b/src/OrcaJs.res
index 7307b0b..98204c8 100644
--- a/src/OrcaJs.res
+++ b/src/OrcaJs.res
@@ -129,6 +129,7 @@ type switchInstance = {
   completeUpdateIntent: string => promise<JSON.t>,
   initiateUpdateIntent: unit => promise<JSON.t>,
   confirmTokenization: JSON.t => Promise.t<JSON.t>,
+  tokenize: JSON.t => Promise.t<JSON.t>,
   initPaymentMethodSession: JSON.t => initPaymentMethodSession,
 }
 
@@ -145,6 +146,21 @@ type paymentElementProps = {
 }
 
 type paymentElementHandle = {confirmPayment: JSON.t => Promise.t<JSON.t>}
+type paymentMethodsManagementElementHandle = {
+  confirmTokenization: JSON.t => Promise.t<JSON.t>,
+  tokenize: JSON.t => Promise.t<JSON.t>,
+}
+
+type paymentMethodsManagementElementProps = {
+  id: option<string>,
+  options: JSON.t,
+  onChange: option<option<JSON.t> => unit>,
+  onReady: option<option<JSON.t> => unit>,
+  componentType: option<string>,
+  onFocus: option<option<JSON.t> => unit>,
+  onBlur: option<option<JSON.t> => unit>,
+  onClick: option<option<JSON.t> => unit>,
+}
 type cardFormHandle = {
   confirmPayment: unit => Promise.t<JSON.t>,
   tokenize: unit => Promise.t<JSON.t>,
diff --git a/src/components/Elements.bs.js b/src/components/Elements.bs.js
index 57a6857..e21a538 100644
--- a/src/components/Elements.bs.js
+++ b/src/components/Elements.bs.js
@@ -2,6 +2,7 @@
 
 import * as Utils from "../Utils.bs.js";
 import * as React from "react";
+import * as OrcaJs from "../OrcaJs.bs.js";
 import * as Context from "../Context.bs.js";
 import * as Core__Promise from "@rescript/core/src/Core__Promise.bs.js";
 import * as JsxRuntime from "react/jsx-runtime";
@@ -51,6 +52,9 @@ function Elements(props) {
                     var switchValClone_completeUpdateIntent = switchInstance.completeUpdateIntent;
                     var switchValClone_initiateUpdateIntent = switchInstance.initiateUpdateIntent;
                     var switchValClone_confirmTokenization = switchInstance.confirmTokenization;
+                    var switchValClone_tokenize = function (param) {
+                      return Promise.resolve(OrcaJs.unsupportedOnSurfaceError("tokenize", "payments", "confirmPayment"));
+                    };
                     var switchValClone = {
                       clientSecret: switchValClone_clientSecret,
                       confirmPayment: switchValClone_confirmPayment,
@@ -60,7 +64,8 @@ function Elements(props) {
                       initPaymentSession: switchValClone_initPaymentSession,
                       completeUpdateIntent: switchValClone_completeUpdateIntent,
                       initiateUpdateIntent: switchValClone_initiateUpdateIntent,
-                      confirmTokenization: switchValClone_confirmTokenization
+                      confirmTokenization: switchValClone_confirmTokenization,
+                      tokenize: switchValClone_tokenize
                     };
                     setSwitchState(function (param) {
                           return switchValClone;
diff --git a/src/components/Elements.res b/src/components/Elements.res
index 39d15ce..baef993 100644
--- a/src/components/Elements.res
+++ b/src/components/Elements.res
@@ -28,6 +28,14 @@ let make = (~children, ~stripe: Promise.t<OrcaJs.switchInstance>, ~options: JSON
         completeUpdateIntent: switchInstance.completeUpdateIntent,
         initiateUpdateIntent: switchInstance.initiateUpdateIntent,
         confirmTokenization: switchInstance.confirmTokenization,
+        tokenize: _ =>
+          Promise.resolve(
+            OrcaJs.unsupportedOnSurfaceError(
+              ~method="tokenize",
+              ~surface="payments",
+              ~alternative="confirmPayment",
+            ),
+          ),
       }
       setSwitchState(_ => switchValClone)
       setElementsState(_ => newElemValues)
diff --git a/src/components/HyperElements.bs.js b/src/components/HyperElements.bs.js
index 8a11043..ebcc819 100644
--- a/src/components/HyperElements.bs.js
+++ b/src/components/HyperElements.bs.js
@@ -2,6 +2,7 @@
 
 import * as Utils from "../Utils.bs.js";
 import * as React from "react";
+import * as OrcaJs from "../OrcaJs.bs.js";
 import * as Context from "../Context.bs.js";
 import * as Core__Promise from "@rescript/core/src/Core__Promise.bs.js";
 import * as JsxRuntime from "react/jsx-runtime";
@@ -55,6 +56,9 @@ function HyperElements(props) {
                     var switchValClone_completeUpdateIntent = switchInstance.completeUpdateIntent;
                     var switchValClone_initiateUpdateIntent = switchInstance.initiateUpdateIntent;
                     var switchValClone_confirmTokenization = switchInstance.confirmTokenization;
+                    var switchValClone_tokenize = function (param) {
+                      return Promise.resolve(OrcaJs.unsupportedOnSurfaceError("tokenize", "payments", "confirmPayment"));
+                    };
                     var switchValClone = {
                       clientSecret: switchValClone_clientSecret,
                       confirmPayment: switchValClone_confirmPayment,
@@ -64,7 +68,8 @@ function HyperElements(props) {
                       initPaymentSession: switchValClone_initPaymentSession,
                       completeUpdateIntent: switchValClone_completeUpdateIntent,
                       initiateUpdateIntent: switchValClone_initiateUpdateIntent,
-                      confirmTokenization: switchValClone_confirmTokenization
+                      confirmTokenization: switchValClone_confirmTokenization,
+                      tokenize: switchValClone_tokenize
                     };
                     var paymentSession = switchInstance.initPaymentSession(resolvedOptions);
                     var newPaymentSessionValues_getCustomerSavedPaymentMethods = paymentSession.getCustomerSavedPaymentMethods;
diff --git a/src/components/HyperElements.res b/src/components/HyperElements.res
index b857a6c..0d2c9b3 100644
--- a/src/components/HyperElements.res
+++ b/src/components/HyperElements.res
@@ -31,6 +31,14 @@ let make = (~children, ~hyper: Promise.t<OrcaJs.switchInstance>, ~options: 'a) =
         completeUpdateIntent: switchInstance.completeUpdateIntent,
         initiateUpdateIntent: switchInstance.initiateUpdateIntent,
         confirmTokenization: switchInstance.confirmTokenization,
+        tokenize: _ =>
+          Promise.resolve(
+            OrcaJs.unsupportedOnSurfaceError(
+              ~method="tokenize",
+              ~surface="payments",
+              ~alternative="confirmPayment",
+            ),
+          ),
       }
 
       let paymentSession = switchInstance.initPaymentSession(resolvedOptions)
diff --git a/src/components/HyperManagementElements.bs.js b/src/components/HyperManagementElements.bs.js
index 11cb355..f37e648 100644
--- a/src/components/HyperManagementElements.bs.js
+++ b/src/components/HyperManagementElements.bs.js
@@ -45,6 +45,7 @@ function HyperManagementElements(props) {
                     var switchValClone_completeUpdateIntent = switchInstance.completeUpdateIntent;
                     var switchValClone_initiateUpdateIntent = switchInstance.initiateUpdateIntent;
                     var switchValClone_confirmTokenization = switchInstance.confirmTokenization;
+                    var switchValClone_tokenize = switchInstance.tokenize;
                     var switchValClone = {
                       clientSecret: "",
                       confirmPayment: switchValClone_confirmPayment,
@@ -54,7 +55,8 @@ function HyperManagementElements(props) {
                       initPaymentSession: switchValClone_initPaymentSession,
                       completeUpdateIntent: switchValClone_completeUpdateIntent,
                       initiateUpdateIntent: switchValClone_initiateUpdateIntent,
-                      confirmTokenization: switchValClone_confirmTokenization
+                      confirmTokenization: switchValClone_confirmTokenization,
+                      tokenize: switchValClone_tokenize
                     };
                     setSwitchState(function (param) {
                           return switchValClone;
diff --git a/src/components/HyperManagementElements.res b/src/components/HyperManagementElements.res
index c0012f4..c421796 100644
--- a/src/components/HyperManagementElements.res
+++ b/src/components/HyperManagementElements.res
@@ -29,6 +29,7 @@ let make = (~children, ~hyper: Promise.t<OrcaJs.switchInstance>, ~options: JSON.
         completeUpdateIntent: switchInstance.completeUpdateIntent,
         initiateUpdateIntent: switchInstance.initiateUpdateIntent,
         confirmTokenization: switchInstance.confirmTokenization,
+        tokenize: switchInstance.tokenize,
       }
       setSwitchState(_ => switchValClone)
       setElementsState(_ => newElemValues)
diff --git a/src/components/PaymentMethodsManagementElement.bs.js b/src/components/PaymentMethodsManagementElement.bs.js
index 9c9a902..e00952d 100644
--- a/src/components/PaymentMethodsManagementElement.bs.js
+++ b/src/components/PaymentMethodsManagementElement.bs.js
@@ -1,58 +1,25 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
 import * as React from "react";
-import * as Context from "../Context.bs.js";
 import * as Caml_option from "rescript/lib/es6/caml_option.js";
 import * as JsxRuntime from "react/jsx-runtime";
+import * as PaymentMethodsManagementElementWrapper from "./PaymentMethodsManagementElementWrapper.bs.js";
 
-function PaymentMethodsManagementElement(props) {
-  var onClick = props.onClick;
-  var onBlur = props.onBlur;
-  var onFocus = props.onFocus;
-  var __componentType = props.componentType;
-  var onReady = props.onReady;
-  var onChange = props.onChange;
-  var options = props.options;
-  var __id = props.id;
-  var id = __id !== undefined ? __id : "payment-management";
-  var componentType = __componentType !== undefined ? __componentType : "paymentMethodsManagement";
-  var hyperSwitch = React.useContext(Context.paymentMethodsManagementSwitchContext);
-  var paymentMethodsManagementState = React.useContext(Context.paymentMethodsManagementElementsContext);
-  var divRef = React.useRef(null);
-  var paymentElement = paymentMethodsManagementState.create(componentType, options);
-  React.useEffect((function () {
-          var paymentElement = paymentMethodsManagementState.create(componentType, options);
-          paymentElement.mount("#orca-elements-payment-management-" + id);
-        }), [
-        divRef,
-        paymentMethodsManagementState
-      ]);
-  React.useEffect((function () {
-          paymentElement.on("ready", onReady);
-          paymentElement.on("focus", onFocus);
-          paymentElement.on("blur", onBlur);
-          paymentElement.on("clickTriggered", onClick);
-          paymentElement.on("change", onChange);
-          return (function () {
-                    paymentElement.on("ready", undefined);
-                    paymentElement.on("focus", undefined);
-                    paymentElement.on("blur", undefined);
-                    paymentElement.on("clickTriggered", undefined);
-                    paymentElement.on("change", undefined);
-                  });
-        }), [
-        paymentMethodsManagementState,
-        hyperSwitch
-      ]);
-  return JsxRuntime.jsx("div", {
-              ref: Caml_option.some(divRef),
-              id: "orca-elements-payment-management-" + id
-            });
-}
-
-var make = PaymentMethodsManagementElement;
+var make = React.forwardRef(function (param, imperativeRef) {
+      return JsxRuntime.jsx(PaymentMethodsManagementElementWrapper.make, {
+                  id: param.id,
+                  options: param.options,
+                  onChange: param.onChange,
+                  onReady: param.onReady,
+                  componentType: param.componentType,
+                  onFocus: param.onFocus,
+                  onBlur: param.onBlur,
+                  onClick: param.onClick,
+                  imperativeRef: Caml_option.some(imperativeRef)
+                });
+    });
 
 export {
   make ,
 }
-/* react Not a pure module */
+/* make Not a pure module */
diff --git a/src/components/PaymentMethodsManagementElement.res b/src/components/PaymentMethodsManagementElement.res
index a0d40dd..42f93c0 100644
--- a/src/components/PaymentMethodsManagementElement.res
+++ b/src/components/PaymentMethodsManagementElement.res
@@ -1,45 +1,27 @@
-@react.component
-let make = (
-  ~id="payment-management",
-  ~options: JSON.t,
-  ~onChange,
-  ~onReady,
-  ~componentType="paymentMethodsManagement",
-  ~onFocus,
-  ~onBlur,
-  ~onClick,
-) => {
-  let hyperSwitch = React.useContext(Context.paymentMethodsManagementSwitchContext)
-  let paymentMethodsManagementState = React.useContext(
-    Context.paymentMethodsManagementElementsContext,
-  )
-  let divRef = React.useRef(Nullable.null)
-
-  let paymentElement = paymentMethodsManagementState.create(componentType, options)
-
-  React.useEffect(() => {
-    let paymentElement = paymentMethodsManagementState.create(componentType, options)
-    paymentElement.mount(`#orca-elements-payment-management-${id}`)
-    None
-  }, (divRef, paymentMethodsManagementState))
+open OrcaJs
 
-  React.useEffect2(() => {
-    paymentElement.on("ready", onReady)
-    paymentElement.on("focus", onFocus)
-    paymentElement.on("blur", onBlur)
-    paymentElement.on("clickTriggered", onClick)
-    paymentElement.on("change", onChange)
-
-    Some(
-      () => {
-        paymentElement.on("ready", None)
-        paymentElement.on("focus", None)
-        paymentElement.on("blur", None)
-        paymentElement.on("clickTriggered", None)
-        paymentElement.on("change", None)
-      },
-    )
-  }, (paymentMethodsManagementState, hyperSwitch))
-
-  <div ref={divRef->ReactDOM.Ref.domRef} id={`orca-elements-payment-management-${id}`} />
-}
+let make = React.forwardRef((
+  {
+    id,
+    options,
+    onChange,
+    onReady,
+    componentType,
+    onFocus,
+    onBlur,
+    onClick,
+  }: paymentMethodsManagementElementProps,
+  imperativeRef,
+) => {
+  <PaymentMethodsManagementElementWrapper
+    ?id
+    options
+    onChange
+    onReady
+    ?componentType
+    onFocus
+    onBlur
+    onClick
+    imperativeRef
+  />
+})
diff --git a/src/components/PaymentMethodsManagementElementWrapper.bs.js b/src/components/PaymentMethodsManagementElementWrapper.bs.js
new file mode 100644
index 0000000..f68f53c
--- /dev/null
+++ b/src/components/PaymentMethodsManagementElementWrapper.bs.js
@@ -0,0 +1,66 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as React from "react";
+import * as Context from "../Context.bs.js";
+import * as Caml_option from "rescript/lib/es6/caml_option.js";
+import * as JsxRuntime from "react/jsx-runtime";
+
+function PaymentMethodsManagementElementWrapper(props) {
+  var __imperativeRef = props.imperativeRef;
+  var onClick = props.onClick;
+  var onBlur = props.onBlur;
+  var onFocus = props.onFocus;
+  var __componentType = props.componentType;
+  var onReady = props.onReady;
+  var onChange = props.onChange;
+  var options = props.options;
+  var __id = props.id;
+  var id = __id !== undefined ? __id : "payment-management";
+  var componentType = __componentType !== undefined ? __componentType : "paymentMethodsManagement";
+  var imperativeRef = __imperativeRef !== undefined ? Caml_option.valFromOption(__imperativeRef) : null;
+  var hyperSwitch = React.useContext(Context.switchContext);
+  var paymentMethodsManagementState = React.useContext(Context.paymentMethodsManagementElementsContext);
+  var divRef = React.useRef(null);
+  var paymentElement = paymentMethodsManagementState.create(componentType, options);
+  React.useImperativeHandle(imperativeRef, (function () {
+          return {
+                  confirmTokenization: hyperSwitch.confirmTokenization,
+                  tokenize: hyperSwitch.tokenize
+                };
+        }), [hyperSwitch]);
+  React.useEffect((function () {
+          var paymentElement = paymentMethodsManagementState.create(componentType, options);
+          paymentElement.mount("#orca-elements-payment-management-" + id);
+        }), [
+        divRef,
+        paymentMethodsManagementState
+      ]);
+  React.useEffect((function () {
+          paymentElement.on("ready", onReady);
+          paymentElement.on("focus", onFocus);
+          paymentElement.on("blur", onBlur);
+          paymentElement.on("clickTriggered", onClick);
+          paymentElement.on("change", onChange);
+          return (function () {
+                    paymentElement.on("ready", undefined);
+                    paymentElement.on("focus", undefined);
+                    paymentElement.on("blur", undefined);
+                    paymentElement.on("clickTriggered", undefined);
+                    paymentElement.on("change", undefined);
+                  });
+        }), [
+        paymentMethodsManagementState,
+        hyperSwitch
+      ]);
+  return JsxRuntime.jsx("div", {
+              ref: Caml_option.some(divRef),
+              id: "orca-elements-payment-management-" + id
+            });
+}
+
+var make = PaymentMethodsManagementElementWrapper;
+
+export {
+  make ,
+}
+/* react Not a pure module */
diff --git a/src/components/PaymentMethodsManagementElementWrapper.res b/src/components/PaymentMethodsManagementElementWrapper.res
new file mode 100644
index 0000000..f5b0cbf
--- /dev/null
+++ b/src/components/PaymentMethodsManagementElementWrapper.res
@@ -0,0 +1,57 @@
+open OrcaJs
+
+@react.component
+let make = (
+  ~id="payment-management",
+  ~options: JSON.t,
+  ~onChange,
+  ~onReady,
+  ~componentType="paymentMethodsManagement",
+  ~onFocus,
+  ~onBlur,
+  ~onClick,
+  ~imperativeRef: Nullable.t<React.ref<paymentMethodsManagementElementHandle>>=Nullable.null,
+) => {
+  let hyperSwitch = React.useContext(Context.switchContext)
+  let paymentMethodsManagementState = React.useContext(
+    Context.paymentMethodsManagementElementsContext,
+  )
+  let divRef = React.useRef(Nullable.null)
+
+  let paymentElement = paymentMethodsManagementState.create(componentType, options)
+
+  React.useImperativeHandle1(
+    imperativeRef,
+    () => {
+      confirmTokenization: hyperSwitch.confirmTokenization,
+      tokenize: hyperSwitch.tokenize,
+    },
+    [hyperSwitch],
+  )
+
+  React.useEffect(() => {
+    let paymentElement = paymentMethodsManagementState.create(componentType, options)
+    paymentElement.mount(`#orca-elements-payment-management-${id}`)
+    None
+  }, (divRef, paymentMethodsManagementState))
+
+  React.useEffect2(() => {
+    paymentElement.on("ready", onReady)
+    paymentElement.on("focus", onFocus)
+    paymentElement.on("blur", onBlur)
+    paymentElement.on("clickTriggered", onClick)
+    paymentElement.on("change", onChange)
+
+    Some(
+      () => {
+        paymentElement.on("ready", None)
+        paymentElement.on("focus", None)
+        paymentElement.on("blur", None)
+        paymentElement.on("clickTriggered", None)
+        paymentElement.on("change", None)
+      },
+    )
+  }, (paymentMethodsManagementState, hyperSwitch))
+
+  <div ref={divRef->ReactDOM.Ref.domRef} id={`orca-elements-payment-management-${id}`} />
+}