@juspay-tech/react-hyper-js 0.0.1

package/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

package/bsconfig.json

@@ -0,0 +1,19 @@
+{
+  "name": "react-orca-js",
+  "sources": [
+    {
+      "dir": "src", 
+      "subdirs": true
+    }
+  ],
+  "package-specs": [
+    {
+      "module": "es6",
+      "in-source": true
+    }
+  ],
+  "suffix": ".bs.js",
+  "reason": { "react-jsx": 3 },
+  "bs-dependencies": ["@rescript/react","@ryyppy/rescript-promise", "bs-fetch"]
+
+}

package/build.js

@@ -0,0 +1,29 @@
+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",
+    minify: true,
+    bundle: true,
+    loader: {
+      ".js": "jsx",
+    },
+    format: "esm",
+    external: ["react", "react-dom"],
+    plugins: [
+      inlineImage(),
+      postcss(),
+      // copy({
+      //   assets: {
+      //     from: ["./public/**/*"],
+      //     to: ["../"],
+      //     keepStructure: true,
+      //   },
+      // }),
+    ],
+  })
+  .catch(() => process.exit(1));

package/index.js

@@ -0,0 +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};

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@juspay-tech/react-hyper-js",
+  "version": "0.0.1",
+  "main": "index.js",
+  "dependencies": {
+    "@rescript/react": "^0.10.3",
+    "@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"
+  },
+  "scripts": {
+    "start": "webpack-dev-server --open",
+    "build": "webpack --mode development; cp dist/index.js index.js",
+    "build:es": "node build.js",
+    "re:build": "rescript",
+    "re:start": "rescript build -w",
+    "publish:public": "npm publish --access public"
+  },
+  "peerDependencies": {
+    "react": "^16.14.0",
+    "react-dom": "^16.9.0"
+  },
+  "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",
+    "esbuild": "^0.15.9",
+    "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",
+    "style-loader": "^0.21.0"
+  },
+  "directories": {
+    "lib": "lib"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@bitbucket.org/juspay/react-orca-js.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "homepage": "https://bitbucket.org/juspay/react-orca-js#readme",
+  "bugs": {
+    "url": "https://bitbucket.org/juspay/react-orca-js/issues"
+  },
+  "description": ""
+}

package/src/Context.bs.js

@@ -0,0 +1,134 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+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 Belt_Option from "rescript/lib/es6/belt_Option.js";
+
+function confirmPaymentFn(_elements) {
+  return Promise.resolve({});
+}
+
+function confirmCardPaymentFn(_clientSecretId, _data, _options) {
+  return Promise.resolve({});
+}
+
+function retrievePaymentIntentFn(_paymentIntentId) {
+  return Promise.resolve({});
+}
+
+function paymentRequest(options) {
+  return options;
+}
+
+var defaultSwitchContext = {
+  clientSecret: "",
+  confirmPayment: confirmPaymentFn,
+  confirmCardPayment: confirmCardPaymentFn,
+  retrievePaymentIntent: retrievePaymentIntentFn,
+  paymentRequest: paymentRequest
+};
+
+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
+};
+
+function getString(dict, key, defaultVal) {
+  return Belt_Option.getWithDefault(Belt_Option.flatMap(Js_dict.get(dict, key), Js_json.decodeString), defaultVal);
+}
+
+function elementsOptionObjMapper(options) {
+  var dict = Belt_Option.getWithDefault(Js_json.decodeObject(options), {});
+  return {
+          fonts: Belt_Option.getWithDefault(Belt_Option.flatMap(Js_dict.get(dict, "fonts"), Js_json.decodeArray), []),
+          locale: getString(dict, "locale", ""),
+          clientSecret: getString(dict, "clientSecret", ""),
+          appearance: Belt_Option.getWithDefault(Belt_Option.flatMap(Js_dict.get(dict, "appearance"), Js_json.decodeObject), {}),
+          loader: getString(dict, "loader", "auto")
+        };
+}
+
+function update(_options) {
+  
+}
+
+function getElement(_componentName) {
+  
+}
+
+function fetchUpdates(param) {
+  return new Promise((function (resolve, param) {
+                setTimeout((function (param) {
+                        resolve({});
+                      }), 1000);
+              }));
+}
+
+function create(_componentType, _options) {
+  return OrcaJs.defaultPaymentElement;
+}
+
+var defaultElementsContext_options = {
+  fonts: [],
+  locale: "",
+  clientSecret: "",
+  appearance: {},
+  loader: ""
+};
+
+var defaultElementsContext = {
+  options: defaultElementsContext_options,
+  update: update,
+  getElement: getElement,
+  fetchUpdates: fetchUpdates,
+  create: create
+};
+
+var elementsContext = React.createContext(defaultElementsContext);
+
+function makeProps$1(value, children, param) {
+  return {
+          value: value,
+          children: children
+        };
+}
+
+var make$1 = elementsContext.Provider;
+
+var ElementsContextProvider = {
+  makeProps: makeProps$1,
+  make: make$1
+};
+
+export {
+  confirmPaymentFn ,
+  confirmCardPaymentFn ,
+  retrievePaymentIntentFn ,
+  paymentRequest ,
+  defaultSwitchContext ,
+  switchContext ,
+  SwitchContextProvider ,
+  getString ,
+  elementsOptionObjMapper ,
+  update ,
+  getElement ,
+  fetchUpdates ,
+  create ,
+  defaultElementsContext ,
+  elementsContext ,
+  ElementsContextProvider ,
+}
+/* confirmCardPaymentFn Not a pure module */

