feat: add confirmPayment on paymentElement

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay-tech/react-hyper-js",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "main": "dist/bundle.js",
   "files": [
     "dist/",

src/Index.resi

@@ -26,28 +26,8 @@ let \"HyperElements": HyperElements.props<
   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>,
-  option<option<RescriptCore.JSON.t> => unit>,
-  unit => RescriptCore.Promise.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>,
-  option<option<RescriptCore.JSON.t> => unit>,
-  unit => RescriptCore.Promise.t<unit>,
-> => React.element
+let \"PaymentElement": React.component<OrcaJs.paymentElementProps>
+let \"UnifiedCheckout": React.component<OrcaJs.paymentElementProps>
 let \"CardElement": CardElement.props<
   string,
   RescriptCore.JSON.t,

src/OrcaJs.res

@@ -81,3 +81,17 @@ type switchInstance = {
   initiateUpdateIntent: unit => promise<JSON.t>,
   confirmTokenization: JSON.t => Promise.t<JSON.t>,
 }
+
+type paymentElementProps = {
+  id: string,
+  options: JSON.t,
+  onChange: option<option<JSON.t> => unit>,
+  onReady: option<option<JSON.t> => unit>,
+  onFocus: option<option<JSON.t> => unit>,
+  onBlur: option<option<JSON.t> => unit>,
+  onClick: option<option<JSON.t> => unit>,
+  onPaymentComplete: option<option<JSON.t> => unit>,
+  onPaymentButtonClick: unit => Promise.t<unit>,
+}
+
+type paymentElementHandle = {confirmPayment: JSON.t => Promise.t<JSON.t>}

src/components/PaymentElement.res

@@ -1,14 +1,17 @@
-@react.component
-let make = (
-  ~id,
-  ~options: JSON.t,
-  ~onChange,
-  ~onReady,
-  ~onFocus,
-  ~onBlur,
-  ~onClick,
-  ~onPaymentComplete,
-  ~onPaymentButtonClick,
+open OrcaJs
+let make = React.forwardRef((
+  {
+    id,
+    options,
+    onChange,
+    onReady,
+    onFocus,
+    onBlur,
+    onClick,
+    onPaymentComplete,
+    onPaymentButtonClick,
+  },
+  imperativeRef,
 ) => {
   <PaymentElementsWrapper
     id
@@ -21,5 +24,6 @@ let make = (
     componentType="payment"
     onPaymentComplete
     onPaymentButtonClick
+    imperativeRef
   />
-}
+})

src/components/PaymentElementsWrapper.res

@@ -1,3 +1,4 @@
+open OrcaJs
 @react.component
 let make = (
   ~id="payment-Element",
@@ -10,13 +11,22 @@ let make = (
   ~onClick,
   ~onPaymentComplete,
   ~onPaymentButtonClick,
+  ~imperativeRef: Nullable.t<React.ref<paymentElementHandle>>=Nullable.null,
 ) => {
   let hyperSwitch = React.useContext(Context.switchContext)
   let elementsState = React.useContext(Context.elementsContext)
   let divRef = React.useRef(Nullable.null)
 
   let paymentElement = elementsState.create(componentType, options)
 
+  React.useImperativeHandle1(
+    imperativeRef,
+    () => {
+      confirmPayment: hyperSwitch.confirmPayment,
+    },
+    [hyperSwitch],
+  )
+
   React.useEffect2(() => {
     let paymentElement = elementsState.create(componentType, options)
     paymentElement.mount(`#orca-elements-payment-element-${id}`)