unit = "postMessage"
+@send external postMessage: (Window.window, JSON.t, string) => unit = "postMessage"
-external eventToJson: ReactEvent.Mouse.t => Js.Json.t = "%identity"
+external eventToJson: ReactEvent.Mouse.t => JSON.t = "%identity"
module Loader = {
@react.component
@@ -14,41 +14,72 @@ module Loader = {
}
}
@react.component
-let make = () => {
- let {themeObj, localeString} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
+let make = (
+ ~cvcProps: CardUtils.cvcProps,
+ ~cardProps: CardUtils.cardProps,
+ ~expiryProps: CardUtils.expiryProps,
+ ~selectedOption: PaymentModeType.payment,
+) => {
+ open RecoilAtoms
+ let {themeObj, localeString} = Recoil.useRecoilValueFromAtom(configAtom)
let (isDisabled, setIsDisabled) = React.useState(() => false)
let (showLoader, setShowLoader) = React.useState(() => false)
- let complete = Recoil.useRecoilValueFromAtom(RecoilAtoms.fieldsComplete)
+ let areRequiredFieldsValidValue = Recoil.useRecoilValueFromAtom(areRequiredFieldsValid)
+ let {sdkHandleConfirmPayment} = Recoil.useRecoilValueFromAtom(optionAtom)
- let handleOnClick = _ev => {
+ let (isCVCValid, _, _, _, _, _, _, _, _, _) = cvcProps
+ let (isCardValid, _, _, _, _, _, _, _, _, _) = cardProps
+ let (isExpiryValid, _, _, _, _, _, _, _, _) = expiryProps
+
+ let validFormat =
+ isCVCValid->Option.getOr(false) &&
+ isCardValid->Option.getOr(false) &&
+ isExpiryValid->Option.getOr(false) &&
+ areRequiredFieldsValidValue
+
+ let confirmPayload = sdkHandleConfirmPayment->PaymentBody.confirmPayloadForSDKButton
+
+ let handleOnClick = _ => {
setIsDisabled(_ => true)
setShowLoader(_ => true)
- Utils.handleOnConfirmPostMessage(~targetOrigin="*", ())
+ Utils.handlePostMessage([("handleSdkConfirm", confirmPayload)])
}
- React.useEffect1(() => {
- setIsDisabled(_ => !complete)
+ React.useEffect3(() => {
+ if selectedOption === Card {
+ setIsDisabled(_ => !validFormat)
+ } else {
+ setIsDisabled(_ => !areRequiredFieldsValidValue)
+ }
None
- }, [complete])
+ }, (validFormat, areRequiredFieldsValidValue, selectedOption))
-
+
diff --git a/src/Components/SavedCardItem.res b/src/Components/SavedCardItem.res
index 193d25d5d..4bf71a45f 100644
--- a/src/Components/SavedCardItem.res
+++ b/src/Components/SavedCardItem.res
@@ -9,6 +9,8 @@ let make = (
~cvcProps,
~paymentType,
~list,
+ ~savedMethods,
+ ~setRequiredFieldsBody,
) => {
let {themeObj, config} = Recoil.useRecoilValueFromAtom(RecoilAtoms.configAtom)
let (cardBrand, setCardBrand) = Recoil.useRecoilState(RecoilAtoms.cardBrand)
@@ -45,6 +47,13 @@ let make = (
None
}, [isActive])
+ let isCard = paymentItem.paymentMethod === "card"
+
+ let paymentMethodType = switch paymentItem.paymentMethodType {
+ | Some(paymentMethodType) => paymentMethodType->Utils.snakeToTitleCase
+ | None => "debit"
+ }
+
-
brandIcon
-
-
{React.string(`****`)}
-
{React.string({paymentItem.card.last4Digits})}
+
+ brandIcon
-
-
-
- {React.string(
- `${paymentItem.card.expiryMonth} / ${paymentItem.card.expiryYear->CardUtils.formatExpiryToTwoDigit}`,
- )}
+
+ {isCard
+ ?
+
{React.string(`****`)}
+
{React.string({paymentItem.card.last4Digits})}
+
+ :
{React.string(paymentMethodType)}
}
+
+
+
+
+
+
+ {React.string(
+ `${paymentItem.card.expiryMonth} / ${paymentItem.card.expiryYear->CardUtils.formatExpiryToTwoDigit}`,
+ )}
+
+
-
-
{React.string("CVC: ")}
-
-
+
+
+
{React.string("CVC: ")}
+
+
+
CardUtils.cardType}
/>
diff --git a/src/Components/SavedMethods.res b/src/Components/SavedMethods.res
index 36784020b..3a5bac83a 100644
--- a/src/Components/SavedMethods.res
+++ b/src/Components/SavedMethods.res
@@ -21,16 +21,30 @@ let make = (
let intent = PaymentHelpers.usePaymentIntent(Some(loggerState), Card)
let (token, _) = paymentToken
let savedCardlength = savedMethods->Js.Array2.length
+
+ let getWalletBrandIcon = (obj: PaymentType.customerMethods) => {
+ switch obj.paymentMethodType {
+ | Some("apple_pay") =>
+ | Some("google_pay") =>
+ | Some("paypal") =>
+ | _ =>
+ }
+ }
+
let bottomElement = {
savedMethods
->Js.Array2.mapi((obj, i) => {
- let brandIcon = getCardBrandIcon(
- switch obj.card.scheme {
- | Some(ele) => ele
- | None => ""
- }->cardType,
- ""->CardTheme.getPaymentMode,
- )
+ let brandIcon = switch obj.paymentMethod {
+ | "wallet" => getWalletBrandIcon(obj)
+ | _ =>
+ getCardBrandIcon(
+ switch obj.card.scheme {
+ | Some(ele) => ele
+ | None => ""
+ }->cardType,
+ ""->CardTheme.getPaymentMode,
+ )
+ }
let isActive = token == obj.paymentToken
Belt.Int.toString}
@@ -43,6 +57,8 @@ let make = (
cvcProps
paymentType
list
+ savedMethods
+ setRequiredFieldsBody
/>
})
->React.array
@@ -59,11 +75,34 @@ let make = (
let json = ev.data->Js.Json.parseExn
let confirm = json->getDictFromJson->ConfirmType.itemToObjMapper
let (token, customerId) = paymentToken
- let savedCardBody = PaymentBody.savedCardBody(~paymentToken=token, ~customerId, ~cvcNumber)
+ let customerMethod =
+ savedMethods
+ ->Js.Array2.filter(savedMethod => {
+ savedMethod.paymentToken === token
+ })
+ ->Belt.Array.get(0)
+ ->Belt.Option.getWithDefault(PaymentType.defaultCustomerMethods)
+ let isCardPaymentMethod = customerMethod.paymentMethod === "card"
+ let savedPaymentMethodBody = switch customerMethod.paymentMethod {
+ | "card" => PaymentBody.savedCardBody(~paymentToken=token, ~customerId, ~cvcNumber)
+ | _ => {
+ let paymentMethodType = switch customerMethod.paymentMethodType {
+ | Some("")
+ | None => Js.Json.null
+ | Some(paymentMethodType) => paymentMethodType->Js.Json.string
+ }
+ PaymentBody.savedPaymentMethodBody(
+ ~paymentToken=token,
+ ~customerId,
+ ~paymentMethod=customerMethod.paymentMethod,
+ ~paymentMethodType,
+ )
+ }
+ }
if confirm.doSubmit {
- if areRequiredFieldsValid && complete && !empty {
+ if areRequiredFieldsValid && (!isCardPaymentMethod || (complete && !empty)) {
intent(
- ~bodyArr=savedCardBody
+ ~bodyArr=savedPaymentMethodBody
->Js.Dict.fromArray
->Js.Json.object_
->OrcaUtils.flattenObject(true)
@@ -81,15 +120,16 @@ let make = (
if !(isCVCValid->Belt.Option.getWithDefault(false)) {
setUserError(localeString.enterValidDetailsText)
}
+ if !areRequiredFieldsValid {
+ setUserError(localeString.enterValidDetailsText)
+ }
}
}
}, (areRequiredFieldsValid, requiredFieldsBody, empty, complete))
submitPaymentData(submitCallback)
<>
-
+
{if (
savedCardlength === 0 && (loadSavedCards === PaymentType.LoadingSavedCards || !showFields)
) {
@@ -112,19 +152,8 @@ let make = (
} else {
-
-
-
+
{bottomElement}
}}
-
true)
}}>
- {React.string(localeString.addNewCard)}
+ {React.string(localeString.morePaymentMethods)}
{React.string(paymentLabel)}
}}
+
+
+
PaymentModeType.paymentMode}
+ />
+
{switch methodslist {
diff --git a/src/Payments/ApplePay.res b/src/Payments/ApplePay.res
index f5956bcb0..e714c12e3 100644
--- a/src/Payments/ApplePay.res
+++ b/src/Payments/ApplePay.res
@@ -52,10 +52,18 @@ let make = (
? list->PaymentUtils.getConnectors(Wallets(ApplePay(SDK)))
: list->PaymentUtils.getConnectors(Wallets(ApplePay(Redirect)))
+ let isGuestCustomer = UtilityHooks.useIsGuestCustomer()
+
let processPayment = bodyArr => {
+ let requestBody = PaymentUtils.appendedCustomerAcceptance(
+ ~isGuestCustomer,
+ ~paymentType=list.payment_type,
+ ~body=bodyArr,
+ )
+
if isWallet {
intent(
- ~bodyArr,
+ ~bodyArr=requestBody,
~confirmParam={
return_url: options.wallets.walletReturnUrl,
publishableKey,
diff --git a/src/Payments/CardPayment.res b/src/Payments/CardPayment.res
index 2e66628b7..a0f0a8439 100644
--- a/src/Payments/CardPayment.res
+++ b/src/Payments/CardPayment.res
@@ -57,6 +57,9 @@ let make = (
cvcError,
setCvcError,
) = cvcProps
+ let {customerPaymentMethods, displaySavedPaymentMethodsCheckbox} = Recoil.useRecoilValueFromAtom(
+ RecoilAtoms.optionAtom,
+ )
let intent = PaymentHelpers.usePaymentIntent(Some(loggerState), Card)
let (showFields, setShowFields) = Recoil.useRecoilState(RecoilAtoms.showCardFieldsAtom)
let setComplete = Recoil.useSetRecoilState(RecoilAtoms.fieldsComplete)
@@ -83,12 +86,13 @@ let make = (
}, (empty, complete))
let (savedMethods, isGuestCustomer) = React.useMemo1(() => {
- switch options.customerPaymentMethods {
+ switch customerPaymentMethods {
| LoadedSavedCards(savedMethods, isGuest) => (savedMethods, isGuest)
| NoResult(isGuest) => ([], isGuest)
| _ => ([], true)
}
- }, [options.customerPaymentMethods])
+ }, [customerPaymentMethods])
+
let isCvcValidValue = CardUtils.getBoolOptionVal(isCVCValid)
let (cardEmpty, cardComplete, cardInvalid) = CardUtils.useCardDetails(
~cvcNumber,
@@ -100,7 +104,8 @@ let make = (
let json = ev.data->Js.Json.parseExn
let confirm = json->getDictFromJson->ConfirmType.itemToObjMapper
let (month, year) = CardUtils.getExpiryDates(cardExpiry)
- let onSessionBody = [("setup_future_usage", "on_session"->Js.Json.string)]
+
+ let onSessionBody = [("customer_acceptance", PaymentBody.customerAcceptanceBody)]
let cardNetwork = {
if cardBrand != "" {
[("card_network", cardBrand->Js.Json.string)]
@@ -108,7 +113,7 @@ let make = (
[]
}
}
- let deafultCardBody = PaymentBody.cardPaymentBody(
+ let defaultCardBody = PaymentBody.cardPaymentBody(
~cardNumber,
~month,
~year,
@@ -117,9 +122,15 @@ let make = (
~cardBrand=cardNetwork,
)
let banContactBody = PaymentBody.bancontactBody()
- let cardBody = isSaveCardsChecked
- ? deafultCardBody->Js.Array2.concat(onSessionBody)
- : deafultCardBody
+ let cardBody = if displaySavedPaymentMethodsCheckbox {
+ if isSaveCardsChecked || list.payment_type === "setup_mandate" {
+ defaultCardBody->Js.Array2.concat(onSessionBody)
+ } else {
+ defaultCardBody
+ }
+ } else {
+ defaultCardBody->Js.Array2.concat(onSessionBody)
+ }
if confirm.doSubmit {
let validFormat =
(isBancontact ||
@@ -163,6 +174,11 @@ let make = (
let paymentMethod = isBancontact ? "bank_redirect" : "card"
let paymentMethodType = isBancontact ? "bancontact_card" : "debit"
+ let conditionsForShowingSaveCardCheckbox =
+ !isGuestCustomer &&
+ list.payment_type !== "setup_mandate" &&
+ options.displaySavedPaymentMethodsCheckbox &&
+ !isBancontact
@@ -248,7 +264,7 @@ let make = (
cvcProps={Some(cvcProps)}
isBancontact
/>
-
+
@@ -258,16 +274,18 @@ let make = (
className="Label flex flex-row gap-3 items-end cursor-pointer"
style={ReactDOMStyle.make(
~fontSize="14px",
- ~color=themeObj.colorPrimary,
- ~fontWeight="400",
+ ~float="left",
~marginTop="14px",
+ ~fontWeight=themeObj.fontWeightNormal,
+ ~width="fit-content",
+ ~color=themeObj.colorPrimary,
(),
)}
onClick={_ => {
setShowFields(._ => false)
}}>
-
- {React.string(localeString.useExisitingSavedCards)}
+
+ {React.string(localeString.useExistingPaymentMethods)}
diff --git a/src/Payments/GPay.res b/src/Payments/GPay.res
index 661f7ff8a..163075be4 100644
--- a/src/Payments/GPay.res
+++ b/src/Payments/GPay.res
@@ -33,6 +33,8 @@ let make = (
let areOneClickWalletsRendered = Recoil.useSetRecoilState(RecoilAtoms.areOneClickWalletsRendered)
+ let isGuestCustomer = UtilityHooks.useIsGuestCustomer()
+
let googlePayPaymentMethodType = switch PaymentMethodsRecord.getPaymentMethodTypeFromList(
~list,
~paymentMethod="wallet",
@@ -87,8 +89,14 @@ let make = (
if dict->Js.Dict.get("gpayResponse")->Belt.Option.isSome {
let metadata = dict->getJsonObjectFromDict("gpayResponse")
let obj = metadata->getDictFromJson->itemToObjMapper
+ let gPayBody = PaymentUtils.appendedCustomerAcceptance(
+ ~isGuestCustomer,
+ ~paymentType=list.payment_type,
+ ~body=PaymentBody.gpayBody(~payObj=obj, ~connectors),
+ )
+
let body = {
- PaymentBody.gpayBody(~payObj=obj, ~connectors)
+ gPayBody
->Js.Dict.fromArray
->Js.Json.object_
->OrcaUtils.flattenObject(true)
diff --git a/src/Payments/PayPal.res b/src/Payments/PayPal.res
index 041f7b00f..9ed961667 100644
--- a/src/Payments/PayPal.res
+++ b/src/Payments/PayPal.res
@@ -29,6 +29,8 @@ let make = (~list: PaymentMethodsRecord.list) => {
}
let (buttonColor, textColor) =
options.wallets.style.theme == Light ? ("#0070ba", "#ffffff") : ("#ffc439", "#000000")
+ let isGuestCustomer = UtilityHooks.useIsGuestCustomer()
+
let intent = PaymentHelpers.usePaymentIntent(Some(loggerState), Paypal)
let onPaypalClick = _ev => {
loggerState.setLogInfo(
@@ -45,8 +47,15 @@ let make = (~list: PaymentMethodsRecord.list) => {
if result {
let (connectors, _) = list->PaymentUtils.getConnectors(Wallets(Paypal(Redirect)))
let body = PaymentBody.paypalRedirectionBody(~connectors)
+
+ let modifiedPaymentBody = PaymentUtils.appendedCustomerAcceptance(
+ ~isGuestCustomer,
+ ~paymentType=list.payment_type,
+ ~body,
+ )
+
intent(
- ~bodyArr=body,
+ ~bodyArr=modifiedPaymentBody,
~confirmParam={
return_url: options.wallets.walletReturnUrl,
publishableKey,
diff --git a/src/Payments/PaymentRequestButtonElement.res b/src/Payments/PaymentRequestButtonElement.res
index ba3682e78..798d6bdb5 100644
--- a/src/Payments/PaymentRequestButtonElement.res
+++ b/src/Payments/PaymentRequestButtonElement.res
@@ -11,6 +11,30 @@ let paymentMode = str => {
| _ => NONE
}
}
+
+module WalletsSaveDetailsText = {
+ @react.component
+ let make = (~paymentType) => {
+ open RecoilAtoms
+ let {isGooglePay, isApplePay, isPaypal} = Recoil.useRecoilValueFromAtom(
+ areOneClickWalletsRendered,
+ )
+ let {localeString} = Recoil.useRecoilValueFromAtom(configAtom)
+ let isGuestCustomer = UtilityHooks.useIsGuestCustomer()
+
+
+
+
+
+ {localeString.saveWalletDetails->React.string}
+
+
+
+ }
+}
+
@react.component
let make = (~sessions, ~walletOptions, ~list: PaymentMethodsRecord.list) => {
open SessionsType
@@ -94,5 +118,6 @@ let make = (~sessions, ~walletOptions, ~list: PaymentMethodsRecord.list) => {
})
->React.array}
+
}
diff --git a/src/Payments/PaypalSDK.res b/src/Payments/PaypalSDK.res
index 727aab4a0..42601cb4c 100644
--- a/src/Payments/PaypalSDK.res
+++ b/src/Payments/PaypalSDK.res
@@ -37,6 +37,7 @@ let make = (~sessionObj: SessionsType.token, ~list: PaymentMethodsRecord.list) =
},
}
let handleCloseLoader = () => Utils.handlePostMessage([("fullscreen", false->Js.Json.boolean)])
+ let isGuestCustomer = UtilityHooks.useIsGuestCustomer()
let loadPaypalSdk = () => {
loggerState.setLogInfo(
~value="Paypal SDK Button Clicked",
@@ -94,8 +95,14 @@ let make = (~sessionObj: SessionsType.token, ~list: PaymentMethodsRecord.list) =
~token=payload.nonce,
~connectors,
)
+ let modifiedPaymentBody = PaymentUtils.appendedCustomerAcceptance(
+ ~isGuestCustomer,
+ ~paymentType=list.payment_type,
+ ~body,
+ )
+
intent(
- ~bodyArr=body,
+ ~bodyArr=modifiedPaymentBody,
~confirmParam={
return_url: options.wallets.walletReturnUrl,
publishableKey,
diff --git a/src/SoftTheme.res b/src/SoftTheme.res
index 9038d8cd8..95d4b028d 100644
--- a/src/SoftTheme.res
+++ b/src/SoftTheme.res
@@ -39,6 +39,14 @@ let soft = {
colorIconCardError: "#fe87a1",
spacingGridColumn: "20px",
spacingGridRow: "20px",
+ buttonBackgroundColor: "#3c3d3e",
+ buttonHeight: "48px",
+ buttonWidth: "thin",
+ buttonBorderRadius: "6px",
+ buttonBorderColor: "#7d8fff",
+ buttonTextColor: "#7d8fff",
+ buttonTextFontSize: "16px",
+ buttonTextFontWeight: "500",
}
let softRules = theme =>
diff --git a/src/Types/CardThemeType.res b/src/Types/CardThemeType.res
index 97505436f..ccaa1c050 100644
--- a/src/Types/CardThemeType.res
+++ b/src/Types/CardThemeType.res
@@ -51,6 +51,14 @@ type themeClass = {
colorIconCardError: string,
spacingGridColumn: string,
spacingGridRow: string,
+ buttonBackgroundColor: string,
+ buttonHeight: string,
+ buttonWidth: string,
+ buttonBorderRadius: string,
+ buttonBorderColor: string,
+ buttonTextColor: string,
+ buttonTextFontSize: string,
+ buttonTextFontWeight: string,
}
type appearance = {
theme: theme,
diff --git a/src/Types/PaymentType.res b/src/Types/PaymentType.res
index cfc706cd3..586c310ae 100644
--- a/src/Types/PaymentType.res
+++ b/src/Types/PaymentType.res
@@ -121,6 +121,8 @@ type customerMethods = {
paymentMethod: string,
paymentMethodIssuer: option
,
card: customerCard,
+ paymentMethodType: option,
+ defaultPaymentMethodSet: bool,
}
type savedCardsLoadState =
LoadingSavedCards | LoadedSavedCards(array, bool) | NoResult(bool)
@@ -130,13 +132,19 @@ type billingAddress = {
usePrefilledValues: showType,
}
+type sdkHandleConfirmPayment = {
+ handleConfirm: bool,
+ confirmParams: ConfirmType.confirmParams,
+}
+
type options = {
defaultValues: defaultValues,
layout: layoutType,
business: business,
customerPaymentMethods: savedCardsLoadState,
paymentMethodOrder: option>,
- disableSaveCards: bool,
+ displaySavedPaymentMethodsCheckbox: bool,
+ displaySavedPaymentMethods: bool,
fields: fields,
readOnly: bool,
terms: terms,
@@ -146,6 +154,7 @@ type options = {
payButtonStyle: style,
showCardFormByDefault: bool,
billingAddress: billingAddress,
+ sdkHandleConfirmPayment: sdkHandleConfirmPayment,
}
let defaultCardDetails = {
scheme: None,
@@ -161,6 +170,8 @@ let defaultCustomerMethods = {
paymentMethod: "",
paymentMethodIssuer: None,
card: defaultCardDetails,
+ paymentMethodType: None,
+ defaultPaymentMethodSet: false,
}
let defaultLayout = {
defaultCollapsed: false,
@@ -245,6 +256,12 @@ let defaultBillingAddress = {
isUseBillingAddress: false,
usePrefilledValues: Auto,
}
+
+let defaultSdkHandleConfirmPayment = {
+ handleConfirm: false,
+ confirmParams: ConfirmType.defaultConfirm,
+}
+
let defaultOptions = {
defaultValues: defaultDefaultValues,
business: defaultBusiness,
@@ -252,7 +269,8 @@ let defaultOptions = {
layout: ObjectLayout(defaultLayout),
paymentMethodOrder: None,
fields: defaultFields,
- disableSaveCards: false,
+ displaySavedPaymentMethodsCheckbox: true,
+ displaySavedPaymentMethods: true,
readOnly: false,
terms: defaultTerms,
branding: Auto,
@@ -261,6 +279,7 @@ let defaultOptions = {
customMethodNames: [],
showCardFormByDefault: true,
billingAddress: defaultBillingAddress,
+ sdkHandleConfirmPayment: defaultSdkHandleConfirmPayment,
}
let getLayout = (str, logger) => {
switch str {
@@ -765,6 +784,10 @@ let getCardDetails = (dict, str) => {
->Belt.Option.getWithDefault(defaultCardDetails)
}
+let getPaymentMethodType = dict => {
+ dict->Js.Dict.get("payment_method_type")->Belt.Option.flatMap(Js.Json.decodeString)
+}
+
let createCustomerObjArr = dict => {
let customerDict =
dict
@@ -787,13 +810,15 @@ let createCustomerObjArr = dict => {
let customerPaymentMethods =
customerArr
->Belt.Array.keepMap(Js.Json.decodeObject)
- ->Js.Array2.map(json => {
+ ->Js.Array2.map(dict => {
{
- paymentToken: getString(json, "payment_token", ""),
- customerId: getString(json, "customer_id", ""),
- paymentMethod: getString(json, "payment_method", ""),
- paymentMethodIssuer: Some(getString(json, "payment_method_issuer", "")),
- card: getCardDetails(json, "card"),
+ paymentToken: getString(dict, "payment_token", ""),
+ customerId: getString(dict, "customer_id", ""),
+ paymentMethod: getString(dict, "payment_method", ""),
+ paymentMethodIssuer: Some(getString(dict, "payment_method_issuer", "")),
+ card: getCardDetails(dict, "card"),
+ paymentMethodType: getPaymentMethodType(dict),
+ defaultPaymentMethodSet: getBool(dict, "default_payment_method_set", false),
}
})
LoadedSavedCards(customerPaymentMethods, isGuestCustomer)
@@ -814,6 +839,8 @@ let getCustomerMethods = (dict, str) => {
paymentMethod: getString(json, "payment_method", ""),
paymentMethodIssuer: Some(getString(json, "payment_method_issuer", "")),
card: getCardDetails(json, "card"),
+ paymentMethodType: getPaymentMethodType(dict),
+ defaultPaymentMethodSet: getBool(dict, "default_payment_method_set", false),
}
})
LoadedSavedCards(customerPaymentMethods, false)
@@ -859,6 +886,19 @@ let getBillingAddress = (dict, str, logger) => {
->Belt.Option.getWithDefault(defaultBillingAddress)
}
+let getConfirmParams = dict => {
+ open ConfirmType
+ {
+ return_url: dict->getString("return_url", ""),
+ publishableKey: dict->getString("publishableKey", ""),
+ }
+}
+
+let getSdkHandleConfirmPaymentProps = dict => {
+ handleConfirm: dict->getBool("handleConfirm", false),
+ confirmParams: dict->getDictfromDict("confirmParams")->getConfirmParams,
+}
+
let itemToObjMapper = (dict, logger) => {
unknownKeysWarning(
[
@@ -872,9 +912,11 @@ let itemToObjMapper = (dict, logger) => {
"terms",
"wallets",
"showCardFormByDefault",
- "disableSaveCards",
+ "displaySavedPaymentMethodsCheckbox",
+ "displaySavedPaymentMethods",
"sdkHandleOneClickConfirmPayment",
"showCardFormByDefault",
+ "sdkHandleConfirmPayment",
],
dict,
"options",
@@ -891,7 +933,18 @@ let itemToObjMapper = (dict, logger) => {
"options.branding",
logger,
),
- disableSaveCards: getBoolWithWarning(dict, "disableSaveCards", false, ~logger),
+ displaySavedPaymentMethodsCheckbox: getBoolWithWarning(
+ dict,
+ "displaySavedPaymentMethodsCheckbox",
+ true,
+ ~logger,
+ ),
+ displaySavedPaymentMethods: getBoolWithWarning(
+ dict,
+ "displaySavedPaymentMethods",
+ true,
+ ~logger,
+ ),
readOnly: getBoolWithWarning(dict, "readOnly", false, ~logger),
terms: getTerms(dict, "terms", logger),
wallets: getWallets(dict, "wallets", logger),
@@ -899,6 +952,9 @@ let itemToObjMapper = (dict, logger) => {
payButtonStyle: getStyle(dict, "payButtonStyle", logger),
showCardFormByDefault: getBool(dict, "showCardFormByDefault", true),
billingAddress: getBillingAddress(dict, "billingAddress", logger),
+ sdkHandleConfirmPayment: dict
+ ->getDictfromDict("sdkHandleConfirmPayment")
+ ->getSdkHandleConfirmPaymentProps,
}
}
diff --git a/src/Types/PostalCodeType.res b/src/Types/PostalCodeType.res
index f4226d045..90ab3d25d 100644
--- a/src/Types/PostalCodeType.res
+++ b/src/Types/PostalCodeType.res
@@ -10,7 +10,6 @@ let defaultPostalCode = {
}
type themeDataModule = {default: array}
-open Promise
@val
-external importPostalCode: string => t = "import"
+external importPostalCode: string => Promise.t = "import"
diff --git a/src/Utilities/PaymentBody.res b/src/Utilities/PaymentBody.res
index b7a7b70e0..ffc308d62 100644
--- a/src/Utilities/PaymentBody.res
+++ b/src/Utilities/PaymentBody.res
@@ -62,35 +62,52 @@ let savedCardBody = (~paymentToken, ~customerId, ~cvcNumber) => [
("card_cvc", cvcNumber->Js.Json.string),
]
-let mandateBody = paymentType => {
+let customerAcceptanceBody =
[
+ ("acceptance_type", "online"->Js.Json.string),
+ ("accepted_at", Js.Date.now()->Js.Date.fromFloat->Js.Date.toISOString->Js.Json.string),
(
- "mandate_data",
- [
- (
- "customer_acceptance",
- [
- ("acceptance_type", "online"->Js.Json.string),
- ("accepted_at", Js.Date.now()->Js.Date.fromFloat->Js.Date.toISOString->Js.Json.string),
- (
- "online",
- [("user_agent", BrowserSpec.navigator.userAgent->Js.Json.string)]
- ->Js.Dict.fromArray
- ->Js.Json.object_,
- ),
- ]
- ->Js.Dict.fromArray
- ->Js.Json.object_,
- ),
- ]
+ "online",
+ [("user_agent", BrowserSpec.navigator.userAgent->Js.Json.string)]
->Js.Dict.fromArray
->Js.Json.object_,
),
+ ]
+ ->Js.Dict.fromArray
+ ->Js.Json.object_
+
+let savedPaymentMethodBody = (~paymentToken, ~customerId, ~paymentMethod, ~paymentMethodType) => [
+ ("payment_method", paymentMethod->Js.Json.string),
+ ("payment_token", paymentToken->Js.Json.string),
+ ("customer_id", customerId->Js.Json.string),
+ ("payment_method_type", paymentMethodType),
+]
+
+let mandateBody = paymentType => {
+ [
+ (
+ "mandate_data",
+ [("customer_acceptance", customerAcceptanceBody)]->Js.Dict.fromArray->Js.Json.object_,
+ ),
+ ("customer_acceptance", customerAcceptanceBody),
("setup_future_usage", "off_session"->Js.Json.string),
("payment_type", {paymentType === "" ? Js.Json.null : paymentType->Js.Json.string}),
]
}
+let confirmPayloadForSDKButton = (sdkHandleConfirmPayment: PaymentType.sdkHandleConfirmPayment) =>
+ [
+ ("redirect", "always"->JSON.Encode.string),
+ (
+ "confirmParams",
+ [("return_url", sdkHandleConfirmPayment.confirmParams.return_url->JSON.Encode.string)]
+ ->Dict.fromArray
+ ->JSON.Encode.object,
+ ),
+ ]
+ ->Dict.fromArray
+ ->JSON.Encode.object
+
let achBankDebitBody = (
~email,
~bank: ACHTypes.data,
diff --git a/src/Utilities/PaymentUtils.res b/src/Utilities/PaymentUtils.res
index fb0564cdd..983a550a5 100644
--- a/src/Utilities/PaymentUtils.res
+++ b/src/Utilities/PaymentUtils.res
@@ -227,3 +227,13 @@ let getPaymentMethodName = (~paymentMethodType, ~paymentMethodName) => {
paymentMethodName
}
}
+
+let isAppendingCustomerAcceptance = (~isGuestCustomer, ~paymentType) => {
+ !isGuestCustomer && (paymentType === "new_mandate" || paymentType === "setup_mandate")
+}
+
+let appendedCustomerAcceptance = (~isGuestCustomer, ~paymentType, ~body) => {
+ isAppendingCustomerAcceptance(~isGuestCustomer, ~paymentType)
+ ? body->Array.concat([("customer_acceptance", PaymentBody.customerAcceptanceBody)])
+ : body
+}
diff --git a/src/Utilities/Utils.res b/src/Utilities/Utils.res
index 2362ff5bd..89951da92 100644
--- a/src/Utilities/Utils.res
+++ b/src/Utilities/Utils.res
@@ -57,6 +57,26 @@ let getInt = (dict, key, default: int) => {
->Belt.Float.toInt
}
+let getFloatFromString = (str, default) => {
+ let val = str->Js.Float.fromString
+ val->Js.Float.isNaN ? default : val
+}
+
+let getFloatFromJson = (json, default) => {
+ switch json->Js.Json.classify {
+ | JSONString(str) => getFloatFromString(str, default)
+ | JSONNumber(floatValue) => floatValue
+ | _ => default
+ }
+}
+
+let getFloat = (dict, key, default) => {
+ dict
+ ->Js.Dict.get(key)
+ ->Belt.Option.map(json => getFloatFromJson(json, default))
+ ->Belt.Option.getWithDefault(default)
+}
+
let getJsonBoolValue = (dict, key, default) => {
dict->Js.Dict.get(key)->Belt.Option.getWithDefault(default->Js.Json.boolean)
}
@@ -86,6 +106,14 @@ let getDecodedStringFromJson = (json, callbackFunc, defaultValue) => {
->Belt.Option.getWithDefault(defaultValue)
}
+let getDecodedBoolFromJson = (json, callbackFunc, defaultValue) => {
+ json
+ ->Js.Json.decodeObject
+ ->Belt.Option.flatMap(callbackFunc)
+ ->Belt.Option.flatMap(Js.Json.decodeBoolean)
+ ->Belt.Option.getWithDefault(defaultValue)
+}
+
let getRequiredString = (dict, key, default, ~logger) => {
let optionalStr = getOptionString(dict, key)
switch optionalStr {
@@ -130,6 +158,10 @@ let getDictFromJson = (json: Js.Json.t) => {
json->Js.Json.decodeObject->Belt.Option.getWithDefault(Js.Dict.empty())
}
+let getDictfromDict = (dict, key) => {
+ dict->getJsonObjectFromDict(key)->getDictFromJson
+}
+
let getBool = (dict, key, default) => {
getOptionBool(dict, key)->Belt.Option.getWithDefault(default)
}
@@ -858,3 +890,9 @@ let isOtherElements = componentType => {
}
let nbsp = `\u00A0`
+
+let callbackFuncForExtractingValFromDict = key => {
+ x => x->Js.Dict.get(key)
+}
+
+let brandIconSize = 28
diff --git a/src/orca-loader/Elements.res b/src/orca-loader/Elements.res
index 6ccb392e5..75eff009e 100644
--- a/src/orca-loader/Elements.res
+++ b/src/orca-loader/Elements.res
@@ -218,9 +218,8 @@ let make = (
let mountPostMessage = (
mountedIframeRef,
selectorString,
- sdkHandleConfirmPayment,
sdkHandleOneClickConfirmPayment,
- disableSaveCards,
+ displaySavedPaymentMethods,
) => {
open Promise
@@ -245,7 +244,6 @@ let make = (
("publishableKey", publishableKey->Js.Json.string),
("endpoint", endpoint->Js.Json.string),
("sdkSessionId", sdkSessionId->Js.Json.string),
- ("sdkHandleConfirmPayment", sdkHandleConfirmPayment->Js.Json.boolean),
("blockConfirm", blockConfirm->Js.Json.boolean),
("switchToCustomPod", switchToCustomPod->Js.Json.boolean),
("endpoint", endpoint->Js.Json.string),
@@ -714,7 +712,9 @@ let make = (
})
->ignore
fetchPaymentsList(mountedIframeRef)
- disableSaveCards ? () : fetchCustomerDetails(mountedIframeRef)
+ if displaySavedPaymentMethods {
+ fetchCustomerDetails(mountedIframeRef)
+ }
mountedIframeRef->Window.iframePostMessage(message)
}
diff --git a/src/orca-loader/Hyper.res b/src/orca-loader/Hyper.res
index 73d1802be..dc17c35e4 100644
--- a/src/orca-loader/Hyper.res
+++ b/src/orca-loader/Hyper.res
@@ -339,6 +339,17 @@ let make = (publishableKey, options: option, analyticsInfo: option {
+ let json = event.data->eventToJson
+ let dict = json->getDictFromJson
+ switch dict->Js.Dict.get("handleSdkConfirm") {
+ | Some(payload) => confirmPayment(payload)->ignore
+ | None => ()
+ }
+ }
+
+ addSmartEventListener("message", handleSdkConfirm, "handleSdkConfirm")
+
let elements = elementsOptions => {
open Promise
let clientSecretId =
diff --git a/src/orca-loader/LoaderPaymentElement.res b/src/orca-loader/LoaderPaymentElement.res
index a2b1133cb..b618f27fc 100644
--- a/src/orca-loader/LoaderPaymentElement.res
+++ b/src/orca-loader/LoaderPaymentElement.res
@@ -16,26 +16,17 @@ let make = (componentType, options, setIframeRef, iframeRef, mountPostMessage) =
setIframeRef(ref)
}
- let sdkHandleConfirmPayment =
- options
- ->Js.Json.decodeObject
- ->Belt.Option.flatMap(x => x->Js.Dict.get("sdkHandleConfirmPayment"))
- ->Belt.Option.flatMap(Js.Json.decodeBoolean)
- ->Belt.Option.getWithDefault(false)
-
let sdkHandleOneClickConfirmPayment =
- options
- ->Js.Json.decodeObject
- ->Belt.Option.flatMap(x => x->Js.Dict.get("sdkHandleOneClickConfirmPayment"))
- ->Belt.Option.flatMap(Js.Json.decodeBoolean)
- ->Belt.Option.getWithDefault(true)
+ options->getDecodedBoolFromJson(
+ callbackFuncForExtractingValFromDict("sdkHandleOneClickConfirmPayment"),
+ true,
+ )
- let disableSaveCards =
- options
- ->Js.Json.decodeObject
- ->Belt.Option.flatMap(x => x->Js.Dict.get("disableSaveCards"))
- ->Belt.Option.flatMap(Js.Json.decodeBoolean)
- ->Belt.Option.getWithDefault(false)
+ let displaySavedPaymentMethods =
+ options->getDecodedBoolFromJson(
+ callbackFuncForExtractingValFromDict("displaySavedPaymentMethods"),
+ true,
+ )
let on = (eventType, eventHandler) => {
switch eventType->eventTypeMapper {
@@ -170,7 +161,8 @@ let make = (componentType, options, setIframeRef, iframeRef, mountPostMessage) =
eventDataObject
->getOptionalJsonFromJson("iframeId")
->getStringfromOptionaljson("no-element")
- iframeHeightRef := iframeHeight->getFloatfromjson(200.0)
+ iframeHeightRef :=
+ iframeHeight->Option.getOr(JSON.Encode.null)->Utils.getFloatFromJson(200.0)
if iframeId === localSelectorString {
let elem = Window.querySelector(
`#orca-payment-element-iframeRef-${localSelectorString}`,
@@ -303,9 +295,8 @@ let make = (componentType, options, setIframeRef, iframeRef, mountPostMessage) =
mountPostMessage(
Window.querySelector(`#orca-payment-element-iframeRef-${localSelectorString}`),
localSelectorString,
- sdkHandleConfirmPayment,
sdkHandleOneClickConfirmPayment,
- disableSaveCards,
+ displaySavedPaymentMethods,
)
}
}
diff --git a/src/orca-loader/OrcaUtils.res b/src/orca-loader/OrcaUtils.res
index bbe4aa1c4..d0aba433a 100644
--- a/src/orca-loader/OrcaUtils.res
+++ b/src/orca-loader/OrcaUtils.res
@@ -294,10 +294,6 @@ let getBoolfromjson = (json: option, default: bool) => {
json->Belt.Option.flatMap(Js.Json.decodeBoolean)->Belt.Option.getWithDefault(default)
}
-let getFloatfromjson = (json: option, default: float) => {
- json->Belt.Option.flatMap(Js.Json.decodeNumber)->Belt.Option.getWithDefault(default)
-}
-
let getStringfromjson = (json: Js.Json.t, default: string) => {
json->Js.Json.decodeString->Belt.Option.getWithDefault(default)
}
diff --git a/webpack.common.js b/webpack.common.js
index c82870387..c6602f654 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -9,16 +9,17 @@ const BundleAnalyzerPlugin =
require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const { sentryWebpackPlugin } = require("@sentry/webpack-plugin");
+const sdkEnv = process.env.sdkEnv;
+const envSdkUrl = process.env.envSdkUrl;
+const envBackendUrl = process.env.envBackendUrl;
+
//git rev-parse --abbrev-ref HEAD
let repoVersion = require("./package.json").version;
let majorVersion = "v" + repoVersion.split(".")[0];
let repoName = require("./package.json").name;
-let repoPublicPath = `/${repoVersion}/${majorVersion}`;
-
-const sdkEnv = process.env.sdkEnv;
-const envSdkUrl = process.env.envSdkUrl;
-const envBackendUrl = process.env.envBackendUrl;
+let repoPublicPath =
+ sdkEnv === "local" ? "" : `/${repoVersion}/${majorVersion}`;
let sdkUrl;
Hyperswicth
- Playground App
+