package/src/Context.res

@@ -0,0 +1,177 @@
+@get
+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"
+@get external getClientSecret: 'a => string = "clientSecret"
+external toJson: 'b => Js.Json.t = "%identity"
+type func = (. unit) => string
+external toFunc: 'c => func = "%identity"
+
+type paymentElement
+
+type address = {
+  city: option<string>,
+  country: option<string>,
+  line1: option<string>,
+  line2: option<string>,
+  postal_code: option<string>,
+  state: option<string>,
+}
+type confirmCardPaymentMethodType = String(string) | Obj(Js.Json.t)
+type shipping = {
+  address: address,
+  name: string,
+  carrier: option<string>,
+  phone: option<string>,
+  tracking_number: option<string>,
+}
+type paymentMethodOptionsCard = {
+  cvc: React.element,
+  network: string,
+}
+type paymentMethodOptions = {card: paymentMethodOptionsCard}
+type confirmCardPaymentDataType = {
+  payment_method: confirmCardPaymentMethodType,
+  shipping: shipping,
+  return_url: string,
+  receipt_email: string,
+  setup_future_usage: string,
+  payment_method_options: string,
+}
+type elementsOptions = {
+  fonts: Js.Array2.t<Js.Json.t>,
+  locale: string,
+  clientSecret: string,
+  appearance: Js.Dict.t<Js.Json.t>,
+  loader: string,
+}
+external optionsToJson: elementsOptions => Js.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.
+}
+
+type elementsContextType = {options: Js.Dict.t<Js.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_)
+  }
+
+let retrievePaymentIntentFn = _paymentIntentId => {
+  Js.Promise.resolve(Js.Dict.empty()->Js.Json.object_)
+}
+let paymentRequest = options => {
+  options
+}
+
+let defaultSwitchContext = {
+  clientSecret: "",
+  confirmPayment: confirmPaymentFn,
+  confirmCardPayment: confirmCardPaymentFn,
+  retrievePaymentIntent: retrievePaymentIntentFn,
+  paymentRequest,
+}
+
+let switchContext = React.createContext(defaultSwitchContext)
+
+module SwitchContextProvider = {
+  let makeProps = (~value, ~children, ()) =>
+    {
+      "value": value,
+      "children": children,
+    }
+
+  let make = React.Context.provider(switchContext)
+}
+
+let getString = (dict, key, defaultVal) => {
+  dict
+  ->Js.Dict.get(key)
+  ->Belt.Option.flatMap(Js.Json.decodeString)
+  ->Belt.Option.getWithDefault(defaultVal)
+}
+
+let elementsOptionObjMapper = (options: Js.Json.t) => {
+  let dict = options->Js.Json.decodeObject->Belt.Option.getWithDefault(Js.Dict.empty())
+  {
+    fonts: dict
+    ->Js.Dict.get("fonts")
+    ->Belt.Option.flatMap(Js.Json.decodeArray)
+    ->Belt.Option.getWithDefault([]),
+    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()),
+    loader: dict->getString("loader", "auto"),
+  }
+}
+
+let update = _options => {
+  ()
+}
+
+let getElement = _componentName => {
+  None
+}
+
+let fetchUpdates = () => {
+  //add API call
+  Js.Promise.make((~resolve, ~reject as _) => {
+    Js.Global.setTimeout(() => resolve(. Js.Dict.empty()->Js.Json.object_), 1000)->ignore
+  })
+}
+
+let create = (_componentType, _options) => {
+  OrcaJs.defaultPaymentElement
+}
+let defaultElementsContext = {
+  options: {
+    fonts: [],
+    locale: "",
+    clientSecret: "",
+    appearance: Js.Dict.empty(),
+    loader: "",
+  },
+  update,
+  getElement,
+  fetchUpdates,
+  create,
+}
+
+let elementsContext = React.createContext(defaultElementsContext)
+
+module ElementsContextProvider = {
+  let makeProps = (~value, ~children, ()) =>
+    {
+      "value": value,
+      "children": children,
+    }
+
+  let make = React.Context.provider(elementsContext)
+}

