diff --git a/src/Payment.res b/src/Payment.res
index 0bddccac1..a9014bff2 100644
--- a/src/Payment.res
+++ b/src/Payment.res
@@ -14,6 +14,8 @@ let make = (~paymentMode, ~integrateError, ~logger) => {
let keys = Recoil.useRecoilValueFromAtom(keys)
let cardScheme = Recoil.useRecoilValueFromAtom(RecoilAtoms.cardBrand)
let showFeilds = Recoil.useRecoilValueFromAtom(RecoilAtoms.showCardFeildsAtom)
+ let paymentToken = Recoil.useRecoilValueFromAtom(RecoilAtoms.paymentTokenAtom)
+ let (token, _) = paymentToken
let {iframeId} = keys
@@ -200,6 +202,14 @@ let make = (~paymentMode, ~integrateError, ~logger) => {
let submitAPICall = (body, confirmParam) => {
intent(~bodyArr=body, ~confirmParam, ~handleUserError=false, ())
}
+ React.useEffect2(() => {
+ setCvcNumber(_ => "")
+ setIsCVCValid(_ => None)
+ setCvcError(_ => "")
+ setCardError(_ => "")
+ setExpiryError(_ => "")
+ None
+ }, (token, showFeilds))
let submitValue = (_ev, confirmParam) => {
let validFormat = switch paymentMode->getPaymentMode {
diff --git a/src/Payments/CardPayment.res b/src/Payments/CardPayment.res
index bcd1e1a4e..910f7cac5 100644
--- a/src/Payments/CardPayment.res
+++ b/src/Payments/CardPayment.res
@@ -47,7 +47,7 @@ let make = (
isCVCValid,
setIsCVCValid,
cvcNumber,
- setCvcNumber,
+ _,
changeCVCNumber,
handleCVCBlur,
cvcRef,
@@ -63,7 +63,7 @@ let make = (
let intent = PaymentHelpers.usePaymentIntent(Some(loggerState), Card)
let (savedMethods, setSavedMethods) = React.useState(_ => [])
let (showFeilds, setShowFeilds) = Recoil.useRecoilState(RecoilAtoms.showCardFeildsAtom)
- let (paymentToken, setPaymentToken) = React.useState(_ => ("", ""))
+ let (paymentToken, setPaymentToken) = Recoil.useRecoilState(RecoilAtoms.paymentTokenAtom)
let (token, _) = paymentToken
let cardHolderName = Recoil.useRecoilValueFromAtom(RecoilAtoms.userFullName)
let setComplete = Recoil.useSetRecoilState(RecoilAtoms.fieldsComplete)
@@ -81,13 +81,6 @@ let make = (
// ~billingDetails=fields.billingDetails,
// ~logger=loggerState,
// )
- React.useEffect2(() => {
- setCvcNumber(_ => "")
- setCvcError(_ => "")
- setCardError(_ => "")
- setExpiryError(_ => "")
- None
- }, (token, showFeilds))
React.useEffect1(() => {
switch customerPaymentMethods {
| LoadingSavedCards => ()
@@ -123,12 +116,11 @@ let make = (
savedMethods->Js.Array2.length > 0
? Some(savedMethods->Belt.Array.get(0)->Belt.Option.getWithDefault(defaultCustomerMethods))
: None
- setPaymentToken(_ =>
- switch tokenobj {
- | Some(obj) => (obj.paymentToken, obj.customerId)
- | None => ("", "")
- }
- )
+
+ switch tokenobj {
+ | Some(obj) => setPaymentToken(._ => (obj.paymentToken, obj.customerId))
+ | None => ()
+ }
None
}, [savedMethods])
diff --git a/src/Utilities/RecoilAtoms.res b/src/Utilities/RecoilAtoms.res
index 84c8ae524..05027af65 100644
--- a/src/Utilities/RecoilAtoms.res
+++ b/src/Utilities/RecoilAtoms.res
@@ -10,6 +10,7 @@ let list = Recoil.atom(. "paymentMethodList", PaymentType.Loading)
let loggerAtom = Recoil.atom(. "component", OrcaLogger.defaultLoggerConfig)
let sessionId = Recoil.atom(. "sessionId", "")
let selectedOptionAtom = Recoil.atom(. "selectedOption", "")
+let paymentTokenAtom = Recoil.atom(. "paymentToken", ("", ""))
let showCardFeildsAtom = Recoil.atom(. "showCardFeilds", false)
let phoneJson = Recoil.atom(. "phoneJson", Loading)
let cardBrand = Recoil.atom(. "cardBrand", "")