@juspay-tech/react-hyper-js 1.0.2 → 1.1.1

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+## v1.1.0 (2024-07-12)
+
+### Feature
+
+- Added Payment Management & Express Checkout Widgets
+
+### Refactoring
+
+- Upgraded the Rescript Version & better coding practices.
+
+## v1.1.1 (2024-07-12)
+
+### Fix
+
+- Build files updated.

package/README.md

@@ -0,0 +1,3 @@
+# @juspay-tech/react-hyper-js
+
+The official documentation can be found in [hyperswitch docs](https://docs.hyperswitch.io/hyperswitch-cloud/integration-guide/web/node-and-react)

package/build.js

@@ -1,12 +1,11 @@
 const esbuild = require("esbuild");
 const inlineImage = require("esbuild-plugin-inline-image");
 const postcss = require("esbuild-postcss");
-//const { copy } = require("esbuild-plugin-copy");
 
 esbuild
   .build({
     entryPoints: ["./src/Index.bs.js"],
-    outfile: "index.js",
+    outfile: "index.mjs",
     minify: true,
     bundle: true,
     loader: {
@@ -17,13 +16,23 @@ esbuild
     plugins: [
       inlineImage(),
       postcss(),
-      // copy({
-      //   assets: {
-      //     from: ["./public/**/*"],
-      //     to: ["../"],
-      //     keepStructure: true,
-      //   },
-      // }),
     ],
   })
   .catch(() => process.exit(1));
+
+esbuild
+  .build({
+    entryPoints: ["./src/Index.bs.js"],
+    outfile: "index.js",
+    minify: true,
+    bundle: true,
+    loader: {
+      ".js": "jsx",
+    },
+    format: "cjs",
+    external: ["react", "react-dom"],
+    plugins: [
+      inlineImage(),
+      postcss(),
+    ],
+  }).catch(() => process.exit(1));

package/index.js

@@ -1 +1 @@
-function $(e,n,r){for(var i=new Array(r),t=0,u=n;t<r;)i[t]=e[u],t=t+1|0,u=u+1|0;return i}function x(e,n){for(;;){var r=n,i=e,t=i.length,u=t===0?1:t,c=r.length,a=u-c|0;if(a===0)return i.apply(null,r);if(a>=0)return function(s,l){return function(f){return x(s,l.concat([f]))}}(i,r);n=$(r,u,-a|0),e=i.apply(null,$(r,0,u))}}function d(e,n){var r=e.length;if(r===1)return e(n);switch(r){case 1:return e(n);case 2:return function(i){return e(n,i)};case 3:return function(i,t){return e(n,i,t)};case 4:return function(i,t,u){return e(n,i,t,u)};case 5:return function(i,t,u,c){return e(n,i,t,u,c)};case 6:return function(i,t,u,c,a){return e(n,i,t,u,c,a)};case 7:return function(i,t,u,c,a,s){return e(n,i,t,u,c,a,s)};default:return x(e,[n])}}function V(e){var n=e.length;return n===1?e:function(r){return d(e,r)}}function p(e,n,r){var i=e.length;if(i===2)return e(n,r);switch(i){case 1:return x(e(n),[r]);case 2:return e(n,r);case 3:return function(t){return e(n,r,t)};case 4:return function(t,u){return e(n,r,t,u)};case 5:return function(t,u,c){return e(n,r,t,u,c)};case 6:return function(t,u,c,a){return e(n,r,t,u,c,a)};case 7:return function(t,u,c,a,s){return e(n,r,t,u,c,a,s)};default:return x(e,[n,r])}}import*as o from"react";import*as L from"react";function ae(e,n){}function le(e){}function fe(e){}function se(e){}function me(e){}function de(e){}function ve(e){}function pe(e){}function _e(e){}var Y={on:ae,collapse:le,blur:fe,update:se,destroy:me,unmount:de,mount:ve,focus:pe,clear:_e};function E(e){return e===void 0?{BS_PRIVATE_NESTED_SOME_NONE:0}:e!==null&&e.BS_PRIVATE_NESTED_SOME_NONE!==void 0?{BS_PRIVATE_NESTED_SOME_NONE:e.BS_PRIVATE_NESTED_SOME_NONE+1|0}:e}function H(e){if(!(e!==null&&e.BS_PRIVATE_NESTED_SOME_NONE!==void 0))return e;var n=e.BS_PRIVATE_NESTED_SOME_NONE;if(n!==0)return{BS_PRIVATE_NESTED_SOME_NONE:n-1|0}}function N(e,n){if(n in e)return E(e[n])}function Z(e){if(typeof e=="string")return e}function j(e){if(typeof e=="object"&&!Array.isArray(e)&&e!==null)return E(e)}function ee(e){if(Array.isArray(e))return e}function he(e,n){if(e!==void 0)return n(H(e))}function P(e,n){return he(e,V(n))}function h(e,n){return e!==void 0?H(e):n}function we(e){return Promise.resolve({})}function Se(e,n,r){return Promise.resolve({})}function Re(e){return Promise.resolve({})}function Oe(e){return e}var k={clientSecret:"",confirmPayment:we,confirmCardPayment:Se,retrievePaymentIntent:Re,paymentRequest:Oe},g=L.createContext(k);function xe(e,n,r){return{value:e,children:n}}var Ve=g.Provider,w={makeProps:xe,make:Ve};function z(e,n,r){return h(P(N(e,n),Z),r)}function K(e){var n=h(j(e),{});return{fonts:h(P(N(n,"fonts"),ee),[]),locale:z(n,"locale",""),clientSecret:z(n,"clientSecret",""),appearance:h(P(N(n,"appearance"),j),{}),loader:z(n,"loader","auto")}}function Ne(e){}function Pe(e){}function ke(e){return new Promise(function(n,r){setTimeout(function(i){n({})},1e3)})}function Ae(e,n){return Y}var Be={fonts:[],locale:"",clientSecret:"",appearance:{},loader:""},A={options:Be,update:Ne,getElement:Pe,fetchUpdates:ke,create:Ae},S=L.createContext(A);function Te(e,n,r){return{value:e,children:n}}var Fe=S.Provider,R={makeProps:Te,make:Fe};function Q(e,n){return n.then(V(e))}function De(e){var n=e.children,r=e.stripe,i=e.options,t=K(i),u=o.useState(function(){return k}),c=u[1],a=o.useState(function(){return A}),s=a[1];return o.useEffect(function(){Q(function(l){var f=d(l.elements,i),v=f.update,_=f.getElement,m=f.fetchUpdates,y=f.create,B={options:t,update:v,getElement:_,fetchUpdates:m,create:y},oe=t.clientSecret,T=l.confirmPayment,F=l.confirmCardPayment,b=l.retrievePaymentIntent,I=l.paymentRequest,D=t.clientSecret,U=T,J=F,M=b,W=I,C={clientSecret:D,confirmPayment:U,confirmCardPayment:J,retrievePaymentIntent:M,paymentRequest:W};return d(c,function(q){return C}),d(s,function(q){return B}),Promise.resolve(C)},r)},[]),o.createElement(w.make,w.makeProps(u[0],o.createElement(R.make,R.makeProps(a[0],n,void 0)),void 0))}function Ue(e){var n=e.children,r=e.hyper,i=e.options,t=K(i),u=o.useState(function(){return k}),c=u[1],a=o.useState(function(){return A}),s=a[1];return o.useEffect(function(){Q(function(l){var f=d(l.elements,i),v=f.update,_=f.getElement,m=f.fetchUpdates,y=f.create,B={options:t,update:v,getElement:_,fetchUpdates:m,create:y},oe=t.clientSecret,T=l.confirmPayment,F=l.confirmCardPayment,b=l.retrievePaymentIntent,I=l.paymentRequest,D=t.clientSecret,U=T,J=F,M=b,W=I,C={clientSecret:D,confirmPayment:U,confirmCardPayment:J,retrievePaymentIntent:M,paymentRequest:W};return d(c,function(q){return C}),d(s,function(q){return B}),Promise.resolve(C)},r)},[]),o.createElement(w.make,w.makeProps(u[0],o.createElement(R.make,R.makeProps(a[0],n,void 0)),void 0))}function Me(e){return o.useContext(g)}function We(e){return console.warn("useStripe() is deprecated. Use useHyper() instead"),o.useContext(g)}function qe(e){return o.useContext(S)}function $e(e){return console.warn("useElements() is deprecated. Use useWidgets() instead"),o.useContext(S)}function O(e){var n=e.id,r=e.options,i=e.onChange,t=e.onReady,u=e.componentType,c=e.onFocus,a=e.onBlur,s=e.onClick,l=n!==void 0?n:"payment-Element",f=o.useContext(g),v=o.useContext(S),_=o.useRef(null),m=p(v.create,u,r);return o.useEffect(function(){var y=p(v.create,u,r);d(y.mount,"#orca-elements-payment-element-"+l)},[_,v]),o.useEffect(function(){p(m.on,"ready",t),p(m.on,"focus",c),p(m.on,"blur",a),p(m.on,"clickTriggered",s),p(m.on,"change",i)},[v,f]),o.createElement("div",{ref:_,id:"orca-elements-payment-element-"+l})}function ne(e){var n=e.id,r=e.options,i=e.onChange,t=e.onReady,u=e.onFocus,c=e.onBlur,a=e.onClick;return o.createElement(O,{id:n,options:r,onChange:i,onReady:t,componentType:"payment",onFocus:u,onBlur:c,onClick:a})}function te(e){var n=e.id,r=e.options,i=e.onChange,t=e.onReady,u=e.onFocus,c=e.onBlur,a=e.onClick;return o.createElement(O,{id:n,options:r,onChange:i,onReady:t,componentType:"card",onFocus:u,onBlur:c,onClick:a})}function re(e){var n=e.id,r=e.options,i=e.onChange,t=e.onReady,u=e.onFocus,c=e.onBlur,a=e.onClick;return o.createElement(O,{id:n,options:r,onChange:i,onReady:t,componentType:"cardNumber",onFocus:u,onBlur:c,onClick:a})}function ue(e){var n=e.id,r=e.options,i=e.onChange,t=e.onReady,u=e.onFocus,c=e.onBlur,a=e.onClick;return o.createElement(O,{id:n,options:r,onChange:i,onReady:t,componentType:"cardCvc",onFocus:u,onBlur:c,onClick:a})}function ie(e){var n=e.id,r=e.options,i=e.onChange,t=e.onReady,u=e.onFocus,c=e.onBlur,a=e.onClick;return o.createElement(O,{id:n,options:r,onChange:i,onReady:t,componentType:"cardExpiry",onFocus:u,onBlur:c,onClick:a})}var Ge=De,He=Ue,Xe=ne,je=ne,ze=te,Le=te,Ke=re,Qe=re,Ye=ie,Ze=ie,en=ue,nn=ue;export{en as CardCVCElement,nn as CardCVCWidget,ze as CardElement,Ye as CardExpiryElement,Ze as CardExpiryWidget,Ke as CardNumberElement,Qe as CardNumberWidget,Le as CardWidget,Ge as Elements,He as HyperElements,Xe as PaymentElement,je as UnifiedCheckout,$e as useElements,Me as useHyper,We as useStripe,qe as useWidgets};
+var je=Object.create;var j=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var qe=Object.getOwnPropertyNames;var He=Object.getPrototypeOf,Ge=Object.prototype.hasOwnProperty;var Ke=(e,n)=>{for(var r in n)j(e,r,{get:n[r],enumerable:!0})},se=(e,n,r,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of qe(n))!Ge.call(e,t)&&t!==r&&j(e,t,{get:()=>n[t],enumerable:!(o=Ie(n,t))||o.enumerable});return e};var m=(e,n,r)=>(r=e!=null?je(He(e)):{},se(n||!e||!e.__esModule?j(r,"default",{value:e,enumerable:!0}):r,e)),Xe=e=>se(j({},"__esModule",{value:!0}),e);var gt={};Ke(gt,{ApplePayElement:()=>vt,CardCVCElement:()=>ft,CardCVCWidget:()=>dt,CardElement:()=>mt,CardExpiryElement:()=>pt,CardExpiryWidget:()=>yt,CardNumberElement:()=>ct,CardNumberWidget:()=>st,CardWidget:()=>lt,Elements:()=>ot,ExpressCheckoutElement:()=>Et,GooglePayElement:()=>Ct,HyperElements:()=>at,HyperManagementElements:()=>ht,PayPalElement:()=>_t,PaymentElement:()=>ut,PaymentMethodsManagementElement:()=>xt,UnifiedCheckout:()=>it,useElements:()=>rt,useHyper:()=>et,useStripe:()=>nt,useWidgets:()=>tt});module.exports=Xe(gt);var U=m(require("react"));var Re=m(require("react/jsx-runtime"));var h=m(require("react"));var b=m(require("react"));function Le(e,n){}function ze(){}function Qe(){}function Ye(e){}function Ze(){}function en(){}function nn(e){}function tn(){}function rn(){}var fe={on:Le,collapse:ze,blur:Qe,update:Ye,destroy:Ze,unmount:en,mount:nn,focus:tn,clear:rn};function an(e){if(typeof e=="boolean")return e}function un(e){if(e===null)return null}function mn(e){if(typeof e=="string")return e}function ln(e){if(typeof e=="number")return e}function cn(e){if(typeof e=="object"&&!Array.isArray(e)&&e!==null)return e}function sn(e){if(Array.isArray(e))return e}var _={bool:an,$$null:un,string:mn,$$float:ln,object:cn,array:sn};function Q(e,n,r){for(var o=new Array(r),t=0,a=n;t<r;)o[t]=e[a],t=t+1|0,a=a+1|0;return o}function de(e,n){for(;;){var r=n,o=e,t=o.length,a=t===0?1:t,l=r.length,c=a-l|0;if(c===0)return o.apply(null,r);if(c>=0)return function(d,u){return function(i){return de(d,u.concat([i]))}}(o,r);n=Q(r,a,-c|0),e=o.apply(null,Q(r,0,a))}}function pn(e,n){var r=e.length;if(r===1)return e(n);switch(r){case 1:return e(n);case 2:return function(o){return e(n,o)};case 3:return function(o,t){return e(n,o,t)};case 4:return function(o,t,a){return e(n,o,t,a)};case 5:return function(o,t,a,l){return e(n,o,t,a,l)};case 6:return function(o,t,a,l,c){return e(n,o,t,a,l,c)};case 7:return function(o,t,a,l,c,d){return e(n,o,t,a,l,c,d)};default:return de(e,[n])}}function I(e){var n=e.length;return n===1?e:function(r){return pn(e,r)}}function R(e){return e===void 0?{BS_PRIVATE_NESTED_SOME_NONE:0}:e!==null&&e.BS_PRIVATE_NESTED_SOME_NONE!==void 0?{BS_PRIVATE_NESTED_SOME_NONE:e.BS_PRIVATE_NESTED_SOME_NONE+1|0}:e}function q(e){if(!(e!==null&&e.BS_PRIVATE_NESTED_SOME_NONE!==void 0))return e;var n=e.BS_PRIVATE_NESTED_SOME_NONE;if(n!==0)return{BS_PRIVATE_NESTED_SOME_NONE:n-1|0}}function yn(e,n){if(e!==void 0)return n(q(e))}function k(e,n){return yn(e,I(n))}function E(e,n){return e!==void 0?q(e):n}function _n(e){return Promise.resolve({})}function En(e,n,r){return Promise.resolve({})}function hn(e){return Promise.resolve({})}function ye(e){return e}var B={clientSecret:"",confirmPayment:_n,confirmCardPayment:En,retrievePaymentIntent:hn,paymentRequest:ye},S=b.createContext(B),xn=S.Provider,G={make:xn},Y={ephemeralKey:"",paymentRequest:ye},Z=b.createContext(Y),gn=Z.Provider,Ce={make:gn};function O(e,n,r){return E(k(e[n],_.string),r)}function K(e){var n=E(_.object(e),{});return{fonts:E(k(n.fonts,_.array),[]),locale:O(n,"locale",""),clientSecret:O(n,"clientSecret",""),appearance:E(k(n.appearance,_.object),{}),loader:O(n,"loader","auto")}}function ve(e){}function _e(e){}function Ee(){return new Promise(function(e,n){setTimeout(function(){e({})},1e3)})}function he(e,n){return fe}var Pn={fonts:[],locale:"",clientSecret:"",appearance:{},loader:""},W={options:Pn,update:ve,getElement:_e,fetchUpdates:Ee,create:he},M=b.createContext(W),Rn=M.Provider,X={make:Rn};function xe(e){var n=E(_.object(e),{});return{fonts:E(k(n.fonts,_.array),[]),locale:O(n,"locale",""),ephemeralKey:O(n,"ephemeralKey",""),appearance:E(k(n.appearance,_.object),{}),loader:O(n,"loader","auto")}}var kn={fonts:[],locale:"",ephemeralKey:"",appearance:{},loader:""},ee={options:kn,update:ve,getElement:_e,fetchUpdates:Ee,create:he},ne=b.createContext(ee),On=ne.Provider,ge={make:On};var Pe=m(require("react/jsx-runtime"));function Sn(e){var n=e.onClick,r=e.onBlur,o=e.onFocus,t=e.componentType,a=e.onReady,l=e.onChange,c=e.options,d=e.id,u=d!==void 0?d:"payment-Element",i=h.useContext(S),C=h.useContext(M),y=h.useRef(null),p=C.create(t,c);return h.useEffect(function(){var s=C.create(t,c);s.mount("#orca-elements-payment-element-"+u)},[y,C]),h.useEffect(function(){p.on("ready",a),p.on("focus",o),p.on("blur",r),p.on("clickTriggered",n),p.on("change",l)},[C,i]),Pe.jsx("div",{ref:R(y),id:"orca-elements-payment-element-"+u})}var f=Sn;function Mn(e){return Re.jsx(f,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"cardCvc",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick})}var te=Mn;var A=m(require("react"));function N(e,n){return n.then(I(e))}var oe=m(require("react/jsx-runtime"));function Nn(e){var n=e.options,r=e.stripe,o=K(n),t=A.useState(function(){return B}),a=t[1],l=A.useState(function(){return W}),c=l[1];return A.useEffect(function(){(function(d){return N(function(u){var i=u.elements(n),C=i.update,y=i.getElement,p=i.fetchUpdates,s=i.create,g={options:o,update:C,getElement:y,fetchUpdates:p,create:s},F=o.clientSecret,J=u.confirmPayment,P=u.confirmCardPayment,V=u.retrievePaymentIntent,L=u.paymentRequest,T={clientSecret:F,confirmPayment:J,confirmCardPayment:P,retrievePaymentIntent:V,paymentRequest:L};return a(function(z){return T}),c(function(z){return g}),Promise.resolve(T)},d)})(r)},[]),oe.jsx(G.make,{value:t[0],children:oe.jsx(X.make,{value:l[0],children:e.children})})}var ke=Nn;var Oe=m(require("react/jsx-runtime"));function Jn(e){return Oe.jsx(f,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"cardExpiry",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick})}var ae=Jn;var Se=m(require("react/jsx-runtime"));function Tn(e){return Se.jsx(f,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"cardNumber",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick})}var ue=Tn;var Me=m(require("react/jsx-runtime"));function Bn(e){return Me.jsx(f,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"card",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick})}var ie=Bn;var D=m(require("react"));var me=m(require("react/jsx-runtime"));function An(e){var n=e.options,r=e.hyper,o=K(n),t=D.useState(function(){return B}),a=t[1],l=D.useState(function(){return W}),c=l[1];return D.useEffect(function(){(function(d){return N(function(u){var i=u.elements(n),C=i.update,y=i.getElement,p=i.fetchUpdates,s=i.create,g={options:o,update:C,getElement:y,fetchUpdates:p,create:s},F=o.clientSecret,J=u.confirmPayment,P=u.confirmCardPayment,V=u.retrievePaymentIntent,L=u.paymentRequest,T={clientSecret:F,confirmPayment:J,confirmCardPayment:P,retrievePaymentIntent:V,paymentRequest:L};return a(function(z){return T}),c(function(z){return g}),Promise.resolve(T)},d)})(r)},[]),me.jsx(G.make,{value:t[0],children:me.jsx(X.make,{value:l[0],children:e.children})})}var we=An;var Ne=m(require("react/jsx-runtime"));function $n(e){return Ne.jsx(f,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"payPal",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick})}var Fe=$n;var Je=m(require("react/jsx-runtime"));function jn(e){return Je.jsx(f,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"payment",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick})}var le=jn;var Ve=m(require("react/jsx-runtime"));function qn(e){return Ve.jsx(f,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"applePay",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick})}var Te=qn;var be=m(require("react/jsx-runtime"));function Gn(e){return be.jsx(f,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"googlePay",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick})}var Be=Gn;var We=m(require("react/jsx-runtime"));function Xn(e){return We.jsx(f,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"expressCheckout",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick})}var Ae=Xn;var $=m(require("react"));var ce=m(require("react/jsx-runtime"));function zn(e){var n=e.options,r=e.hyper,o=xe(n),t=$.useState(function(){return Y}),a=t[1],l=$.useState(function(){return ee}),c=l[1];return $.useEffect(function(){(function(d){return N(function(u){var i=u.paymentMethodsManagementElements(n),C=i.update,y=i.getElement,p=i.fetchUpdates,s=i.create,g={options:o,update:C,getElement:y,fetchUpdates:p,create:s},F=o.ephemeralKey,J=u.paymentRequest,P={ephemeralKey:F,paymentRequest:J};return a(function(V){return P}),c(function(V){return g}),Promise.resolve(P)},d)})(r)},[]),ce.jsx(Ce.make,{value:t[0],children:ce.jsx(ge.make,{value:l[0],children:e.children})})}var De=zn;var x=m(require("react"));var $e=m(require("react/jsx-runtime"));function Yn(e){var n=e.onClick,r=e.onBlur,o=e.onFocus,t=e.componentType,a=e.onReady,l=e.onChange,c=e.options,d=e.id,u=d!==void 0?d:"payment-management",i=t!==void 0?t:"paymentMethodsManagement",C=x.useContext(Z),y=x.useContext(ne),p=x.useRef(null),s=y.create(i,c);return x.useEffect(function(){var g=y.create(i,c);g.mount("#orca-elements-payment-management-"+u)},[p,y]),x.useEffect(function(){return s.on("ready",a),s.on("focus",o),s.on("blur",r),s.on("clickTriggered",n),s.on("change",l),function(){s.on("ready",void 0),s.on("focus",void 0),s.on("blur",void 0),s.on("clickTriggered",void 0),s.on("change",void 0)}},[y,C]),$e.jsx("div",{ref:R(p),id:"orca-elements-payment-management-"+u})}var Ue=Yn;function et(){return U.useContext(S)}function nt(){return console.warn("useStripe() is deprecated. Use useHyper() instead"),U.useContext(S)}function tt(){return U.useContext(M)}function rt(){return console.warn("useElements() is deprecated. Use useWidgets() instead"),U.useContext(M)}var ot=ke,at=we,ut=le,it=le,mt=ie,lt=ie,ct=ue,st=ue,ft=te,dt=te,pt=ae,yt=ae,Ct=Be,vt=Te,_t=Fe,Et=Ae,ht=De,xt=Ue;