package/src/Index.bs.js

@@ -0,0 +1,243 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Curry from "rescript/lib/es6/curry.js";
+import * as React from "react";
+import * as Context from "./Context.bs.js";
+import * as Js_promise from "rescript/lib/es6/js_promise.js";
+
+function Index$Elements2(Props) {
+  var children = Props.children;
+  var stripe = Props.stripe;
+  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);
+                }), stripe);
+        }), []);
+  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);
+}
+
+function useStripe(param) {
+  console.warn("useStripe() is deprecated. Use useHyper() instead");
+  return React.useContext(Context.switchContext);
+}
+
+function useWidgets(param) {
+  return React.useContext(Context.elementsContext);
+}
+
+function useElements(param) {
+  console.warn("useElements() is deprecated. Use useWidgets() instead");
+  return React.useContext(Context.elementsContext);
+}
+
+function Index$PaymentElementsWrapper(Props) {
+  var idOpt = Props.id;
+  var options = Props.options;
+  var onChange = Props.onChange;
+  var onReady = Props.onReady;
+  var componentType = Props.componentType;
+  var onFocus = Props.onFocus;
+  var onBlur = Props.onBlur;
+  var onClick = Props.onClick;
+  var id = idOpt !== undefined ? idOpt : "payment-Element";
+  var hyperSwitch = React.useContext(Context.switchContext);
+  var elementsState = React.useContext(Context.elementsContext);
+  var divRef = React.useRef(null);
+  var paymentElement = Curry._2(elementsState.create, componentType, options);
+  React.useEffect((function () {
+          var paymentElement = Curry._2(elementsState.create, componentType, options);
+          Curry._1(paymentElement.mount, "#orca-elements-payment-element-" + id + "");
+        }), [
+        divRef,
+        elementsState
+      ]);
+  React.useEffect((function () {
+          Curry._2(paymentElement.on, "ready", onReady);
+          Curry._2(paymentElement.on, "focus", onFocus);
+          Curry._2(paymentElement.on, "blur", onBlur);
+          Curry._2(paymentElement.on, "clickTriggered", onClick);
+          Curry._2(paymentElement.on, "change", onChange);
+        }), [
+        elementsState,
+        hyperSwitch
+      ]);
+  return React.createElement("div", {
+              ref: divRef,
+              id: "orca-elements-payment-element-" + id + ""
+            });
+}
+
+function Index$PaymentElement2(Props) {
+  var id = Props.id;
+  var options = Props.options;
+  var onChange = Props.onChange;
+  var onReady = Props.onReady;
+  var onFocus = Props.onFocus;
+  var onBlur = Props.onBlur;
+  var onClick = Props.onClick;
+  return React.createElement(Index$PaymentElementsWrapper, {
+              id: id,
+              options: options,
+              onChange: onChange,
+              onReady: onReady,
+              componentType: "payment",
+              onFocus: onFocus,
+              onBlur: onBlur,
+              onClick: onClick
+            });
+}
+
+function Index$CardElement2(Props) {
+  var id = Props.id;
+  var options = Props.options;
+  var onChange = Props.onChange;
+  var onReady = Props.onReady;
+  var onFocus = Props.onFocus;
+  var onBlur = Props.onBlur;
+  var onClick = Props.onClick;
+  return React.createElement(Index$PaymentElementsWrapper, {
+              id: id,
+              options: options,
+              onChange: onChange,
+              onReady: onReady,
+              componentType: "card",
+              onFocus: onFocus,
+              onBlur: onBlur,
+              onClick: onClick
+            });
+}
+
+function Index$CardNumber2(Props) {
+  var id = Props.id;
+  var options = Props.options;
+  var onChange = Props.onChange;
+  var onReady = Props.onReady;
+  var onFocus = Props.onFocus;
+  var onBlur = Props.onBlur;
+  var onClick = Props.onClick;
+  return React.createElement(Index$PaymentElementsWrapper, {
+              id: id,
+              options: options,
+              onChange: onChange,
+              onReady: onReady,
+              componentType: "cardNumberElement",
+              onFocus: onFocus,
+              onBlur: onBlur,
+              onClick: onClick
+            });
+}
+
+function Index$CardCVC2(Props) {
+  var id = Props.id;
+  var options = Props.options;
+  var onChange = Props.onChange;
+  var onReady = Props.onReady;
+  var onFocus = Props.onFocus;
+  var onBlur = Props.onBlur;
+  var onClick = Props.onClick;
+  return React.createElement(Index$PaymentElementsWrapper, {
+              id: id,
+              options: options,
+              onChange: onChange,
+              onReady: onReady,
+              componentType: "cardCVCElement",
+              onFocus: onFocus,
+              onBlur: onBlur,
+              onClick: onClick
+            });
+}
+
+function Index$CardExpiry2(Props) {
+  var id = Props.id;
+  var options = Props.options;
+  var onChange = Props.onChange;
+  var onReady = Props.onReady;
+  var onFocus = Props.onFocus;
+  var onBlur = Props.onBlur;
+  var onClick = Props.onClick;
+  return React.createElement(Index$PaymentElementsWrapper, {
+              id: id,
+              options: options,
+              onChange: onChange,
+              onReady: onReady,
+              componentType: "cardExpiryElement",
+              onFocus: onFocus,
+              onBlur: onBlur,
+              onClick: onClick
+            });
+}
+
+var Elements = Index$Elements2;
+
+var PaymentElement = Index$PaymentElement2;
+
+var CardElement = Index$CardElement2;
+
+var CardNumberElement = Index$CardNumber2;
+
+var CardExpiryElement = Index$CardExpiry2;
+
+var CardCVCElement = Index$CardCVC2;
+
+export {
+  Elements ,
+  PaymentElement ,
+  CardElement ,
+  CardNumberElement ,
+  CardExpiryElement ,
+  CardCVCElement ,
+  useStripe ,
+  useHyper ,
+  useElements ,
+  useWidgets ,
+}
+/* react Not a pure module */

