@juspay-tech/react-hyper-js 0.0.1 → 0.0.2

package/index.js

@@ -1 +1 @@
-function A(e,n,t){for(var i=new Array(t),r=0,u=n;r<t;)i[r]=e[u],r=r+1|0,u=u+1|0;return i}function R(e,n){for(;;){var t=n,i=e,r=i.length,u=r===0?1:r,o=t.length,c=u-o|0;if(c===0)return i.apply(null,t);if(c>=0)return function(a,f){return function(s){return R(a,f.concat([s]))}}(i,t);n=A(t,u,-c|0),e=i.apply(null,A(t,0,u))}}function p(e,n){var t=e.length;if(t===1)return e(n);switch(t){case 1:return e(n);case 2:return function(i){return e(n,i)};case 3:return function(i,r){return e(n,i,r)};case 4:return function(i,r,u){return e(n,i,r,u)};case 5:return function(i,r,u,o){return e(n,i,r,u,o)};case 6:return function(i,r,u,o,c){return e(n,i,r,u,o,c)};case 7:return function(i,r,u,o,c,a){return e(n,i,r,u,o,c,a)};default:return R(e,[n])}}function w(e){var n=e.length;return n===1?e:function(t){return p(e,t)}}function m(e,n,t){var i=e.length;if(i===2)return e(n,t);switch(i){case 1:return R(e(n),[t]);case 2:return e(n,t);case 3:return function(r){return e(n,t,r)};case 4:return function(r,u){return e(n,t,r,u)};case 5:return function(r,u,o){return e(n,t,r,u,o)};case 6:return function(r,u,o,c){return e(n,t,r,u,o,c)};case 7:return function(r,u,o,c,a){return e(n,t,r,u,o,c,a)};default:return R(e,[n,t])}}import*as l from"react";import*as V from"react";function te(e,n){}function re(e){}function ue(e){}function ie(e){}function oe(e){}function ce(e){}function le(e){}function fe(e){}function ae(e){}var M={on:te,collapse:re,blur:ue,update:ie,destroy:oe,unmount:ce,mount:le,focus:fe,clear:ae};function _(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 T(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 S(e,n){if(n in e)return _(e[n])}function U(e){if(typeof e=="string")return e}function F(e){if(typeof e=="object"&&!Array.isArray(e)&&e!==null)return _(e)}function W(e){if(Array.isArray(e))return e}function ve(e,n){if(e!==void 0)return n(T(e))}function O(e,n){return ve(e,w(n))}function y(e,n){return e!==void 0?T(e):n}function _e(e){return Promise.resolve({})}function ye(e,n,t){return Promise.resolve({})}function Ce(e){return Promise.resolve({})}function Ee(e){return e}var b={clientSecret:"",confirmPayment:_e,confirmCardPayment:ye,retrievePaymentIntent:Ce,paymentRequest:Ee},C=V.createContext(b);function he(e,n,t){return{value:e,children:n}}var ge=C.Provider,I={makeProps:he,make:ge};function k(e,n,t){return y(O(S(e,n),U),t)}function $(e){var n=y(F(e),{});return{fonts:y(O(S(n,"fonts"),W),[]),locale:k(n,"locale",""),clientSecret:k(n,"clientSecret",""),appearance:y(O(S(n,"appearance"),F),{}),loader:k(n,"loader","auto")}}function Re(e){}function we(e){}function Se(e){return new Promise(function(n,t){setTimeout(function(i){n({})},1e3)})}function Oe(e,n){return M}var Ne={fonts:[],locale:"",clientSecret:"",appearance:{},loader:""},P={options:Ne,update:Re,getElement:we,fetchUpdates:Se,create:Oe},E=V.createContext(P);function Ae(e,n,t){return{value:e,children:n}}var Be=E.Provider,D={makeProps:Ae,make:Be};function q(e,n){return n.then(w(e))}function Fe(e){var n=e.children,t=e.stripe,i=e.options,r=$(i),u=l.useState(function(){return b}),o=u[1],c=l.useState(function(){return P}),a=c[1];return l.useEffect(function(){q(function(f){var s=p(f.elements,i),v=s.update,g=s.getElement,d=s.fetchUpdates,N=s.create,G={options:r,update:v,getElement:g,fetchUpdates:d,create:N},De=r.clientSecret,X=f.confirmPayment,z=f.confirmCardPayment,H=f.retrievePaymentIntent,L=f.paymentRequest,j=r.clientSecret,K=X,Q=z,Y=H,Z=L,J={clientSecret:j,confirmPayment:K,confirmCardPayment:Q,retrievePaymentIntent:Y,paymentRequest:Z};return p(o,function(ee){return J}),p(a,function(ee){return G}),Promise.resolve(J)},t)},[]),l.createElement(I.make,I.makeProps(u[0],l.createElement(D.make,D.makeProps(c[0],n,void 0)),void 0))}function Me(e){return l.useContext(C)}function Ue(e){return console.warn("useStripe() is deprecated. Use useHyper() instead"),l.useContext(C)}function We(e){return l.useContext(E)}function $e(e){return console.warn("useElements() is deprecated. Use useWidgets() instead"),l.useContext(E)}function h(e){var n=e.id,t=e.options,i=e.onChange,r=e.onReady,u=e.componentType,o=e.onFocus,c=e.onBlur,a=e.onClick,f=n!==void 0?n:"payment-Element",s=l.useContext(C),v=l.useContext(E),g=l.useRef(null),d=m(v.create,u,t);return l.useEffect(function(){var N=m(v.create,u,t);p(N.mount,"#orca-elements-payment-element-"+f)},[g,v]),l.useEffect(function(){m(d.on,"ready",r),m(d.on,"focus",o),m(d.on,"blur",c),m(d.on,"clickTriggered",a),m(d.on,"change",i)},[v,s]),l.createElement("div",{ref:g,id:"orca-elements-payment-element-"+f})}function ke(e){var n=e.id,t=e.options,i=e.onChange,r=e.onReady,u=e.onFocus,o=e.onBlur,c=e.onClick;return l.createElement(h,{id:n,options:t,onChange:i,onReady:r,componentType:"payment",onFocus:u,onBlur:o,onClick:c})}function Ve(e){var n=e.id,t=e.options,i=e.onChange,r=e.onReady,u=e.onFocus,o=e.onBlur,c=e.onClick;return l.createElement(h,{id:n,options:t,onChange:i,onReady:r,componentType:"card",onFocus:u,onBlur:o,onClick:c})}function be(e){var n=e.id,t=e.options,i=e.onChange,r=e.onReady,u=e.onFocus,o=e.onBlur,c=e.onClick;return l.createElement(h,{id:n,options:t,onChange:i,onReady:r,componentType:"cardNumberElement",onFocus:u,onBlur:o,onClick:c})}function Ie(e){var n=e.id,t=e.options,i=e.onChange,r=e.onReady,u=e.onFocus,o=e.onBlur,c=e.onClick;return l.createElement(h,{id:n,options:t,onChange:i,onReady:r,componentType:"cardCVCElement",onFocus:u,onBlur:o,onClick:c})}function Pe(e){var n=e.id,t=e.options,i=e.onChange,r=e.onReady,u=e.onFocus,o=e.onBlur,c=e.onClick;return l.createElement(h,{id:n,options:t,onChange:i,onReady:r,componentType:"cardExpiryElement",onFocus:u,onBlur:o,onClick:c})}var qe=Fe,Ge=ke,Xe=Ve,ze=be,He=Pe,Le=Ie;export{Le as CardCVCElement,Xe as CardElement,He as CardExpiryElement,ze as CardNumberElement,qe as Elements,Ge as PaymentElement,$e as useElements,Me as useHyper,Ue as useStripe,We as useWidgets};
+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};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay-tech/react-hyper-js",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "main": "index.js",
   "dependencies": {
     "@rescript/react": "^0.10.3",

package/src/Index.bs.js

@@ -61,6 +61,62 @@ function Index$Elements2(Props) {
   return React.createElement(Context.SwitchContextProvider.make, Context.SwitchContextProvider.makeProps(match[0], React.createElement(Context.ElementsContextProvider.make, Context.ElementsContextProvider.makeProps(match$1[0], children, undefined)), undefined));
 }
 
+function Index$HyperElements2(Props) {
+  var children = Props.children;
+  var hyper = Props.hyper;
+  var options = Props.options;
+  var elementOptions = Context.elementsOptionObjMapper(options);
+  var match = React.useState(function () {
+        return Context.defaultSwitchContext;
+      });
+  var setSwitchState = match[1];
+  var match$1 = React.useState(function () {
+        return Context.defaultElementsContext;
+      });
+  var setElementsState = match$1[1];
+  React.useEffect((function () {
+          Js_promise.then_((function (switchInstance) {
+                  var orcaElementsConfig = Curry._1(switchInstance.elements, options);
+                  var newElemValues_update = orcaElementsConfig.update;
+                  var newElemValues_getElement = orcaElementsConfig.getElement;
+                  var newElemValues_fetchUpdates = orcaElementsConfig.fetchUpdates;
+                  var newElemValues_create = orcaElementsConfig.create;
+                  var newElemValues = {
+                    options: elementOptions,
+                    update: newElemValues_update,
+                    getElement: newElemValues_getElement,
+                    fetchUpdates: newElemValues_fetchUpdates,
+                    create: newElemValues_create
+                  };
+                  var newSwitchVal_clientSecret = elementOptions.clientSecret;
+                  var newSwitchVal_confirmPayment = switchInstance.confirmPayment;
+                  var newSwitchVal_confirmCardPayment = switchInstance.confirmCardPayment;
+                  var newSwitchVal_retrievePaymentIntent = switchInstance.retrievePaymentIntent;
+                  var newSwitchVal_paymentRequest = switchInstance.paymentRequest;
+                  var switchValClone_clientSecret = elementOptions.clientSecret;
+                  var switchValClone_confirmPayment = newSwitchVal_confirmPayment;
+                  var switchValClone_confirmCardPayment = newSwitchVal_confirmCardPayment;
+                  var switchValClone_retrievePaymentIntent = newSwitchVal_retrievePaymentIntent;
+                  var switchValClone_paymentRequest = newSwitchVal_paymentRequest;
+                  var switchValClone = {
+                    clientSecret: switchValClone_clientSecret,
+                    confirmPayment: switchValClone_confirmPayment,
+                    confirmCardPayment: switchValClone_confirmCardPayment,
+                    retrievePaymentIntent: switchValClone_retrievePaymentIntent,
+                    paymentRequest: switchValClone_paymentRequest
+                  };
+                  Curry._1(setSwitchState, (function (param) {
+                          return switchValClone;
+                        }));
+                  Curry._1(setElementsState, (function (param) {
+                          return newElemValues;
+                        }));
+                  return Promise.resolve(switchValClone);
+                }), hyper);
+        }), []);
+  return React.createElement(Context.SwitchContextProvider.make, Context.SwitchContextProvider.makeProps(match[0], React.createElement(Context.ElementsContextProvider.make, Context.ElementsContextProvider.makeProps(match$1[0], children, undefined)), undefined));
+}
+
 function useHyper(param) {
   return React.useContext(Context.switchContext);
 }
@@ -169,7 +225,7 @@ function Index$CardNumber2(Props) {
               options: options,
               onChange: onChange,
               onReady: onReady,
-              componentType: "cardNumberElement",
+              componentType: "cardNumber",
               onFocus: onFocus,
               onBlur: onBlur,
               onClick: onClick
@@ -189,7 +245,7 @@ function Index$CardCVC2(Props) {
               options: options,
               onChange: onChange,
               onReady: onReady,
-              componentType: "cardCVCElement",
+              componentType: "cardCvc",
               onFocus: onFocus,
               onBlur: onBlur,
               onClick: onClick
@@ -209,7 +265,7 @@ function Index$CardExpiry2(Props) {
               options: options,
               onChange: onChange,
               onReady: onReady,
-              componentType: "cardExpiryElement",
+              componentType: "cardExpiry",
               onFocus: onFocus,
               onBlur: onBlur,
               onClick: onClick
@@ -218,23 +274,41 @@ function Index$CardExpiry2(Props) {
 
 var Elements = Index$Elements2;
 
+var HyperElements = Index$HyperElements2;
+
 var PaymentElement = Index$PaymentElement2;
 
+var UnifiedCheckout = Index$PaymentElement2;
+
 var CardElement = Index$CardElement2;
 
+var CardWidget = Index$CardElement2;
+
 var CardNumberElement = Index$CardNumber2;
 
+var CardNumberWidget = Index$CardNumber2;
+
 var CardExpiryElement = Index$CardExpiry2;
 
+var CardExpiryWidget = Index$CardExpiry2;
+
 var CardCVCElement = Index$CardCVC2;
 
+var CardCVCWidget = Index$CardCVC2;
+
 export {
   Elements ,
+  HyperElements ,
   PaymentElement ,
+  UnifiedCheckout ,
   CardElement ,
+  CardWidget ,
   CardNumberElement ,
+  CardNumberWidget ,
   CardExpiryElement ,
+  CardExpiryWidget ,
   CardCVCElement ,
+  CardCVCWidget ,
   useStripe ,
   useHyper ,
   useElements ,

package/src/Index.res

@@ -49,8 +49,51 @@ module Elements2 = {
   }
 }
 
+module HyperElements2 = {
+  @react.component
+  let make = (~children, ~hyper: Js.Promise.t<OrcaJs.switchInstance>, ~options: Js.Json.t) => {
+    let elementOptions = options->Context.elementsOptionObjMapper
+    let (switchState, setSwitchState) = React.useState(() => Context.defaultSwitchContext)
+    let (elementsState, setElementsState) = React.useState(() => Context.defaultElementsContext)
+
+    React.useEffect0(() => {
+      hyper->Js.Promise.then_((switchInstance: OrcaJs.switchInstance) => {
+        let orcaElementsConfig = switchInstance.elements(options)
+        let newElemValues: Context.elementsType = {
+          options: elementOptions,
+          update: orcaElementsConfig.update,
+          getElement: orcaElementsConfig.getElement,
+          fetchUpdates: orcaElementsConfig.fetchUpdates,
+          create: orcaElementsConfig.create,
+        }
+        let newSwitchVal: Context.switchContextType = {
+          confirmPayment: switchInstance.confirmPayment,
+          confirmCardPayment: switchInstance.confirmCardPayment,
+          retrievePaymentIntent: switchInstance.retrievePaymentIntent,
+          clientSecret: elementOptions.clientSecret,
+          paymentRequest: switchInstance.paymentRequest,
+        }
+
+        let switchValClone = {...newSwitchVal, clientSecret: elementOptions.clientSecret}
+        setSwitchState(_ => switchValClone)
+        setElementsState(_ => newElemValues)
+        Js.Promise.resolve(switchValClone)
+      }, _)->ignore
+      None
+    })
+
+    <Context.SwitchContextProvider value={switchState}>
+      <Context.ElementsContextProvider value={elementsState}>
+        {children}
+      </Context.ElementsContextProvider>
+    </Context.SwitchContextProvider>
+  }
+}
+
 let \"Elements" = Elements2.make
 
+let \"HyperElements" = HyperElements2.make
+
 let useHyper = () => {
   React.useContext(Context.switchContext)
 }
@@ -114,6 +157,8 @@ module PaymentElement2 = {
 }
 let \"PaymentElement" = PaymentElement2.make
 
+let \"UnifiedCheckout" = PaymentElement2.make
+
 module CardElement2 = {
   @react.component
   let make = (~id, ~options: Js.Json.t, ~onChange, ~onReady, ~onFocus, ~onBlur, ~onClick) => {
@@ -124,32 +169,41 @@ module CardElement2 = {
 }
 let \"CardElement" = CardElement2.make
 
+let \"CardWidget" = CardElement2.make
+
 module CardNumber2 = {
   @react.component
   let make = (~id, ~options: Js.Json.t, ~onChange, ~onReady, ~onFocus, ~onBlur, ~onClick) => {
     <PaymentElementsWrapper
-      id options onChange onReady onFocus onBlur onClick componentType="cardNumberElement"
+      id options onChange onReady onFocus onBlur onClick componentType="cardNumber"
     />
   }
 }
 let \"CardNumberElement" = CardNumber2.make
 
+let \"CardNumberWidget" = CardNumber2.make
+
 module CardCVC2 = {
   @react.component
   let make = (~id, ~options: Js.Json.t, ~onChange, ~onReady, ~onFocus, ~onBlur, ~onClick) => {
     <PaymentElementsWrapper
-      id options onChange onReady onFocus onBlur onClick componentType="cardCVCElement"
+      id options onChange onReady onFocus onBlur onClick componentType="cardCvc"
     />
   }
 }
 let \"CardCVCElement" = CardCVC2.make
 
+let \"CardCVCWidget" = CardCVC2.make
+
 module CardExpiry2 = {
   @react.component
   let make = (~id, ~options: Js.Json.t, ~onChange, ~onReady, ~onFocus, ~onBlur, ~onClick) => {
     <PaymentElementsWrapper
-      id options onChange onReady onFocus onBlur onClick componentType="cardExpiryElement"
+      id options onChange onReady onFocus onBlur onClick componentType="cardExpiry"
     />
   }
 }
 let \"CardExpiryElement" = CardExpiry2.make
+
+let \"CardExpiryWidget" = CardExpiry2.make
+

package/src/Index.resi

@@ -14,6 +14,12 @@ let \"Elements": {
   "stripe": Js.Promise.t<OrcaJs.switchInstance>,
 } => React.element
 
+let \"HyperElements": {
+  "children": React.element,
+  "options": Js.Json.t,
+  "hyper": Js.Promise.t<OrcaJs.switchInstance>,
+} => React.element
+
 let \"PaymentElement": {
   "id": string,
   "onBlur": option<option<Js.Json.t> => unit>,
@@ -24,6 +30,17 @@ let \"PaymentElement": {
   "options": Js.Json.t,
 } => React.element
 
+
+let \"UnifiedCheckout": {
+  "id": string,
+  "onBlur": option<option<Js.Json.t> => unit>,
+  "onChange": option<option<Js.Json.t> => unit>,
+  "onClick": option<option<Js.Json.t> => unit>,
+  "onFocus": option<option<Js.Json.t> => unit>,
+  "onReady": option<option<Js.Json.t> => unit>,
+  "options": Js.Json.t,
+} => React.element
+
 let \"CardElement": {
   "id": string,
   "onBlur": option<option<Js.Json.t> => unit>,
@@ -34,6 +51,16 @@ let \"CardElement": {
   "options": Js.Json.t,
 } => React.element
 
+let \"CardWidget": {
+  "id": string,
+  "onBlur": option<option<Js.Json.t> => unit>,
+  "onChange": option<option<Js.Json.t> => unit>,
+  "onClick": option<option<Js.Json.t> => unit>,
+  "onFocus": option<option<Js.Json.t> => unit>,
+  "onReady": option<option<Js.Json.t> => unit>,
+  "options": Js.Json.t,
+} => React.element
+
 let \"CardNumberElement": {
   "id": string,
   "onBlur": option<option<Js.Json.t> => unit>,
@@ -44,6 +71,16 @@ let \"CardNumberElement": {
   "options": Js.Json.t,
 } => React.element
 
+let \"CardNumberWidget": {
+  "id": string,
+  "onBlur": option<option<Js.Json.t> => unit>,
+  "onChange": option<option<Js.Json.t> => unit>,
+  "onClick": option<option<Js.Json.t> => unit>,
+  "onFocus": option<option<Js.Json.t> => unit>,
+  "onReady": option<option<Js.Json.t> => unit>,
+  "options": Js.Json.t,
+} => React.element
+
 let \"CardExpiryElement": {
   "id": string,
   "onBlur": option<option<Js.Json.t> => unit>,
@@ -54,6 +91,16 @@ let \"CardExpiryElement": {
   "options": Js.Json.t,
 } => React.element
 
+let \"CardExpiryWidget": {
+  "id": string,
+  "onBlur": option<option<Js.Json.t> => unit>,
+  "onChange": option<option<Js.Json.t> => unit>,
+  "onClick": option<option<Js.Json.t> => unit>,
+  "onFocus": option<option<Js.Json.t> => unit>,
+  "onReady": option<option<Js.Json.t> => unit>,
+  "options": Js.Json.t,
+} => React.element
+
 let \"CardCVCElement": {
   "id": string,
   "onBlur": option<option<Js.Json.t> => unit>,
@@ -64,6 +111,16 @@ let \"CardCVCElement": {
   "options": Js.Json.t,
 } => React.element
 
+let \"CardCVCWidget": {
+  "id": string,
+  "onBlur": option<option<Js.Json.t> => unit>,
+  "onChange": option<option<Js.Json.t> => unit>,
+  "onClick": option<option<Js.Json.t> => unit>,
+  "onFocus": option<option<Js.Json.t> => unit>,
+  "onReady": option<option<Js.Json.t> => unit>,
+  "options": Js.Json.t,
+} => React.element
+
 let useStripe: unit => Context.switchContextType
 
 let useHyper: unit => Context.switchContextType