@juspay-tech/react-hyper-js 1.0.1 → 1.1.0

package/CHANGELOG.md

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

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

package/index.mjs

@@ -0,0 +1 @@
+import*as A from"react";import*as _e from"react/jsx-runtime";import*as _ from"react";import*as F from"react";function be(e,t){}function Be(){}function Te(){}function We(e){}function Ae(){}function De(){}function Ue(e){}function $e(){}function je(){}var ie={on:be,collapse:Be,blur:Te,update:We,destroy:Ae,unmount:De,mount:Ue,focus:$e,clear:je};function qe(e){if(typeof e=="boolean")return e}function He(e){if(e===null)return null}function Ge(e){if(typeof e=="string")return e}function Ke(e){if(typeof e=="number")return e}function Xe(e){if(typeof e=="object"&&!Array.isArray(e)&&e!==null)return e}function Le(e){if(Array.isArray(e))return e}var y={bool:qe,$$null:He,string:Ge,$$float:Ke,object:Xe,array:Le};function K(e,t,o){for(var n=new Array(o),r=0,u=t;r<o;)n[r]=e[u],r=r+1|0,u=u+1|0;return n}function ae(e,t){for(;;){var o=t,n=e,r=n.length,u=r===0?1:r,a=o.length,c=u-a|0;if(c===0)return n.apply(null,o);if(c>=0)return function(s,i){return function(m){return ae(s,i.concat([m]))}}(n,o);t=K(o,u,-c|0),e=n.apply(null,K(o,0,u))}}function Ye(e,t){var o=e.length;if(o===1)return e(t);switch(o){case 1:return e(t);case 2:return function(n){return e(t,n)};case 3:return function(n,r){return e(t,n,r)};case 4:return function(n,r,u){return e(t,n,r,u)};case 5:return function(n,r,u,a){return e(t,n,r,u,a)};case 6:return function(n,r,u,a,c){return e(t,n,r,u,a,c)};case 7:return function(n,r,u,a,c,s){return e(t,n,r,u,a,c,s)};default:return ae(e,[t])}}function D(e){var t=e.length;return t===1?e:function(o){return Ye(e,o)}}function U(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 $(e){if(!(e!==null&&e.BS_PRIVATE_NESTED_SOME_NONE!==void 0))return e;var t=e.BS_PRIVATE_NESTED_SOME_NONE;if(t!==0)return{BS_PRIVATE_NESTED_SOME_NONE:t-1|0}}function Ze(e,t){if(e!==void 0)return t($(e))}function x(e,t){return Ze(e,D(t))}function v(e,t){return e!==void 0?$(e):t}function nt(e){return Promise.resolve({})}function rt(e,t,o){return Promise.resolve({})}function ot(e){return Promise.resolve({})}function le(e){return e}var J={clientSecret:"",confirmPayment:nt,confirmCardPayment:rt,retrievePaymentIntent:ot,paymentRequest:le},g=F.createContext(J),ut=g.Provider,j={make:ut},L={ephemeralKey:"",paymentRequest:le},it=F.createContext(L),at=it.Provider,ce={make:at};function P(e,t,o){return v(x(e[t],y.string),o)}function I(e){var t=v(y.object(e),{});return{fonts:v(x(t.fonts,y.array),[]),locale:P(t,"locale",""),clientSecret:P(t,"clientSecret",""),appearance:v(x(t.appearance,y.object),{}),loader:P(t,"loader","auto")}}function se(e){}function fe(e){}function de(){return new Promise(function(e,t){setTimeout(function(){e({})},1e3)})}function pe(e,t){return ie}var mt={fonts:[],locale:"",clientSecret:"",appearance:{},loader:""},V={options:mt,update:se,getElement:fe,fetchUpdates:de,create:pe},R=F.createContext(V),lt=R.Provider,q={make:lt};function Ce(e){var t=v(y.object(e),{});return{fonts:v(x(t.fonts,y.array),[]),locale:P(t,"locale",""),ephemeralKey:P(t,"ephemeralKey",""),appearance:v(x(t.appearance,y.object),{}),loader:P(t,"loader","auto")}}var ct={fonts:[],locale:"",ephemeralKey:"",appearance:{},loader:""},z={options:ct,update:se,getElement:fe,fetchUpdates:de,create:pe},st=F.createContext(z),ft=st.Provider,ye={make:ft};import*as ve from"react/jsx-runtime";function dt(e){var t=e.onClick,o=e.onBlur,n=e.onFocus,r=e.componentType,u=e.onReady,a=e.onChange,c=e.options,s=e.id,i=s!==void 0?s:"payment-Element",m=_.useContext(g),d=_.useContext(R),C=_.useRef(null),f=d.create(r,c);return _.useEffect(function(){var E=d.create(r,c);E.mount("#orca-elements-payment-element-"+i)},[C,d]),_.useEffect(function(){f.on("ready",u),f.on("focus",n),f.on("blur",o),f.on("clickTriggered",t),f.on("change",a)},[d,m]),ve.jsx("div",{ref:U(C),id:"orca-elements-payment-element-"+i})}var l=dt;function pt(e){return _e.jsx(l,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"cardCvc",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick})}var Q=pt;import*as B from"react";function O(e,t){return t.then(D(e))}import*as Z from"react/jsx-runtime";function yt(e){var t=e.options,o=e.stripe,n=I(t),r=B.useState(function(){return J}),u=r[1],a=B.useState(function(){return V}),c=a[1];return B.useEffect(function(){(function(s){return O(function(i){var m=i.elements(t),d=m.update,C=m.getElement,f=m.fetchUpdates,E=m.create,k={options:n,update:d,getElement:C,fetchUpdates:f,create:E},S=n.clientSecret,w=i.confirmPayment,h=i.confirmCardPayment,M=i.retrievePaymentIntent,H=i.paymentRequest,N={clientSecret:S,confirmPayment:w,confirmCardPayment:h,retrievePaymentIntent:M,paymentRequest:H};return u(function(G){return N}),c(function(G){return k}),Promise.resolve(N)},s)})(o)},[]),Z.jsx(j.make,{value:r[0],children:Z.jsx(q.make,{value:a[0],children:e.children})})}var Ee=yt;import*as he from"react/jsx-runtime";function _t(e){return he.jsx(l,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"cardExpiry",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick})}var ee=_t;import*as xe from"react/jsx-runtime";function ht(e){return xe.jsx(l,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"cardNumber",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick})}var te=ht;import*as Pe from"react/jsx-runtime";function Pt(e){return Pe.jsx(l,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"card",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick})}var ne=Pt;import*as T from"react";import*as re from"react/jsx-runtime";function Rt(e){var t=e.options,o=e.hyper,n=I(t),r=T.useState(function(){return J}),u=r[1],a=T.useState(function(){return V}),c=a[1];return T.useEffect(function(){(function(s){return O(function(i){var m=i.elements(t),d=m.update,C=m.getElement,f=m.fetchUpdates,E=m.create,k={options:n,update:d,getElement:C,fetchUpdates:f,create:E},S=n.clientSecret,w=i.confirmPayment,h=i.confirmCardPayment,M=i.retrievePaymentIntent,H=i.paymentRequest,N={clientSecret:S,confirmPayment:w,confirmCardPayment:h,retrievePaymentIntent:M,paymentRequest:H};return u(function(G){return N}),c(function(G){return k}),Promise.resolve(N)},s)})(o)},[]),re.jsx(j.make,{value:r[0],children:re.jsx(q.make,{value:a[0],children:e.children})})}var ge=Rt;import*as Re from"react/jsx-runtime";function kt(e){return Re.jsx(l,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"payPal",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick})}var Oe=kt;import*as ke from"react/jsx-runtime";function wt(e){return ke.jsx(l,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"payment",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick})}var oe=wt;import*as Se from"react/jsx-runtime";function Nt(e){return Se.jsx(l,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"applePay",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick})}var we=Nt;import*as Me from"react/jsx-runtime";function Jt(e){return Me.jsx(l,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"googlePay",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick})}var Ne=Jt;import*as Fe from"react/jsx-runtime";function bt(e){return Fe.jsx(l,{id:e.id,options:e.options,onChange:e.onChange,onReady:e.onReady,componentType:"expressCheckout",onFocus:e.onFocus,onBlur:e.onBlur,onClick:e.onClick})}var Je=bt;import*as W from"react";import*as ue from"react/jsx-runtime";function Tt(e){var t=e.options,o=e.hyper,n=Ce(t),r=W.useState(function(){return L}),u=r[1],a=W.useState(function(){return z}),c=a[1];return W.useEffect(function(){(function(s){return O(function(i){var m=i.paymentMethodsManagementElements(t),d=m.update,C=m.getElement,f=m.fetchUpdates,E=m.create,k={options:n,update:d,getElement:C,fetchUpdates:f,create:E},S=n.ephemeralKey,w=i.paymentRequest,h={ephemeralKey:S,paymentRequest:w};return u(function(M){return h}),c(function(M){return k}),Promise.resolve(h)},s)})(o)},[]),ue.jsx(ce.make,{value:r[0],children:ue.jsx(ye.make,{value:a[0],children:e.children})})}var Ve=Tt;function Dt(){return A.useContext(g)}function Ut(){return console.warn("useStripe() is deprecated. Use useHyper() instead"),A.useContext(g)}function $t(){return A.useContext(R)}function jt(){return console.warn("useElements() is deprecated. Use useWidgets() instead"),A.useContext(R)}var It=Ee,qt=ge,Ht=oe,Gt=oe,Kt=ne,Xt=ne,Lt=te,zt=te,Qt=Q,Yt=Q,Zt=ee,en=ee,tn=Ne,nn=we,rn=Oe,on=Je,un=Ve;export{nn as ApplePayElement,Qt as CardCVCElement,Yt as CardCVCWidget,Kt as CardElement,Zt as CardExpiryElement,en as CardExpiryWidget,Lt as CardNumberElement,zt as CardNumberWidget,Xt as CardWidget,It as Elements,on as ExpressCheckoutElement,tn as GooglePayElement,qt as HyperElements,un as HyperManagementElements,rn as PayPalElement,Ht as PaymentElement,Gt as UnifiedCheckout,jt as useElements,Dt as useHyper,Ut as useStripe,$t as useWidgets};

package/package.json

@@ -1,14 +1,20 @@
 {
   "name": "@juspay-tech/react-hyper-js",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "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",
-    "bs-webapi": "^0.19.1",
     "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",
@@ -20,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)
+}