package/src/Index.res

@@ -0,0 +1,155 @@
+type eventData = {
+  iframeMounted: bool,
+  focusTriggered: bool,
+  blurTriggered: bool,
+  clickTriggered: bool,
+  elementType: string,
+  classChange: bool,
+  newClassType: string,
+}
+
+module Elements2 = {
+  @react.component
+  let make = (~children, ~stripe: 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(() => {
+      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 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 useHyper = () => {
+  React.useContext(Context.switchContext)
+}
+
+let useStripe = () => {
+  Js.Console.warn("useStripe() is deprecated. Use useHyper() instead")
+  useHyper()
+}
+let useWidgets = () => {
+  React.useContext(Context.elementsContext)
+}
+let useElements = () => {
+  Js.Console.warn("useElements() is deprecated. Use useWidgets() instead")
+  useWidgets()
+}
+
+module PaymentElementsWrapper = {
+  @react.component
+  let make = (
+    ~id="payment-Element",
+    ~options: Js.Json.t,
+    ~onChange,
+    ~onReady,
+    ~componentType: string,
+    ~onFocus,
+    ~onBlur,
+    ~onClick,
+  ) => {
+    let hyperSwitch = React.useContext(Context.switchContext)
+    let elementsState = React.useContext(Context.elementsContext)
+    let divRef = React.useRef(Js.Nullable.null)
+
+    let paymentElement = elementsState.create(componentType, options)
+
+    React.useEffect2(() => {
+      let paymentElement = elementsState.create(componentType, options)
+      paymentElement.mount(`#orca-elements-payment-element-${id}`)
+      None
+    }, (divRef, elementsState))
+
+    React.useEffect2(() => {
+      paymentElement.on("ready", onReady)
+      paymentElement.on("focus", onFocus)
+      paymentElement.on("blur", onBlur)
+      paymentElement.on("clickTriggered", onClick)
+      paymentElement.on("change", onChange)
+      None
+    }, (elementsState, hyperSwitch))
+
+    <div ref={divRef->ReactDOM.Ref.domRef} id={`orca-elements-payment-element-${id}`} />
+  }
+}
+
+module PaymentElement2 = {
+  @react.component
+  let make = (~id, ~options: Js.Json.t, ~onChange, ~onReady, ~onFocus, ~onBlur, ~onClick) => {
+    <PaymentElementsWrapper
+      id options onChange onReady onFocus onBlur onClick componentType="payment"
+    />
+  }
+}
+let \"PaymentElement" = PaymentElement2.make
+
+module CardElement2 = {
+  @react.component
+  let make = (~id, ~options: Js.Json.t, ~onChange, ~onReady, ~onFocus, ~onBlur, ~onClick) => {
+    <PaymentElementsWrapper
+      id options onChange onReady onFocus onBlur onClick componentType="card"
+    />
+  }
+}
+let \"CardElement" = 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"
+    />
+  }
+}
+let \"CardNumberElement" = 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"
+    />
+  }
+}
+let \"CardCVCElement" = 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"
+    />
+  }
+}
+let \"CardExpiryElement" = CardExpiry2.make

