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

package/src/Index.resi

@@ -7,124 +7,158 @@ type eventData = {
   classChange: bool,
   newClassType: string,
 }
-
-let \"Elements": {
-  "children": React.element,
-  "options": Js.Json.t,
-  "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>,
-  "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 \"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>,
-  "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 \"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>,
-  "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 \"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>,
-  "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 \"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>,
-  "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 \"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
-
-let useElements: unit => Context.elementsType
-
+let useStripe: unit => Context.switchContextType
 let useWidgets: unit => Context.elementsType
+let useElements: unit => Context.elementsType
+let \"Elements": Elements.props<
+  React.element,
+  RescriptCore.Promise.t<OrcaJs.switchInstance>,
+  RescriptCore.JSON.t,
+> => React.element
+let \"HyperElements": HyperElements.props<
+  React.element,
+  RescriptCore.Promise.t<OrcaJs.switchInstance>,
+  RescriptCore.JSON.t,
+> => React.element
+let \"PaymentElement": PaymentElement.props<
+  string,
+  RescriptCore.JSON.t,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+> => React.element
+let \"UnifiedCheckout": PaymentElement.props<
+  string,
+  RescriptCore.JSON.t,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+> => React.element
+let \"CardElement": CardElement.props<
+  string,
+  RescriptCore.JSON.t,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+> => React.element
+let \"CardWidget": CardElement.props<
+  string,
+  RescriptCore.JSON.t,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+> => React.element
+let \"CardNumberElement": CardNumber.props<
+  string,
+  RescriptCore.JSON.t,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+> => React.element
+let \"CardNumberWidget": CardNumber.props<
+  string,
+  RescriptCore.JSON.t,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+> => React.element
+let \"CardCVCElement": CardCVC.props<
+  string,
+  RescriptCore.JSON.t,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+> => React.element
+let \"CardCVCWidget": CardCVC.props<
+  string,
+  RescriptCore.JSON.t,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+> => React.element
+let \"CardExpiryElement": CardExpiry.props<
+  string,
+  RescriptCore.JSON.t,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+> => React.element
+let \"CardExpiryWidget": CardExpiry.props<
+  string,
+  RescriptCore.JSON.t,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+> => React.element
+let \"GooglePayElement": GooglePayElement.props<
+  string,
+  RescriptCore.JSON.t,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+> => React.element
+let \"ApplePayElement": ApplePayElement.props<
+  string,
+  RescriptCore.JSON.t,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+> => React.element
+let \"PayPalElement": PayPalElement.props<
+  string,
+  RescriptCore.JSON.t,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+> => React.element
+let \"ExpressCheckoutElement": ExpressCheckoutElement.props<
+  string,
+  RescriptCore.JSON.t,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+> => React.element
+let \"HyperManagementElements": HyperManagementElements.props<
+  React.element,
+  RescriptCore.Promise.t<OrcaJs.switchInstance>,
+  RescriptCore.JSON.t,
+> => React.element
+let \"PaymentMethodsManagementElement": PaymentMethodsManagementElement.props<
+  string,
+  RescriptCore.JSON.t,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  string,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+  option<option<RescriptCore.JSON.t> => unit>,
+> => Jsx.element

package/src/OrcaJs.bs.js

@@ -7,11 +7,11 @@ function defaultPaymentElement_on(_str, _func) {
   
 }
 
-function defaultPaymentElement_collapse(param) {
+function defaultPaymentElement_collapse() {
   
 }
 
-function defaultPaymentElement_blur(param) {
+function defaultPaymentElement_blur() {
   
 }
 
@@ -19,11 +19,11 @@ function defaultPaymentElement_update(_x) {
   
 }
 
-function defaultPaymentElement_destroy(param) {
+function defaultPaymentElement_destroy() {
   
 }
 
-function defaultPaymentElement_unmount(param) {
+function defaultPaymentElement_unmount() {
   
 }
 
@@ -31,11 +31,11 @@ function defaultPaymentElement_mount(_string) {
   
 }
 
-function defaultPaymentElement_focus(param) {
+function defaultPaymentElement_focus() {
   
 }
 
-function defaultPaymentElement_clear(param) {
+function defaultPaymentElement_clear() {
   
 }
 

package/src/OrcaJs.res

@@ -18,10 +18,10 @@ module This = {
 }
 
 type paymentElement = {
-  on: (string, option<option<Js.Json.t> => unit>) => unit,
+  on: (string, option<option<JSON.t> => unit>) => unit,
   collapse: unit => unit,
   blur: unit => unit,
-  update: Js.Json.t => unit,
+  update: JSON.t => unit,
   destroy: unit => unit,
   unmount: unit => unit,
   mount: string => unit,
@@ -42,25 +42,24 @@ let defaultPaymentElement = {
 }
 
 type element = {
-  getElement: Js.Dict.key => option<paymentElement>,
-  update: Js.Json.t => unit,
-  fetchUpdates: unit => Js.Promise.t<Js.Json.t>,
-  create: (Js.Dict.key, Js.Json.t) => paymentElement,
+  getElement: string => option<paymentElement>,
+  update: JSON.t => unit,
+  fetchUpdates: unit => Promise.t<JSON.t>,
+  create: (string, JSON.t) => paymentElement,
 }
 
 type confirmParams = {return_url: string}
 
 type confirmPaymentParams = {
-  elements: Js.Json.t,
-  confirmParams: Js.Nullable.t<confirmParams>,
+  elements: JSON.t,
+  confirmParams: Nullable.t<confirmParams>,
 }
 
 type switchInstance = {
-  confirmPayment: Js.Json.t => Js.Promise.t<Js.Json.t>,
-  elements: Js.Json.t => element,
-  confirmCardPayment: Js_OO.Callback.arity4<
-    (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,
+  confirmPayment: JSON.t => Promise.t<JSON.t>,
+  elements: JSON.t => element,
+  confirmCardPayment: (string, option<JSON.t>, option<JSON.t>) => Promise.t<JSON.t>,
+  retrievePaymentIntent: string => Promise.t<JSON.t>,
+  paymentRequest: JSON.t => JSON.t,
+  paymentMethodsManagementElements: JSON.t => element,
 }

package/src/Window.res

@@ -1,7 +1,7 @@
 type window
 type parent
 
-type event = {data: Js.Json.t}
+type event = {data: JSON.t}
 @val @scope("window")
 external addEventListener: (string, _ => unit) => unit = "addEventListener"
 @val @scope("window")
@@ -10,7 +10,7 @@ external removeEventListener: (string, 'ev => unit) => unit = "removeEventListen
 @val external window: window = "window"
 @val @scope("window") external iframeParent: parent = "parent"
 
-external eventToJson: event => Js.Json.t = "%identity"
+external eventToJson: event => JSON.t = "%identity"
 
 @val @scope(("window", "location"))
 external replace: string => unit = "replace"
@@ -22,5 +22,5 @@ type domElement
 external contentWindow: Js.nullable<Dom.element> => domElement = "contentWindow"
 
 let iframePostMessage = (iframeRef: React.ref<Js.nullable<Dom.element>>, message) => {
-  iframeRef.current->contentWindow->postMessage(message->Js.Json.stringify, "*")
+  iframeRef.current->contentWindow->postMessage(message->JSON.stringify, "*")
 }

package/src/components/ApplePayElement.bs.js

@@ -0,0 +1,24 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as JsxRuntime from "react/jsx-runtime";
+import * as PaymentElementsWrapper from "./PaymentElementsWrapper.bs.js";
+
+function ApplePayElement(props) {
+  return JsxRuntime.jsx(PaymentElementsWrapper.make, {
+              id: props.id,
+              options: props.options,
+              onChange: props.onChange,
+              onReady: props.onReady,
+              componentType: "applePay",
+              onFocus: props.onFocus,
+              onBlur: props.onBlur,
+              onClick: props.onClick
+            });
+}
+
+var make = ApplePayElement;
+
+export {
+  make ,
+}
+/* react/jsx-runtime Not a pure module */

package/src/components/ApplePayElement.res

@@ -0,0 +1,6 @@
+@react.component
+let make = (~id, ~options: JSON.t, ~onChange, ~onReady, ~onFocus, ~onBlur, ~onClick) => {
+  <PaymentElementsWrapper
+    id options onChange onReady onFocus onBlur onClick componentType="applePay"
+  />
+}

package/src/components/CardCVC.bs.js

@@ -0,0 +1,24 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as JsxRuntime from "react/jsx-runtime";
+import * as PaymentElementsWrapper from "./PaymentElementsWrapper.bs.js";
+
+function CardCVC(props) {
+  return JsxRuntime.jsx(PaymentElementsWrapper.make, {
+              id: props.id,
+              options: props.options,
+              onChange: props.onChange,
+              onReady: props.onReady,
+              componentType: "cardCvc",
+              onFocus: props.onFocus,
+              onBlur: props.onBlur,
+              onClick: props.onClick
+            });
+}
+
+var make = CardCVC;
+
+export {
+  make ,
+}
+/* react/jsx-runtime Not a pure module */

package/src/components/CardCVC.res

@@ -0,0 +1,6 @@
+@react.component
+let make = (~id, ~options: JSON.t, ~onChange, ~onReady, ~onFocus, ~onBlur, ~onClick) => {
+  <PaymentElementsWrapper
+    id options onChange onReady onFocus onBlur onClick componentType="cardCvc"
+  />
+}

package/src/components/CardElement.bs.js

@@ -0,0 +1,24 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as JsxRuntime from "react/jsx-runtime";
+import * as PaymentElementsWrapper from "./PaymentElementsWrapper.bs.js";
+
+function CardElement(props) {
+  return JsxRuntime.jsx(PaymentElementsWrapper.make, {
+              id: props.id,
+              options: props.options,
+              onChange: props.onChange,
+              onReady: props.onReady,
+              componentType: "card",
+              onFocus: props.onFocus,
+              onBlur: props.onBlur,
+              onClick: props.onClick
+            });
+}
+
+var make = CardElement;
+
+export {
+  make ,
+}
+/* react/jsx-runtime Not a pure module */

package/src/components/CardElement.res

@@ -0,0 +1,4 @@
+@react.component
+let make = (~id, ~options: JSON.t, ~onChange, ~onReady, ~onFocus, ~onBlur, ~onClick) => {
+  <PaymentElementsWrapper id options onChange onReady onFocus onBlur onClick componentType="card" />
+}

package/src/components/CardExpiry.bs.js

@@ -0,0 +1,24 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as JsxRuntime from "react/jsx-runtime";
+import * as PaymentElementsWrapper from "./PaymentElementsWrapper.bs.js";
+
+function CardExpiry(props) {
+  return JsxRuntime.jsx(PaymentElementsWrapper.make, {
+              id: props.id,
+              options: props.options,
+              onChange: props.onChange,
+              onReady: props.onReady,
+              componentType: "cardExpiry",
+              onFocus: props.onFocus,
+              onBlur: props.onBlur,
+              onClick: props.onClick
+            });
+}
+
+var make = CardExpiry;
+
+export {
+  make ,
+}
+/* react/jsx-runtime Not a pure module */

package/src/components/CardExpiry.res

@@ -0,0 +1,6 @@
+@react.component
+let make = (~id, ~options: JSON.t, ~onChange, ~onReady, ~onFocus, ~onBlur, ~onClick) => {
+  <PaymentElementsWrapper
+    id options onChange onReady onFocus onBlur onClick componentType="cardExpiry"
+  />
+}

package/src/components/CardNumber.bs.js

@@ -0,0 +1,24 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as JsxRuntime from "react/jsx-runtime";
+import * as PaymentElementsWrapper from "./PaymentElementsWrapper.bs.js";
+
+function CardNumber(props) {
+  return JsxRuntime.jsx(PaymentElementsWrapper.make, {
+              id: props.id,
+              options: props.options,
+              onChange: props.onChange,
+              onReady: props.onReady,
+              componentType: "cardNumber",
+              onFocus: props.onFocus,
+              onBlur: props.onBlur,
+              onClick: props.onClick
+            });
+}
+
+var make = CardNumber;
+
+export {
+  make ,
+}
+/* react/jsx-runtime Not a pure module */

package/src/components/CardNumber.res

@@ -0,0 +1,6 @@
+@react.component
+let make = (~id, ~options: JSON.t, ~onChange, ~onReady, ~onFocus, ~onBlur, ~onClick) => {
+  <PaymentElementsWrapper
+    id options onChange onReady onFocus onBlur onClick componentType="cardNumber"
+  />
+}

package/src/components/Elements.bs.js

@@ -0,0 +1,71 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as React from "react";
+import * as Context from "../Context.bs.js";
+import * as Js_promise from "rescript/lib/es6/js_promise.js";
+import * as JsxRuntime from "react/jsx-runtime";
+
+function Elements(props) {
+  var options = props.options;
+  var stripe = props.stripe;
+  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 () {
+          ((function (__x) {
+                  return Js_promise.then_((function (switchInstance) {
+                                var orcaElementsConfig = 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 switchValClone_clientSecret = elementOptions.clientSecret;
+                                var switchValClone_confirmPayment = switchInstance.confirmPayment;
+                                var switchValClone_confirmCardPayment = switchInstance.confirmCardPayment;
+                                var switchValClone_retrievePaymentIntent = switchInstance.retrievePaymentIntent;
+                                var switchValClone_paymentRequest = switchInstance.paymentRequest;
+                                var switchValClone = {
+                                  clientSecret: switchValClone_clientSecret,
+                                  confirmPayment: switchValClone_confirmPayment,
+                                  confirmCardPayment: switchValClone_confirmCardPayment,
+                                  retrievePaymentIntent: switchValClone_retrievePaymentIntent,
+                                  paymentRequest: switchValClone_paymentRequest
+                                };
+                                setSwitchState(function (param) {
+                                      return switchValClone;
+                                    });
+                                setElementsState(function (param) {
+                                      return newElemValues;
+                                    });
+                                return Promise.resolve(switchValClone);
+                              }), __x);
+                })(stripe));
+        }), []);
+  return JsxRuntime.jsx(Context.SwitchContextProvider.make, {
+              value: match[0],
+              children: JsxRuntime.jsx(Context.ElementsContextProvider.make, {
+                    value: match$1[0],
+                    children: props.children
+                  })
+            });
+}
+
+var make = Elements;
+
+export {
+  make ,
+}
+/* react Not a pure module */

package/src/components/Elements.res

@@ -0,0 +1,39 @@
+@react.component
+let make = (~children, ~stripe: Promise.t<OrcaJs.switchInstance>, ~options: JSON.t) => {
+  let elementOptions = options->Context.elementsOptionObjMapper
+  let (switchState, setSwitchState) = React.useState(() => Context.defaultSwitchContext)
+  let (elementsState, setElementsState) = React.useState(() => Context.defaultElementsContext)
+
+  React.useEffect0(() => {
+    stripe
+    ->(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 switchValClone: Context.switchContextType = {
+        confirmPayment: switchInstance.confirmPayment,
+        confirmCardPayment: switchInstance.confirmCardPayment,
+        retrievePaymentIntent: switchInstance.retrievePaymentIntent,
+        clientSecret: elementOptions.clientSecret,
+        paymentRequest: switchInstance.paymentRequest,
+      }
+
+      setSwitchState(_ => switchValClone)
+      setElementsState(_ => newElemValues)
+      Promise.resolve(switchValClone)
+    }, _))
+    ->ignore
+    None
+  })
+
+  <Context.SwitchContextProvider value={switchState}>
+    <Context.ElementsContextProvider value={elementsState}>
+      {children}
+    </Context.ElementsContextProvider>
+  </Context.SwitchContextProvider>
+}