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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay-tech/react-hyper-js",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "main": "index.js",
   "module": "index.mjs",
   "exports": {

package/src/Index.resi

@@ -29,6 +29,7 @@ let \"PaymentElement": PaymentElement.props<
   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,
@@ -38,6 +39,7 @@ let \"UnifiedCheckout": PaymentElement.props<
   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,
@@ -47,6 +49,7 @@ let \"CardElement": CardElement.props<
   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,
@@ -56,6 +59,7 @@ let \"CardWidget": CardElement.props<
   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,
@@ -65,6 +69,7 @@ let \"CardNumberElement": CardNumber.props<
   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,
@@ -74,6 +79,7 @@ let \"CardNumberWidget": CardNumber.props<
   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,
@@ -83,6 +89,7 @@ let \"CardCVCElement": CardCVC.props<
   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,
@@ -92,6 +99,7 @@ let \"CardCVCWidget": CardCVC.props<
   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,
@@ -101,6 +109,7 @@ let \"CardExpiryElement": CardExpiry.props<
   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,
@@ -110,6 +119,7 @@ let \"CardExpiryWidget": CardExpiry.props<
   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,
@@ -119,6 +129,7 @@ let \"GooglePayElement": GooglePayElement.props<
   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,
@@ -128,6 +139,7 @@ let \"ApplePayElement": ApplePayElement.props<
   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,
@@ -137,6 +149,7 @@ let \"PayPalElement": PayPalElement.props<
   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,
@@ -146,6 +159,7 @@ let \"ExpressCheckoutElement": ExpressCheckoutElement.props<
   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,

package/src/components/ApplePayElement.bs.js

@@ -12,7 +12,8 @@ function ApplePayElement(props) {
               componentType: "applePay",
               onFocus: props.onFocus,
               onBlur: props.onBlur,
-              onClick: props.onClick
+              onClick: props.onClick,
+              onComplete: props.onComplete
             });
 }
 

package/src/components/ApplePayElement.res

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

package/src/components/CardCVC.bs.js

@@ -12,7 +12,8 @@ function CardCVC(props) {
               componentType: "cardCvc",
               onFocus: props.onFocus,
               onBlur: props.onBlur,
-              onClick: props.onClick
+              onClick: props.onClick,
+              onComplete: props.onComplete
             });
 }
 

package/src/components/CardCVC.res

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

package/src/components/CardElement.bs.js

@@ -12,7 +12,8 @@ function CardElement(props) {
               componentType: "card",
               onFocus: props.onFocus,
               onBlur: props.onBlur,
-              onClick: props.onClick
+              onClick: props.onClick,
+              onComplete: props.onComplete
             });
 }
 

package/src/components/CardElement.res

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

package/src/components/CardExpiry.bs.js

@@ -12,7 +12,8 @@ function CardExpiry(props) {
               componentType: "cardExpiry",
               onFocus: props.onFocus,
               onBlur: props.onBlur,
-              onClick: props.onClick
+              onClick: props.onClick,
+              onComplete: props.onComplete
             });
 }
 

package/src/components/CardExpiry.res

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

package/src/components/CardNumber.bs.js

@@ -12,7 +12,8 @@ function CardNumber(props) {
               componentType: "cardNumber",
               onFocus: props.onFocus,
               onBlur: props.onBlur,
-              onClick: props.onClick
+              onClick: props.onClick,
+              onComplete: props.onComplete
             });
 }
 

package/src/components/CardNumber.res

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

package/src/components/ExpressCheckoutElement.bs.js

@@ -12,7 +12,8 @@ function ExpressCheckoutElement(props) {
               componentType: "expressCheckout",
               onFocus: props.onFocus,
               onBlur: props.onBlur,
-              onClick: props.onClick
+              onClick: props.onClick,
+              onComplete: props.onComplete
             });
 }
 

package/src/components/ExpressCheckoutElement.res

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

package/src/components/GooglePayElement.bs.js

@@ -12,7 +12,8 @@ function GooglePayElement(props) {
               componentType: "googlePay",
               onFocus: props.onFocus,
               onBlur: props.onBlur,
-              onClick: props.onClick
+              onClick: props.onClick,
+              onComplete: props.onComplete
             });
 }
 

package/src/components/GooglePayElement.res

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

package/src/components/PayPalElement.bs.js

@@ -12,7 +12,8 @@ function PayPalElement(props) {
               componentType: "payPal",
               onFocus: props.onFocus,
               onBlur: props.onBlur,
-              onClick: props.onClick
+              onClick: props.onClick,
+              onComplete: props.onComplete
             });
 }
 

package/src/components/PayPalElement.res

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

package/src/components/PaymentElement.bs.js

@@ -12,7 +12,8 @@ function PaymentElement(props) {
               componentType: "payment",
               onFocus: props.onFocus,
               onBlur: props.onBlur,
-              onClick: props.onClick
+              onClick: props.onClick,
+              onComplete: props.onComplete
             });
 }
 

package/src/components/PaymentElement.res

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

package/src/components/PaymentElementsWrapper.bs.js

@@ -6,6 +6,7 @@ import * as Caml_option from "rescript/lib/es6/caml_option.js";
 import * as JsxRuntime from "react/jsx-runtime";
 
 function PaymentElementsWrapper(props) {
+  var onComplete = props.onComplete;
   var onClick = props.onClick;
   var onBlur = props.onBlur;
   var onFocus = props.onFocus;
@@ -32,6 +33,7 @@ function PaymentElementsWrapper(props) {
           paymentElement.on("blur", onBlur);
           paymentElement.on("clickTriggered", onClick);
           paymentElement.on("change", onChange);
+          paymentElement.on("complete", onComplete);
         }), [
         elementsState,
         hyperSwitch

package/src/components/PaymentElementsWrapper.res

@@ -8,6 +8,7 @@ let make = (
   ~onFocus,
   ~onBlur,
   ~onClick,
+  ~onComplete,
 ) => {
   let hyperSwitch = React.useContext(Context.switchContext)
   let elementsState = React.useContext(Context.elementsContext)
@@ -27,6 +28,7 @@ let make = (
     paymentElement.on("blur", onBlur)
     paymentElement.on("clickTriggered", onClick)
     paymentElement.on("change", onChange)
+    paymentElement.on("complete", onComplete)
     None
   }, (elementsState, hyperSwitch))