package/src/Index.resi

@@ -0,0 +1,73 @@
+type eventData = {
+  iframeMounted: bool,
+  focusTriggered: bool,
+  blurTriggered: bool,
+  clickTriggered: bool,
+  elementType: string,
+  classChange: bool,
+  newClassType: string,
+}
+
+let \"Elements": {
+  "children": React.element,
+  "options": Js.Json.t,
+  "stripe": 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 \"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 \"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 \"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 \"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 useStripe: unit => Context.switchContextType
+
+let useHyper: unit => Context.switchContextType
+
+let useElements: unit => Context.elementsType
+
+let useWidgets: unit => Context.elementsType

package/src/OrcaJs.bs.js

@@ -0,0 +1,58 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+
+var This = {};
+
+function defaultPaymentElement_on(_str, _func) {
+  
+}
+
+function defaultPaymentElement_collapse(param) {
+  
+}
+
+function defaultPaymentElement_blur(param) {
+  
+}
+
+function defaultPaymentElement_update(_x) {
+  
+}
+
+function defaultPaymentElement_destroy(param) {
+  
+}
+
+function defaultPaymentElement_unmount(param) {
+  
+}
+
+function defaultPaymentElement_mount(_string) {
+  
+}
+
+function defaultPaymentElement_focus(param) {
+  
+}
+
+function defaultPaymentElement_clear(param) {
+  
+}
+
+var defaultPaymentElement = {
+  on: defaultPaymentElement_on,
+  collapse: defaultPaymentElement_collapse,
+  blur: defaultPaymentElement_blur,
+  update: defaultPaymentElement_update,
+  destroy: defaultPaymentElement_destroy,
+  unmount: defaultPaymentElement_unmount,
+  mount: defaultPaymentElement_mount,
+  focus: defaultPaymentElement_focus,
+  clear: defaultPaymentElement_clear
+};
+
+export {
+  This ,
+  defaultPaymentElement ,
+}
+/* No side effect */

package/src/OrcaJs.res

@@ -0,0 +1,66 @@
+type eventData = {
+  iframeMounted: bool,
+  focusTriggered: bool,
+  blurTriggered: bool,
+  clickTriggered: bool,
+  elementType: string,
+  classChange: bool,
+  newClassType: string,
+}
+type event = {key: string, data: eventData}
+type eventParam = Event(event) | EventData(eventData) | Empty
+type eventHandler = eventParam => unit
+
+module This = {
+  type t
+  @get
+  external iframeElem: t => option<Js.nullable<Dom.element>> = "iframeElem"
+}
+
+type paymentElement = {
+  on: (string, option<option<Js.Json.t> => unit>) => unit,
+  collapse: unit => unit,
+  blur: unit => unit,
+  update: Js.Json.t => unit,
+  destroy: unit => unit,
+  unmount: unit => unit,
+  mount: string => unit,
+  focus: unit => unit,
+  clear: unit => unit,
+}
+
+let defaultPaymentElement = {
+  on: (_str, _func) => (),
+  collapse: () => (),
+  blur: () => (),
+  update: _x => (),
+  destroy: () => (),
+  unmount: () => (),
+  mount: _string => (),
+  focus: () => (),
+  clear: () => (),
+}
+
+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,
+}
+
+type confirmParams = {return_url: string}
+
+type confirmPaymentParams = {
+  elements: Js.Json.t,
+  confirmParams: Js.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,
+}

