feat: amazonPay

Author: Abhishek Chorotiya

src/Payments/AmazonPay/AmazonPay.res

@@ -8,12 +8,14 @@ let make = (~amazonPayToken) => {
 
   let {iframeId} = Recoil.useRecoilValueFromAtom(RecoilAtoms.keys)
 
-  let handleFullscreenClick = () => {
+  let showFullScreenLoader = () => {
     Utils.messageParentWindow([
       ("fullscreen", true->JSON.Encode.bool),
       ("param", "paymentloader"->JSON.Encode.string),
       ("iframeId", iframeId->JSON.Encode.string),
     ])
   }
-  <div onClick={_ => handleFullscreenClick()} id="AmazonPayButton" />
+  <div onClick={_ => showFullScreenLoader()} id="AmazonPayButton" />
 }
+
+let default = make

src/Payments/AmazonPay/AmazonPayHelpers.res

@@ -6,62 +6,47 @@ external renderAmazonPayButton: (~buttonId: string, ~config: amazonPayConfigType
 
 let deliveryPriceMapper = dict => {
   {
-    amount: getInt(dict, "amount", 0),
-    displayAmount: getString(dict, "display_amount", ""),
-    currencyCode: getString(dict, "currency_code", ""),
+    amount: dict->getInt("amount", 0),
+    displayAmount: dict->getString("display_amount", ""),
+    currencyCode: dict->getString("currency_code", ""),
   }
 }
 
 let shippingMethodMapper = dict => {
   {
-    shippingMethodName: getString(dict, "shipping_method_name", ""),
-    shippingMethodCode: getString(dict, "shipping_method_code", ""),
+    shippingMethodName: dict->getString("shipping_method_name", ""),
+    shippingMethodCode: dict->getString("shipping_method_code", ""),
   }
 }
 
 let deliveryOptionMapper = dict => {
   let priceData = dict->getDictFromDict("price")->deliveryPriceMapper
   {
-    id: getString(dict, "id", ""),
+    id: dict->getString("id", ""),
     price: {
       amount: priceData.displayAmount,
       currencyCode: priceData.currencyCode,
     },
     shippingMethod: dict->getDictFromDict("shipping_method")->shippingMethodMapper,
-    isDefault: getBool(dict, "is_default", false),
+    isDefault: dict->getBool("is_default", false),
   }
 }
 
 let amazonPayTokenMapper = dict => {
   {
-    walletName: getString(dict, "wallet_name", ""),
-    merchantId: getString(dict, "merchant_id", ""),
-    ledgerCurrency: getString(dict, "ledger_currency", ""),
-    storeId: getString(dict, "store_id", ""),
-    paymentIntent: getString(dict, "payment_intent", ""),
-    totalShippingAmount: getString(dict, "total_shipping_amount", ""),
-    totalTaxAmount: getString(dict, "total_tax_amount", ""),
-    totalBaseAmount: getString(dict, "total_base_amount", ""),
-    deliveryOptions: getArray(dict, "delivery_options")->Array.map(item =>
-      item->getDictFromJson->deliveryOptionMapper
-    ),
+    walletName: dict->getString("wallet_name", ""),
+    merchantId: dict->getString("merchant_id", ""),
+    ledgerCurrency: dict->getString("ledger_currency", ""),
+    storeId: dict->getString("store_id", ""),
+    paymentIntent: dict->getString("payment_intent", ""),
+    totalTaxAmount: dict->getString("total_tax_amount", ""),
+    totalBaseAmount: dict->getString("total_base_amount", ""),
+    deliveryOptions: dict
+    ->getArray("delivery_options")
+    ->Array.map(item => item->getDictFromJson->deliveryOptionMapper),
   }
 }
 
-let mapDeliveryOptionsToConfig = (options: array<deliveryOption>): array<deliveryOption> => {
-  options->Array.map(option => {
-    {
-      id: option.id,
-      price: {
-        amount: option.price.amount,
-        currencyCode: option.price.currencyCode,
-      },
-      shippingMethod: option.shippingMethod,
-      isDefault: option.isDefault,
-    }
-  })
-}
-
 let amazonPayBody = (amazonCheckoutSessionId, shipping) => {
   let wallet = {
     amazon_pay: {

src/Payments/AmazonPay/AmazonPayHooks.res

@@ -15,12 +15,18 @@ let useAmazonPay = token => {
   let getAmazonPayConfig = (sessionToken: amazonPayTokenType): amazonPayConfigType => {
     let baseAmount = sessionToken.totalBaseAmount->Float.fromString->Option.getOr(0.0)
     let taxAmount = sessionToken.totalTaxAmount->Float.fromString->Option.getOr(0.0)
-    let shippingAmount = sessionToken.totalShippingAmount->Float.fromString->Option.getOr(0.0)
+    let defaultShippingAmount =
+      sessionToken.deliveryOptions
+      ->Array.find(option => option.isDefault)
+      ->Option.mapOr("0.0", option => option.price.amount)
+
+    let shippingAmount = defaultShippingAmount->Float.fromString->Option.getOr(0.0)
+
     let totalOrderAmount = (baseAmount +. taxAmount +. shippingAmount)->Float.toString
     let currencyCode = sessionToken.ledgerCurrency
 
     {
-      merchantId: "A3UJN62U20X4GB",
+      merchantId: sessionToken.merchantId,
       ledgerCurrency: sessionToken.ledgerCurrency,
       sandbox: true,
       checkoutLanguage: "en_US",
@@ -32,7 +38,7 @@ let useAmazonPay = token => {
         currencyCode: sessionToken.ledgerCurrency,
       },
       checkoutSessionConfig: {
-        storeId: "amzn1.application-oa2-client.43ee1af277a94b6c8efd9118dd6c156c",
+        storeId: sessionToken.storeId,
         scopes: ["name", "email", "phoneNumber", "billingAddress"],
         paymentDetails: {
           paymentIntent: sessionToken.paymentIntent,
@@ -43,7 +49,7 @@ let useAmazonPay = token => {
         shippingAddressRef.current = event->getShippingAddressFromEvent
 
         {
-          totalShippingAmount: {amount: sessionToken.totalShippingAmount, currencyCode},
+          totalShippingAmount: {amount: defaultShippingAmount, currencyCode},
           totalBaseAmount: {amount: sessionToken.totalBaseAmount, currencyCode},
           totalTaxAmount: {amount: sessionToken.totalTaxAmount, currencyCode},
           totalChargeAmount: {amount: totalOrderAmount, currencyCode},
@@ -55,7 +61,7 @@ let useAmazonPay = token => {
         shippingAddressRef.current = event->getShippingAddressFromEvent
 
         {
-          totalShippingAmount: {amount: sessionToken.totalShippingAmount, currencyCode},
+          totalShippingAmount: {amount: defaultShippingAmount, currencyCode},
           totalBaseAmount: {amount: sessionToken.totalBaseAmount, currencyCode},
           totalTaxAmount: {amount: sessionToken.totalTaxAmount, currencyCode},
           totalChargeAmount: {amount: totalOrderAmount, currencyCode},
@@ -64,10 +70,8 @@ let useAmazonPay = token => {
         }
       },
       onDeliveryOptionSelection: event => {
-        Console.log("Delivery option updated")
-        let deliveryOptions = sessionToken.deliveryOptions
         let selectedOption =
-          deliveryOptions->Array.find(option => option.id === event.deliveryOptions.id)
+          sessionToken.deliveryOptions->Array.find(option => option.id === event.deliveryOptions.id)
         let newShippingAmount = selectedOption->Option.mapOr("0.0", option => option.price.amount)
         let baseAmount = sessionToken.totalBaseAmount->Float.fromString->Option.getOr(0.0)
         let taxAmount = sessionToken.totalTaxAmount->Float.fromString->Option.getOr(0.0)
@@ -83,11 +87,6 @@ let useAmazonPay = token => {
         }
       },
       onCompleteCheckout: event => {
-        Console.log2(
-          "Checkout completed successfully! (This is a demo - no actual payment was processed)",
-          event,
-        )
-
         let amazonCheckoutSessionId =
           event->getDictFromJson->getString("amazonCheckoutSessionId", "")
 
@@ -116,7 +115,7 @@ let useAmazonPay = token => {
   }
 
   let isRenderedOnce = React.useRef(false)
-  let config = getAmazonPayConfig(token)
+  let config = React.useMemo(() => getAmazonPayConfig(token), [token])
 
   React.useEffect3(() => {
     let shouldRender =

src/Payments/AmazonPay/AmazonPayLazy.res

@@ -0,0 +1 @@
+let make = React.lazy_(() => Js.import(AmazonPay.default))

src/Payments/AmazonPay/AmazonPayTypes.res

@@ -27,7 +27,6 @@ type amazonPayTokenType = {
   ledgerCurrency: string,
   storeId: string,
   paymentIntent: string,
-  totalShippingAmount: string,
   totalTaxAmount: string,
   totalBaseAmount: string,
   deliveryOptions: array<deliveryOption>,

src/Payments/PaymentRequestButtonElement.res

@@ -154,7 +154,7 @@ let make = (~sessions, ~walletOptions) => {
               switch amazonPayToken {
               | AmazonPayTokenOptional(optToken) =>
                 switch optToken {
-                | Some(token) => <AmazonPay amazonPayToken={token->Utils.getDictFromJson} />
+                | Some(token) => <AmazonPayLazy amazonPayToken={token->Utils.getDictFromJson} />
                 | None => React.null
                 }
               | _ => React.null