Merge branch 'main' into crypto-currency-network

CHANGELOG.md

@@ -1,3 +1,19 @@
+## [0.61.1](https://github.com/juspay/hyperswitch-web/compare/v0.61.0...v0.61.1) (2024-06-07)
+
+# [0.61.0](https://github.com/juspay/hyperswitch-web/compare/v0.60.0...v0.61.0) (2024-06-07)
+
+
+### Features
+
+* self serve url in env ([#425](https://github.com/juspay/hyperswitch-web/issues/425)) ([107e914](https://github.com/juspay/hyperswitch-web/commit/107e914865a0b6a677663746689c6452287fae19))
+
+# [0.60.0](https://github.com/juspay/hyperswitch-web/compare/v0.59.2...v0.60.0) (2024-06-05)
+
+
+### Features
+
+* added Klarna as a one click widget ([#420](https://github.com/juspay/hyperswitch-web/issues/420)) ([bdd0fa3](https://github.com/juspay/hyperswitch-web/commit/bdd0fa3ffd5b4e0018109541323981c945a1ed4a))
+
 ## [0.59.2](https://github.com/juspay/hyperswitch-web/compare/v0.59.1...v0.59.2) (2024-06-04)
 
 

Hyperswitch-React-Demo-App/.env

@@ -3,4 +3,5 @@ HYPERSWITCH_PUBLISHABLE_KEY=
 HYPERSWITCH_SECRET_KEY=
 HYPERSWITCH_SERVER_URL=
 HYPERSWITCH_CLIENT_URL=
+SELF_SERVER_URL=
 

Hyperswitch-React-Demo-App/src/Payment.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 import { useEffect, useState } from "react";
 import React from "react";
 import { HyperElements } from "@juspay-tech/react-hyper-js";
@@ -8,10 +9,11 @@ function Payment() {
   const [clientSecret, setClientSecret] = useState("");
 
   useEffect(() => {
+    let url = SELF_SERVER_URL === "" ? ENDPOINT : SELF_SERVER_URL;
     Promise.all([
-      fetch(`${endPoint}/config`),
-      fetch(`${endPoint}/urls`),
-      fetch(`${endPoint}/create-payment-intent`),
+      fetch(`${url}/config`),
+      fetch(`${url}/urls`),
+      fetch(`${url}/create-payment-intent`),
     ])
       .then((responses) => {
         return Promise.all(responses.map((response) => response.json()));

Hyperswitch-React-Demo-App/webpack.common.js

@@ -4,14 +4,14 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const CopyPlugin = require("copy-webpack-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const TerserPlugin = require("terser-webpack-plugin");
-const BundleAnalyzerPlugin =
-  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
+const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
 require("dotenv").config({ path: "./.env" });
 
 module.exports = (endpoint, publicPath = "auto") => {
-  let entries = {
+  const entries = {
     app: "./src/index.js",
   };
+
   return {
     mode: "development",
     devtool: "source-map",
@@ -37,21 +37,17 @@ module.exports = (endpoint, publicPath = "auto") => {
       new CopyPlugin({
         patterns: [
           { from: "public" },
-          {
-            from: path.resolve(__dirname, "server.js"),
-          },
+          { from: path.resolve(__dirname, "server.js") },
         ],
       }),
       new HtmlWebpackPlugin({
         inject: false,
         template: "./public/playgroundIndex.html",
       }),
       new webpack.DefinePlugin({
-        endPoint:
-          typeof endpoint === "string"
-            ? JSON.stringify(endpoint)
-            : JSON.stringify(process.env.SELF_SERVER_URL),
+        ENDPOINT: JSON.stringify(endpoint),
         SCRIPT_SRC: JSON.stringify(process.env.HYPERSWITCH_CLIENT_URL),
+        SELF_SERVER_URL: JSON.stringify(process.env.SELF_SERVER_URL ?? ""),
       }),
       new BundleAnalyzerPlugin({
         analyzerMode: "static",

Hyperswitch-React-Demo-App/webpack.dev.js

@@ -2,7 +2,7 @@ const path = require("path");
 const { merge } = require("webpack-merge");
 const common = require("./webpack.common.js");
 
-let devServer = {
+const devServer = {
   contentBase: path.join(__dirname, "dist"),
   hot: true,
   port: 9060,
@@ -20,10 +20,7 @@ let devServer = {
   },
 };
 
-module.exports = merge([
-  common("/payments"),
-  {
-    mode: "development",
-    devServer: devServer,
-  },
-]);
+module.exports = merge(common("/payments"), {
+  mode: "development",
+  devServer,
+});

README.md

@@ -95,6 +95,8 @@ Before you start the local setup, you will need an understanding of few keys -
 
 - **`HYPERSWITCH_CLIENT_URL`:** The URL of your hosted Hyperswitch SDK. You can also use our Sandbox URL (https://beta.hyperswitch.io/v1) or specify your app running locally (e.g., http://localhost:9050).
 
+- **`SELF_SERVER_URL`:** The URL of the hosted server file for generating client-secret and for fetching urls & configs. (eg: http://localhost:9060/payments)
+
 ### About Env Configs for SDK
 
 - **`ENV_BACKEND_URL`:** Sets the endpoint for all the APIs used within the SDK to interact with the backend service. If you are running your own backend service, you can configure and specify its endpoint here for local setups.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "orca-payment-page",
-  "version": "0.59.2",
+  "version": "0.61.1",
   "main": "index.js",
   "private": true,
   "dependencies": {

src/CardUtils.res

@@ -361,6 +361,7 @@ let getCardBrandIcon = (cardType, paymentType) => {
     | GooglePayElement
     | PayPalElement
     | ApplePayElement
+    | KlarnaElement
     | ExpressCheckoutElement
     | NONE =>
       <Icon size=brandIconSize name="default-card" />

src/Components/SurchargeUtils.res

@@ -6,6 +6,7 @@ let oneClickWallets = [
   {paymentMethodType: "apple_pay", displayName: "ApplePay"},
   {paymentMethodType: "paypal", displayName: "Paypal"},
   {paymentMethodType: "google_pay", displayName: "GooglePay"},
+  {paymentMethodType: "klarna", displayName: "Klarna"},
 ]
 
 type walletSurchargeDetails = {
@@ -20,17 +21,18 @@ let useSurchargeDetailsForOneClickWallets = (~paymentMethodListValue) => {
 
   React.useMemo(() => {
     oneClickWallets->Array.reduce([], (acc, wallet) => {
-      let isWalletBtnRendered = switch wallet.paymentMethodType {
-      | "apple_pay" => areOneClickWalletsRendered.isApplePay
-      | "paypal" => areOneClickWalletsRendered.isPaypal
-      | "google_pay" => areOneClickWalletsRendered.isGooglePay
-      | _ => false
+      let (isWalletBtnRendered, paymentMethod) = switch wallet.paymentMethodType {
+      | "apple_pay" => (areOneClickWalletsRendered.isApplePay, "wallet")
+      | "paypal" => (areOneClickWalletsRendered.isPaypal, "wallet")
+      | "google_pay" => (areOneClickWalletsRendered.isGooglePay, "wallet")
+      | "klarna" => (areOneClickWalletsRendered.isKlarna, "pay_later")
+      | _ => (false, "")
       }
       if isWalletBtnRendered {
         let paymentMethodType =
           PaymentMethodsRecord.getPaymentMethodTypeFromList(
             ~paymentMethodListValue,
-            ~paymentMethod="wallet",
+            ~paymentMethod,
             ~paymentMethodType=wallet.paymentMethodType,
           )->Option.getOr(PaymentMethodsRecord.defaultPaymentMethodType)
         switch paymentMethodType.surcharge_details {

src/LoaderController.res

@@ -82,6 +82,7 @@ let make = (~children, ~paymentMode, ~setIntegrateErrorError, ~logger, ~initTime
     | GooglePayElement
     | PayPalElement
     | ApplePayElement
+    | KlarnaElement
     | ExpressCheckoutElement
     | Payment => {
         let paymentOptions = PaymentType.itemToObjMapper(optionsDict, logger)

src/PaymentElement.res

@@ -42,6 +42,8 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
     setLoadSavedCards: (savedCardsLoadState => savedCardsLoadState) => unit,
   ) = React.useState(_ => LoadingSavedCards)
 
+  let isKlarnaRedirectFlow = PaymentUtils.getIsKlarnaRedirectFlow(sessions)
+
   React.useEffect(() => {
     switch (displaySavedPaymentMethods, customerPaymentMethods) {
     | (false, _) => {
@@ -106,6 +108,7 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
   let (walletList, paymentOptionsList, actualList) = PaymentUtils.useGetPaymentMethodList(
     ~paymentOptions,
     ~paymentType,
+    ~sessions,
   )
 
   React.useEffect(() => {
@@ -225,9 +228,6 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
   let checkRenderOrComp = () => {
     walletOptions->Array.includes("paypal") || isShowOrPayUsing
   }
-  let dict = sessions->getDictFromJson
-  let sessionObj = SessionsType.itemToObjMapper(dict, Others)
-  let klarnaTokenObj = SessionsType.getPaymentSessionObj(sessionObj.sessionsToken, Klarna)
 
   let loader = () => {
     handlePostMessageEvents(
@@ -243,25 +243,11 @@ let make = (~cardProps, ~expiryProps, ~cvcProps, ~paymentType: CardThemeType.mod
       {switch selectedOption->PaymentModeType.paymentMode {
       | Card => <CardPayment cardProps expiryProps cvcProps paymentType />
       | Klarna =>
-        <SessionPaymentWrapper type_=Others>
-          {switch klarnaTokenObj {
-          | OtherTokenOptional(optToken) =>
-            switch optToken {
-            | Some(token) =>
-              <React.Suspense fallback={loader()}>
-                <KlarnaSDKLazy sessionObj=token />
-              </React.Suspense>
-            | None =>
-              <React.Suspense fallback={loader()}>
-                <KlarnaPaymentLazy paymentType />
-              </React.Suspense>
-            }
-          | _ =>
-            <React.Suspense fallback={loader()}>
-              <KlarnaPaymentLazy paymentType />
-            </React.Suspense>
-          }}
-        </SessionPaymentWrapper>
+        <RenderIf condition={isKlarnaRedirectFlow}>
+          <React.Suspense fallback={loader()}>
+            <KlarnaPaymentLazy paymentType />
+          </React.Suspense>
+        </RenderIf>
       | ACHTransfer =>
         <React.Suspense fallback={loader()}>
           <ACHBankTransferLazy paymentType />

src/Payments/ApplePay.res

@@ -346,9 +346,9 @@ let make = (~sessionObj: option<JSON.t>) => {
     None
   }, (isApplePayReady, isInvokeSDKFlow, paymentExperience))
 
-  <div>
-    <style> {React.string(css)} </style>
-    <RenderIf condition={showApplePay}>
+  <RenderIf condition={showApplePay}>
+    <div>
+      <style> {React.string(css)} </style>
       {if showApplePayLoader {
         <div className="apple-pay-loader-div">
           <div className="apple-pay-loader" />
@@ -362,8 +362,8 @@ let make = (~sessionObj: option<JSON.t>) => {
           <span className="logo" />
         </button>
       }}
-    </RenderIf>
-  </div>
+    </div>
+  </RenderIf>
 }
 
 let default = make

src/Payments/GPay.res

@@ -144,7 +144,7 @@ let make = (~sessionObj: option<SessionsType.token>, ~thirdPartySessionObj: opti
   }, (paymentMethodTypes, stateJson))
 
   let (_, buttonType, _) = options.wallets.style.type_
-  let (_, heightType, _) = options.wallets.style.height
+  let (_, heightType, _, _) = options.wallets.style.height
   let height = switch heightType {
   | GooglePay(val) => val
   | _ => 48