package/src/Window.bs.js

@@ -0,0 +1,11 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+
+function iframePostMessage(iframeRef, message) {
+  iframeRef.current.contentWindow.postMessage(JSON.stringify(message), "*");
+}
+
+export {
+  iframePostMessage ,
+}
+/* No side effect */

package/src/Window.res

@@ -0,0 +1,26 @@
+type window
+type parent
+
+type event = {data: Js.Json.t}
+@val @scope("window")
+external addEventListener: (string, _ => unit) => unit = "addEventListener"
+@val @scope("window")
+external removeEventListener: (string, 'ev => unit) => unit = "removeEventListener"
+
+@val external window: window = "window"
+@val @scope("window") external iframeParent: parent = "parent"
+
+external eventToJson: event => Js.Json.t = "%identity"
+
+@val @scope(("window", "location"))
+external replace: string => unit = "replace"
+
+type domElement
+@send external postMessage: (domElement, string, string) => unit = "postMessage"
+
+@get
+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, "*")
+}

package/webpack.config.js

@@ -0,0 +1,34 @@
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { library } = require("webpack");
+
+module.exports = {
+  output: {
+    path: path.join(__dirname, "/dist"),
+    filename: "index.js",
+    library: "@juspay/react-juspay-js",
+    libraryTarget: "umd",
+  },
+  entry: "./src/Index.bs.js",
+  plugins: [],
+  devServer: {
+    port: 3030, // you can change the port
+  },
+  externals: ["react", "react-dom"],
+
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+        },
+      },
+      {
+        test: /\.css$/i,
+        use: ["style-loader", "css-loader"],
+      },
+    ],
+  },
+};