package/index.mjs

@@ -0,0 +1 @@
+import*as $ from"react";import*as xe from"react/jsx-runtime";import*as E from"react";import*as T from"react";function De(e,n){}function $e(){}function Ue(){}function je(e){}function Ie(){}function qe(){}function He(e){}function Ge(){}function Ke(){}var le={on:De,collapse:$e,blur:Ue,update:je,destroy:Ie,unmount:qe,mount:He,focus:Ge,clear:Ke};function Le(e){if(typeof e=="boolean")return e}function ze(e){if(e===null)return null}function Qe(e){if(typeof e=="string")return e}function Ye(e){if(typeof e=="number")return e}function Ze(e){if(typeof e=="object"&&!Array.isArray(e)&&e!==null)return e}function en(e){if(Array.isArray(e))return e}var v={bool:Le,$$null:ze,string:Qe,$$float:Ye,object:Ze,array:en};function L(e,n,o){for(var t=new Array(o),r=0,a=n;r<o;)t[r]=e[a],r=r+1|0,a=a+1|0;return t}function ce(e,n){for(;;){var o=n,t=e,r=t.length,a=r===0?1:r,m=o.length,l=a-m|0;if(l===0)return t.apply(null,o);if(l>=0)return function(f,u){return function(i){return ce(f,u.concat([i]))}}(t,o);n=L(o,a,-l|0),e=t.apply(null,L(o,0,a))}}function rn(e,n){var o=e.length;if(o===1)return e(n);switch(o){case 1:return e(n);case 2:return function(t){return e(n,t)};case 3:return function(t,r){return e(n,t,r)};case 4:return function(t,r,a){return e(n,t,r,a)};case 5:return function(t,r,a,m){return e(n,t,r,a,m)};case 6:return function(t,r,a,m,l){return e(n,t,r,a,m,l)};case 7:return function(t,r,a,m,l,f){return e(n,t,r,a,m,l,f)};default:return ce(e,[n])}}function U(e){var n=e.length;return n===1?e:function(o){return rn(e,o)}}function P(e){return e===void 0?{BS_PRIVATE_NESTED_SOME_NONE:0}:e!==null&&e.BS_PRIVATE_NESTED_SOME_NONE!==void 0?{BS_PRIVATE_NESTED_SOME_NONE:e.BS_PRIVATE_NESTED_SOME_NONE+1|0}:e}function j(e){if(!(e!==null&&e.BS_PRIVATE_NESTED_SOME_NONE!==void 0))return e;var n=e.BS_PRIVATE_NESTED_SOME_NONE;if(n!==0)return{BS_PRIVATE_NESTED_SOME_NONE:n-1|0}}function on(e,n){if(e!==void 0)return n(j(e))}function R(e,n){return on(e,U(n))}function _(e,n){return e!==void 0?j(e):n}function mn(e){return Promise.resolve({})}function ln(e,n,o){return Promise.resolve({})}function cn(e){return Promise.resolve({})}function fe(e){return e}var b={clientSecret:"",confirmPayment:mn,confirmCardPayment:ln,retrievePaymentIntent:cn,paymentRequest:fe},O=T.createContext(b),sn=O.Provider,q={make:sn},z={ephemeralKey:"",paymentRequest:fe},Q=T.createContext(z),fn=Q.Provider,de={make:fn};function k(e,n,o){return _(R(e[n],v.string),o)}function H(e){var n=_(v.object(e),{});return{fonts:_(R(n.fonts,v.array),[]),locale:k(n,"locale",""),clientSecret:k(n,"clientSecret",""),appearance:_(R(n.appearance,v.object),{}),loader:k(n,"loader","auto")}}function pe(e){}function ye(e){}function Ce(){return new Promise(function(e,n){setTimeout(function(){e({})},1e3)})}function ve(e,n){return le}var dn={fonts:[],locale:"",clientSecret:"",appearance:{},loader:""},B={options:dn,update:pe,getElement:ye,fetchUpdates:Ce,create:ve},S=T.createContext(B),pn=S.Provider,G={make:pn};function _e(e){var n=_(v.object(e),{});return{fonts:_(R(n.fonts,v.array),[]),locale:k(n,"locale",""),ephemeralKey:k(n,"ephemeralKey",""),appearance:_(R(n.appearance,v.object),{}),loader:k(n,"loader","auto")}}var yn={fonts:[],locale:"",ephemeralKey:"",appearance:{},loader:""},Y={options:yn,update:pe,getElement:ye,fetchUpdates:Ce,create:ve},Z=T.createContext(Y),Cn=Z.Provider,Ee={make:Cn};import*as he from"react/jsx-runtime";function vn(e){var n=e.onClick,o=e.onBlur,t=e.onFocus,r=e.componentType,a=e.onReady,m=e.onChange,l=e.options,f=e.id,u=f!==void 0?f:"payment-Element",i=E.useContext(O),y=E.useContext(S),p=E.useRef(null),d=y.create(r,l);return E.useEffect(function(){var c=y.create(r,l);c.mount("#orca-elements-payment-element-"+u)},[p,y]),E.useEffect(function(){d.on("ready",a),d.on("focus",t),d.on("blur",o),d.on("clickTriggered",n),d.on("change",m)},[y,i]),he.jsx("div",{ref:P(p),id:"orca-elements-payment-element-"+u})}var s=vn;function _n(e){return xe.jsx(s,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"cardCvc",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick})}var ee=_n;import*as W from"react";function w(e,n){return n.then(U(e))}import*as te from"react/jsx-runtime";function hn(e){var n=e.options,o=e.stripe,t=H(n),r=W.useState(function(){return b}),a=r[1],m=W.useState(function(){return B}),l=m[1];return W.useEffect(function(){(function(f){return w(function(u){var i=u.elements(n),y=i.update,p=i.getElement,d=i.fetchUpdates,c=i.create,x={options:t,update:y,getElement:p,fetchUpdates:d,create:c},N=t.clientSecret,F=u.confirmPayment,g=u.confirmCardPayment,J=u.retrievePaymentIntent,K=u.paymentRequest,V={clientSecret:N,confirmPayment:F,confirmCardPayment:g,retrievePaymentIntent:J,paymentRequest:K};return a(function(X){return V}),l(function(X){return x}),Promise.resolve(V)},f)})(o)},[]),te.jsx(q.make,{value:r[0],children:te.jsx(G.make,{value:m[0],children:e.children})})}var ge=hn;import*as Pe from"react/jsx-runtime";function gn(e){return Pe.jsx(s,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"cardExpiry",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick})}var re=gn;import*as Re from"react/jsx-runtime";function Rn(e){return Re.jsx(s,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"cardNumber",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick})}var oe=Rn;import*as ke from"react/jsx-runtime";function On(e){return ke.jsx(s,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"card",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick})}var ae=On;import*as A from"react";import*as ue from"react/jsx-runtime";function Mn(e){var n=e.options,o=e.hyper,t=H(n),r=A.useState(function(){return b}),a=r[1],m=A.useState(function(){return B}),l=m[1];return A.useEffect(function(){(function(f){return w(function(u){var i=u.elements(n),y=i.update,p=i.getElement,d=i.fetchUpdates,c=i.create,x={options:t,update:y,getElement:p,fetchUpdates:d,create:c},N=t.clientSecret,F=u.confirmPayment,g=u.confirmCardPayment,J=u.retrievePaymentIntent,K=u.paymentRequest,V={clientSecret:N,confirmPayment:F,confirmCardPayment:g,retrievePaymentIntent:J,paymentRequest:K};return a(function(X){return V}),l(function(X){return x}),Promise.resolve(V)},f)})(o)},[]),ue.jsx(q.make,{value:r[0],children:ue.jsx(G.make,{value:m[0],children:e.children})})}var Oe=Mn;import*as Se from"react/jsx-runtime";function Nn(e){return Se.jsx(s,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"payPal",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick})}var Me=Nn;import*as we from"react/jsx-runtime";function Jn(e){return we.jsx(s,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"payment",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick})}var ie=Jn;import*as Ne from"react/jsx-runtime";function Tn(e){return Ne.jsx(s,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"applePay",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick})}var Fe=Tn;import*as Je from"react/jsx-runtime";function Bn(e){return Je.jsx(s,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"googlePay",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick})}var Ve=Bn;import*as Te from"react/jsx-runtime";function An(e){return Te.jsx(s,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"expressCheckout",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick})}var be=An;import*as D from"react";import*as me from"react/jsx-runtime";function $n(e){var n=e.options,o=e.hyper,t=_e(n),r=D.useState(function(){return z}),a=r[1],m=D.useState(function(){return Y}),l=m[1];return D.useEffect(function(){(function(f){return w(function(u){var i=u.paymentMethodsManagementElements(n),y=i.update,p=i.getElement,d=i.fetchUpdates,c=i.create,x={options:t,update:y,getElement:p,fetchUpdates:d,create:c},N=t.ephemeralKey,F=u.paymentRequest,g={ephemeralKey:N,paymentRequest:F};return a(function(J){return g}),l(function(J){return x}),Promise.resolve(g)},f)})(o)},[]),me.jsx(de.make,{value:r[0],children:me.jsx(Ee.make,{value:m[0],children:e.children})})}var Be=$n;import*as h from"react";import*as We from"react/jsx-runtime";function jn(e){var n=e.onClick,o=e.onBlur,t=e.onFocus,r=e.componentType,a=e.onReady,m=e.onChange,l=e.options,f=e.id,u=f!==void 0?f:"payment-management",i=r!==void 0?r:"paymentMethodsManagement",y=h.useContext(Q),p=h.useContext(Z),d=h.useRef(null),c=p.create(i,l);return h.useEffect(function(){var x=p.create(i,l);x.mount("#orca-elements-payment-management-"+u)},[d,p]),h.useEffect(function(){return c.on("ready",a),c.on("focus",t),c.on("blur",o),c.on("clickTriggered",n),c.on("change",m),function(){c.on("ready",void 0),c.on("focus",void 0),c.on("blur",void 0),c.on("clickTriggered",void 0),c.on("change",void 0)}},[p,y]),We.jsx("div",{ref:P(d),id:"orca-elements-payment-management-"+u})}var Ae=jn;function Hn(){return $.useContext(O)}function Gn(){return console.warn("useStripe() is deprecated. Use useHyper() instead"),$.useContext(O)}function Kn(){return $.useContext(S)}function Xn(){return console.warn("useElements() is deprecated. Use useWidgets() instead"),$.useContext(S)}var Ln=ge,zn=Oe,Qn=ie,Yn=ie,Zn=ae,et=ae,nt=oe,tt=oe,rt=ee,ot=ee,at=re,ut=re,it=Ve,mt=Fe,lt=Me,ct=be,st=Be,ft=Ae;export{mt as ApplePayElement,rt as CardCVCElement,ot as CardCVCWidget,Zn as CardElement,at as CardExpiryElement,ut as CardExpiryWidget,nt as CardNumberElement,tt as CardNumberWidget,et as CardWidget,Ln as Elements,ct as ExpressCheckoutElement,it as GooglePayElement,zn as HyperElements,st as HyperManagementElements,lt as PayPalElement,Qn as PaymentElement,ft as PaymentMethodsManagementElement,Yn as UnifiedCheckout,Xn as useElements,Hn as useHyper,Gn as useStripe,Kn as useWidgets};

package/package.json

@@ -1,13 +1,20 @@
 {
   "name": "@juspay-tech/react-hyper-js",
-  "version": "1.0.2",
+  "version": "1.1.1",
   "main": "index.js",
+  "module": "index.mjs",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  },
   "dependencies": {
-    "@rescript/react": "^0.10.3",
+    "@rescript/react": "^0.12.1",
     "@ryyppy/rescript-promise": "^2.1.0",
-    "bs-fetch": "^0.6.2",
     "postcss": "^8.4.19",
-    "react-scripts": "^3.4.0"
+    "react-scripts": "^5.0.1",
+    "@rescript/core": "^0.7.0"
   },
   "peerDependencies": {
     "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
@@ -19,32 +26,20 @@
     "build:es": "node build.js",
     "re:build": "rescript",
     "re:start": "rescript build -w",
+    "re:format": "rescript format -all",
+    "re:clean": "rescript clean",
     "publish:public": "npm publish --access public"
   },
   "devDependencies": {
-    "@babel/cli": "^7.7.0",
-    "@babel/core": "^7.7.2",
-    "@babel/plugin-transform-react-jsx": "^7.10.1",
     "@babel/preset-env": "^7.7.1",
     "@babel/preset-react": "^7.7.0",
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.3",
-    "babel-eslint": "^10.0.3",
-    "babel-jest": "^24.9.0",
-    "babel-loader": "^8.0.6",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-2": "^6.24.1",
-    "css-loader": "^0.28.11",
+    "babel-loader": "^8.3.0",
+    "css-loader": "^6.8.1",
     "esbuild": "^0.17.4",
     "esbuild-plugin-copy": "^1.3.0",
     "esbuild-plugin-inline-image": "0.0.8",
     "esbuild-postcss": "0.0.4",
-    "node-sass": "^4.9.0",
-    "react-hot-loader": "^4.3.3",
-    "rescript": "^10.0.1",
-    "rollup-plugin-babel": "^4.3.3",
-    "sass-loader": "^7.0.3",
+    "rescript": "^11.1.0",
     "style-loader": "^0.21.0"
   },
   "directories": {

package/rescript.json

@@ -0,0 +1,23 @@
+{
+  "name": "react-orca-js",
+  "sources": [
+    {
+      "dir": "src",
+      "subdirs": true
+    }
+  ],
+  "bsc-flags": ["-bs-super-errors", "-open RescriptCore"],
+  "package-specs": [
+    {
+      "module": "esmodule",
+      "in-source": true
+    }
+  ],
+  "suffix": ".bs.js",
+  "jsx": { "version": 4 },
+  "bs-dependencies": [
+    "@rescript/react",
+    "@ryyppy/rescript-promise",
+    "@rescript/core"
+  ]
+}

package/src/Context.bs.js

@@ -2,9 +2,9 @@
 
 import * as React from "react";
 import * as OrcaJs from "./OrcaJs.bs.js";
-import * as Js_dict from "rescript/lib/es6/js_dict.js";
-import * as Js_json from "rescript/lib/es6/js_json.js";
+import * as Core__JSON from "@rescript/core/src/Core__JSON.bs.js";
 import * as Belt_Option from "rescript/lib/es6/belt_Option.js";
+import * as Core__Option from "@rescript/core/src/Core__Option.bs.js";
 
 function confirmPaymentFn(_elements) {
   return Promise.resolve({});
@@ -32,31 +32,36 @@ var defaultSwitchContext = {
 
 var switchContext = React.createContext(defaultSwitchContext);
 
-function makeProps(value, children, param) {
-  return {
-          value: value,
-          children: children
-        };
-}
-
 var make = switchContext.Provider;
 
 var SwitchContextProvider = {
-  makeProps: makeProps,
   make: make
 };
 
+var defaultPaymentMethodsManagementSwitchContext = {
+  ephemeralKey: "",
+  paymentRequest: paymentRequest
+};
+
+var paymentMethodsManagementSwitchContext = React.createContext(defaultPaymentMethodsManagementSwitchContext);
+
+var make$1 = paymentMethodsManagementSwitchContext.Provider;
+
+var PaymentMethodsManagementSwitchContextProvider = {
+  make: make$1
+};
+
 function getString(dict, key, defaultVal) {
-  return Belt_Option.getWithDefault(Belt_Option.flatMap(Js_dict.get(dict, key), Js_json.decodeString), defaultVal);
+  return Core__Option.getOr(Belt_Option.flatMap(dict[key], Core__JSON.Decode.string), defaultVal);
 }
 
 function elementsOptionObjMapper(options) {
-  var dict = Belt_Option.getWithDefault(Js_json.decodeObject(options), {});
+  var dict = Core__Option.getOr(Core__JSON.Decode.object(options), {});
   return {
-          fonts: Belt_Option.getWithDefault(Belt_Option.flatMap(Js_dict.get(dict, "fonts"), Js_json.decodeArray), []),
+          fonts: Core__Option.getOr(Belt_Option.flatMap(dict["fonts"], Core__JSON.Decode.array), []),
           locale: getString(dict, "locale", ""),
           clientSecret: getString(dict, "clientSecret", ""),
-          appearance: Belt_Option.getWithDefault(Belt_Option.flatMap(Js_dict.get(dict, "appearance"), Js_json.decodeObject), {}),
+          appearance: Core__Option.getOr(Belt_Option.flatMap(dict["appearance"], Core__JSON.Decode.object), {}),
           loader: getString(dict, "loader", "auto")
         };
 }
@@ -69,9 +74,9 @@ function getElement(_componentName) {
   
 }
 
-function fetchUpdates(param) {
+function fetchUpdates() {
   return new Promise((function (resolve, param) {
-                setTimeout((function (param) {
+                setTimeout((function () {
                         resolve({});
                       }), 1000);
               }));
@@ -99,18 +104,45 @@ var defaultElementsContext = {
 
 var elementsContext = React.createContext(defaultElementsContext);
 
-function makeProps$1(value, children, param) {
+var make$2 = elementsContext.Provider;
+
+var ElementsContextProvider = {
+  make: make$2
+};
+
+function paymentMethodsManagementElementsOptionObjMapper(options) {
+  var dict = Core__Option.getOr(Core__JSON.Decode.object(options), {});
   return {
-          value: value,
-          children: children
+          fonts: Core__Option.getOr(Belt_Option.flatMap(dict["fonts"], Core__JSON.Decode.array), []),
+          locale: getString(dict, "locale", ""),
+          ephemeralKey: getString(dict, "ephemeralKey", ""),
+          appearance: Core__Option.getOr(Belt_Option.flatMap(dict["appearance"], Core__JSON.Decode.object), {}),
+          loader: getString(dict, "loader", "auto")
         };
 }
 
-var make$1 = elementsContext.Provider;
+var defaultPaymentMethodsManagementElementsContext_options = {
+  fonts: [],
+  locale: "",
+  ephemeralKey: "",
+  appearance: {},
+  loader: ""
+};
 
-var ElementsContextProvider = {
-  makeProps: makeProps$1,
-  make: make$1
+var defaultPaymentMethodsManagementElementsContext = {
+  options: defaultPaymentMethodsManagementElementsContext_options,
+  update: update,
+  getElement: getElement,
+  fetchUpdates: fetchUpdates,
+  create: create
+};
+
+var paymentMethodsManagementElementsContext = React.createContext(defaultPaymentMethodsManagementElementsContext);
+
+var make$3 = paymentMethodsManagementElementsContext.Provider;
+
+var PaymentMethodsManagementElementsContextProvider = {
+  make: make$3
 };
 
 export {
@@ -121,6 +153,9 @@ export {
   defaultSwitchContext ,
   switchContext ,
   SwitchContextProvider ,
+  defaultPaymentMethodsManagementSwitchContext ,
+  paymentMethodsManagementSwitchContext ,
+  PaymentMethodsManagementSwitchContextProvider ,
   getString ,
   elementsOptionObjMapper ,
   update ,
@@ -130,5 +165,9 @@ export {
   defaultElementsContext ,
   elementsContext ,
   ElementsContextProvider ,
+  paymentMethodsManagementElementsOptionObjMapper ,
+  defaultPaymentMethodsManagementElementsContext ,
+  paymentMethodsManagementElementsContext ,
+  PaymentMethodsManagementElementsContextProvider ,
 }
-/* confirmCardPaymentFn Not a pure module */
+/* switchContext Not a pure module */

package/src/Context.res

@@ -2,10 +2,10 @@
 external contentWindow: Js.nullable<Dom.element> => Js.nullable<Dom.element> = "contentWindow"
 @send
 external postMessage: (Js.nullable<Dom.element>, string, string) => unit = "postMessage"
-external jsonToRef: Js.Json.t => React.ref<Js.nullable<Dom.element>> = "%identity"
+external jsonToRef: JSON.t => React.ref<Js.nullable<Dom.element>> = "%identity"
 @get external getClientSecret: 'a => string = "clientSecret"
-external toJson: 'b => Js.Json.t = "%identity"
-type func = (. unit) => string
+external toJson: 'b => JSON.t = "%identity"
+type func = unit => string
 external toFunc: 'c => func = "%identity"
 
 type paymentElement
@@ -18,7 +18,7 @@ type address = {
   postal_code: option<string>,
   state: option<string>,
 }
-type confirmCardPaymentMethodType = String(string) | Obj(Js.Json.t)
+type confirmCardPaymentMethodType = String(string) | Obj(JSON.t)
 type shipping = {
   address: address,
   name: string,
@@ -40,49 +40,64 @@ type confirmCardPaymentDataType = {
   payment_method_options: string,
 }
 type elementsOptions = {
-  fonts: Js.Array2.t<Js.Json.t>,
+  fonts: array<JSON.t>,
   locale: string,
   clientSecret: string,
-  appearance: Js.Dict.t<Js.Json.t>,
+  appearance: Dict.t<JSON.t>,
   loader: string,
 }
-external optionsToJson: elementsOptions => Js.Json.t = "%identity"
+type paymentMethodsManagementElementsOptions = {
+  fonts: array<JSON.t>,
+  locale: string,
+  ephemeralKey: string,
+  appearance: Dict.t<JSON.t>,
+  loader: string,
+}
+external optionsToJson: elementsOptions => JSON.t = "%identity"
 type rec elementsType = {
   options: elementsOptions,
-  update: Js.Json.t => unit,
-  getElement: Js.Dict.key => option<OrcaJs.paymentElement>,
-  fetchUpdates: unit => Js.Promise.t<Js.Json.t>,
-  create: (string, Js.Json.t) => OrcaJs.paymentElement, // return a react component instead by doing new Payment Element.
+  update: JSON.t => unit,
+  getElement: string => option<OrcaJs.paymentElement>,
+  fetchUpdates: unit => Promise.t<JSON.t>,
+  create: (string, JSON.t) => OrcaJs.paymentElement, // return a react component instead by doing new Payment Element.
 }
 
-type elementsContextType = {options: Js.Dict.t<Js.Json.t>}
+type rec paymentMethodsManagementElementsType = {
+  options: paymentMethodsManagementElementsOptions,
+  update: JSON.t => unit,
+  getElement: string => option<OrcaJs.paymentElement>,
+  fetchUpdates: unit => Promise.t<JSON.t>,
+  create: (string, JSON.t) => OrcaJs.paymentElement,
+}
+
+type elementsContextType = {options: Dict.t<JSON.t>}
 type confirmPaymentParams = {return_url: string}
 type switchContextType = {
   clientSecret: string,
-  confirmPayment: Js.Json.t => Js.Promise.t<Js.Json.t>,
-  confirmCardPayment: Js_OO.Callback.arity4<
-    (OrcaJs.This.t, string, option<Js.Json.t>, option<Js.Json.t>) => Js.Promise.t<Js.Json.t>,
-  >,
-  retrievePaymentIntent: string => Js.Promise.t<Js.Json.t>,
-  paymentRequest: Js.Json.t => Js.Json.t,
-}
-
-let confirmPaymentFn = (_elements: Js.Json.t) => {
-  Js.Promise.resolve(Js.Dict.empty()->Js.Json.object_)
-}
-let confirmCardPaymentFn =
-  @this
-  (
-    _this: OrcaJs.This.t,
-    _clientSecretId: string,
-    _data: option<Js.Json.t>,
-    _options: option<Js.Json.t>,
-  ) => {
-    Js.Promise.resolve(Js.Dict.empty()->Js.Json.object_)
-  }
+  confirmPayment: JSON.t => Promise.t<JSON.t>,
+  confirmCardPayment: (string, option<JSON.t>, option<JSON.t>) => Promise.t<JSON.t>,
+  retrievePaymentIntent: string => Promise.t<JSON.t>,
+  paymentRequest: JSON.t => JSON.t,
+}
+
+type paymentMethodsManagementSwitchContextType = {
+  ephemeralKey: string,
+  paymentRequest: JSON.t => JSON.t,
+}
+
+let confirmPaymentFn = (_elements: JSON.t) => {
+  Promise.resolve(Dict.make()->JSON.Encode.object)
+}
+let confirmCardPaymentFn = (
+  _clientSecretId: string,
+  _data: option<JSON.t>,
+  _options: option<JSON.t>,
+) => {
+  Promise.resolve(Dict.make()->JSON.Encode.object)
+}
 
 let retrievePaymentIntentFn = _paymentIntentId => {
-  Js.Promise.resolve(Js.Dict.empty()->Js.Json.object_)
+  Promise.resolve(Dict.make()->JSON.Encode.object)
 }
 let paymentRequest = options => {
   options
@@ -99,35 +114,42 @@ let defaultSwitchContext = {
 let switchContext = React.createContext(defaultSwitchContext)
 
 module SwitchContextProvider = {
-  let makeProps = (~value, ~children, ()) =>
-    {
-      "value": value,
-      "children": children,
-    }
-
   let make = React.Context.provider(switchContext)
 }
 
+let defaultPaymentMethodsManagementSwitchContext = {
+  ephemeralKey: "",
+  paymentRequest,
+}
+
+let paymentMethodsManagementSwitchContext = React.createContext(
+  defaultPaymentMethodsManagementSwitchContext,
+)
+
+module PaymentMethodsManagementSwitchContextProvider = {
+  let make = React.Context.provider(paymentMethodsManagementSwitchContext)
+}
+
 let getString = (dict, key, defaultVal) => {
   dict
-  ->Js.Dict.get(key)
-  ->Belt.Option.flatMap(Js.Json.decodeString)
-  ->Belt.Option.getWithDefault(defaultVal)
+  ->Dict.get(key)
+  ->Belt.Option.flatMap(JSON.Decode.string)
+  ->Option.getOr(defaultVal)
 }
 
-let elementsOptionObjMapper = (options: Js.Json.t) => {
-  let dict = options->Js.Json.decodeObject->Belt.Option.getWithDefault(Js.Dict.empty())
+let elementsOptionObjMapper = (options: JSON.t) => {
+  let dict = options->JSON.Decode.object->Option.getOr(Dict.make())
   {
     fonts: dict
-    ->Js.Dict.get("fonts")
-    ->Belt.Option.flatMap(Js.Json.decodeArray)
-    ->Belt.Option.getWithDefault([]),
+    ->Dict.get("fonts")
+    ->Belt.Option.flatMap(JSON.Decode.array)
+    ->Option.getOr([]),
     locale: dict->getString("locale", ""),
     clientSecret: dict->getString("clientSecret", ""),
     appearance: dict
-    ->Js.Dict.get("appearance")
-    ->Belt.Option.flatMap(Js.Json.decodeObject)
-    ->Belt.Option.getWithDefault(Js.Dict.empty()),
+    ->Dict.get("appearance")
+    ->Belt.Option.flatMap(JSON.Decode.object)
+    ->Option.getOr(Dict.make()),
     loader: dict->getString("loader", "auto"),
   }
 }
@@ -142,20 +164,20 @@ let getElement = _componentName => {
 
 let fetchUpdates = () => {
   //add API call
-  Js.Promise.make((~resolve, ~reject as _) => {
-    Js.Global.setTimeout(() => resolve(. Js.Dict.empty()->Js.Json.object_), 1000)->ignore
+  Promise.make((resolve, _) => {
+    setTimeout(() => resolve(Dict.make()->JSON.Encode.object), 1000)->ignore
   })
 }
 
 let create = (_componentType, _options) => {
   OrcaJs.defaultPaymentElement
 }
-let defaultElementsContext = {
+let defaultElementsContext: elementsType = {
   options: {
     fonts: [],
     locale: "",
     clientSecret: "",
-    appearance: Js.Dict.empty(),
+    appearance: Dict.make(),
     loader: "",
   },
   update,
@@ -167,11 +189,44 @@ let defaultElementsContext = {
 let elementsContext = React.createContext(defaultElementsContext)
 
 module ElementsContextProvider = {
-  let makeProps = (~value, ~children, ()) =>
-    {
-      "value": value,
-      "children": children,
-    }
-
   let make = React.Context.provider(elementsContext)
 }
+
+let paymentMethodsManagementElementsOptionObjMapper = (options: JSON.t) => {
+  let dict = options->JSON.Decode.object->Option.getOr(Dict.make())
+  {
+    fonts: dict
+    ->Dict.get("fonts")
+    ->Belt.Option.flatMap(JSON.Decode.array)
+    ->Option.getOr([]),
+    locale: dict->getString("locale", ""),
+    ephemeralKey: dict->getString("ephemeralKey", ""),
+    appearance: dict
+    ->Dict.get("appearance")
+    ->Belt.Option.flatMap(JSON.Decode.object)
+    ->Option.getOr(Dict.make()),
+    loader: dict->getString("loader", "auto"),
+  }
+}
+
+let defaultPaymentMethodsManagementElementsContext: paymentMethodsManagementElementsType = {
+  options: {
+    fonts: [],
+    locale: "",
+    ephemeralKey: "",
+    appearance: Js.Dict.empty(),
+    loader: "",
+  },
+  update,
+  getElement,
+  fetchUpdates,
+  create,
+}
+
+let paymentMethodsManagementElementsContext = React.createContext(
+  defaultPaymentMethodsManagementElementsContext,
+)
+
+module PaymentMethodsManagementElementsContextProvider = {
+  let make = React.Context.provider(paymentMethodsManagementElementsContext)
+}