Read org configuration for buy now mode

lerna.json

@@ -2,7 +2,7 @@
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
   "useNx": false,
   "npmClient": "pnpm",
-  "version": "4.15.6",
+  "version": "4.15.7-beta.1",
   "command": {
     "version": {
       "preid": "beta"

packages/react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercelayer/react-components",
-  "version": "4.15.6",
+  "version": "4.15.7-beta.1",
   "description": "The Official Commerce Layer React Components",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",
@@ -179,48 +179,48 @@
   "homepage": "https://github.com/commercelayer/commercelayer-react-components#readme",
   "dependencies": {
     "@adyen/adyen-web": "^5.66.1",
-    "@commercelayer/organization-config": "^1.4.6",
-    "@commercelayer/sdk": "6.9.0",
-    "@stripe/react-stripe-js": "^2.7.1",
-    "@stripe/stripe-js": "^4.0.0",
+    "@commercelayer/organization-config": "^1.4.8",
+    "@commercelayer/sdk": "6.11.0",
+    "@stripe/react-stripe-js": "^2.7.3",
+    "@stripe/stripe-js": "^4.1.0",
     "@tanstack/react-table": "^8.17.3",
     "@types/iframe-resizer": "^3.5.13",
-    "axios": "^1.7.2",
-    "braintree-web": "^3.102.0",
-    "frames-react": "^1.1.1",
-    "iframe-resizer": "^4.4.2",
+    "axios": "^1.7.3",
+    "braintree-web": "^3.105.0",
+    "frames-react": "^1.1.2",
+    "iframe-resizer": "^4.4.5",
     "jwt-decode": "^4.0.0",
     "lodash": "^4.17.21",
     "rapid-form": "^2.1.0"
   },
   "devDependencies": {
-    "@commercelayer/js-auth": "^6.2.2",
+    "@commercelayer/js-auth": "^6.3.1",
     "@faker-js/faker": "^8.4.0",
-    "@playwright/test": "^1.44.1",
-    "@testing-library/dom": "^10.1.0",
+    "@playwright/test": "^1.45.3",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.0.0",
-    "@types/braintree-web": "^3.96.10",
-    "@types/lodash": "^4.17.5",
-    "@types/node": "^20.14.6",
+    "@types/braintree-web": "^3.96.12",
+    "@types/lodash": "^4.17.7",
+    "@types/node": "^22.1.0",
     "@types/prop-types": "^15.7.12",
     "@types/react": "^18.3.3",
     "@types/react-test-renderer": "^18.0.7",
     "@types/react-window": "^1.8.8",
     "@vitejs/plugin-react": "^4.3.1",
-    "@vitest/coverage-v8": "^1.6.0",
-    "eslint": "~9.5.0",
-    "jsdom": "^24.1.0",
+    "@vitest/coverage-v8": "^2.0.5",
+    "eslint": "~9.8.0",
+    "jsdom": "^24.1.1",
     "minimize-js": "^1.4.0",
-    "msw": "^2.3.1",
+    "msw": "^2.3.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
     "tsc-alias": "^1.8.8",
     "tslib": "^2.6.3",
-    "typescript": "^5.4.4",
-    "vite": "^5.3.1",
+    "typescript": "^5.5.4",
+    "vite": "^5.3.5",
     "vite-tsconfig-paths": "^4.3.2",
-    "vitest": "^1.4.0"
+    "vitest": "^2.0.5"
   },
   "peerDependencies": {
     "react": ">=18.0.0"

packages/react-components/src/components/orders/AddToCartButton.tsx

@@ -16,47 +16,48 @@ import CommerceLayerContext from '#context/CommerceLayerContext'
 import useCustomContext from '#utils/hooks/useCustomContext'
 import { getDomain } from '#utils/getDomain'
 import { publish } from '#utils/events'
+import { getOrganizationConfig } from '#utils/organization'
 
 interface TAddToCartButton extends Omit<Props, 'children'> {
   handleClick: () => AddToCartReturn
 }
 
 type BuyNowMode =
   | {
-      /**
-       * Once item has been added, it redirects to the hosted checkout micro-frontend.
-       */
-      buyNowMode: true
-      /**
-       * If you have a self-hosted checkout, you can pass the url to redirect to it.
-       */
-      checkoutUrl?: string
-    }
+    /**
+     * Once item has been added, it redirects to the hosted checkout micro-frontend.
+     */
+    buyNowMode: true
+    /**
+     * If you have a self-hosted checkout, you can pass the url to redirect to it.
+     */
+    checkoutUrl?: string
+  }
   | {
-      buyNowMode?: false
-      checkoutUrl?: never
-    }
+    buyNowMode?: false
+    checkoutUrl?: never
+  }
 
 type THostedCart =
   | {
-      /**
-       * Once item has been added, it redirects to the hosted cart micro-frontend.
-       */
-      redirectToHostedCart: true
-      /**
-       * If you have a self-hosted cart, you can pass the url to redirect to it.
-       */
-      hostedCartUrl?: string
-      /**
-       * If you have a self-hosted cart, you can pass the protocol to redirect to it.
-       */
-      protocol?: 'http' | 'https'
-    }
+    /**
+     * Once item has been added, it redirects to the hosted cart micro-frontend.
+     */
+    redirectToHostedCart: true
+    /**
+     * If you have a self-hosted cart, you can pass the url to redirect to it.
+     */
+    hostedCartUrl?: string
+    /**
+     * If you have a self-hosted cart, you can pass the protocol to redirect to it.
+     */
+    protocol?: 'http' | 'https'
+  }
   | {
-      redirectToHostedCart?: false
-      hostedCartUrl?: never
-      protocol?: never
-    }
+    redirectToHostedCart?: false
+    hostedCartUrl?: never
+    protocol?: never
+  }
 
 type TButton = PropsWithoutRef<
   Omit<JSX.IntrinsicElements['button'], 'children'>
@@ -155,9 +156,9 @@ export function AddToCartButton(props: Props): JSX.Element {
   const sCode = sku?.code ?? skuCode
   const handleClick = async (): Promise<
     | {
-        success: boolean
-        orderId?: string
-      }
+      success: boolean
+      orderId?: string
+    }
     | Record<string, any>
     | undefined
   > => {
@@ -212,7 +213,15 @@ export function AddToCartButton(props: Props): JSX.Element {
         if (hostedCartUrl && orderId) {
           location.href = `${protocol}://${hostedCartUrl}/${orderId}?accessToken=${accessToken}`
         } else if (orderId && slug) {
-          location.href = getApplicationLink({
+          const config = await getOrganizationConfig({
+            accessToken,
+            endpoint,
+            params: {
+              orderId,
+              accessToken
+            }
+          })
+          location.href = config?.links?.cart ?? getApplicationLink({
             orderId,
             slug,
             accessToken,

packages/react-components/src/components/orders/PlaceOrderButton.tsx

@@ -87,7 +87,6 @@ export function PlaceOrderButton(props: Props): JSX.Element {
       if (paymentType === currentPaymentMethodType && paymentType) {
         const card = getCardDetails({
           customerPayment: {
-            // @ts-expect-error missing type
             payment_source: paymentSource
           },
           paymentType
@@ -261,7 +260,6 @@ export function PlaceOrderButton(props: Props): JSX.Element {
       paymentType &&
       getCardDetails({
         paymentType,
-        // @ts-expect-error missing type
         customerPayment: { payment_source: checkPaymentSource }
       })
     if (

packages/react-components/src/components/payment_gateways/AdyenGateway.tsx

@@ -59,7 +59,6 @@ export function AdyenGateway(props: Props): JSX.Element | null {
   if (readonly || showCard) {
     const card = getCardDetails({
       customerPayment: {
-        // @ts-expect-error missing type
         payment_source: paymentSource
       },
       paymentType: paymentResource

packages/react-components/src/components/payment_gateways/BraintreeGateway.tsx

@@ -53,7 +53,6 @@ export function BraintreeGateway(props: Props): JSX.Element | null {
   if (readonly || showCard) {
     const card = getCardDetails({
       customerPayment: {
-        // @ts-expect-error missing type
         payment_source: paymentSource
       },
       paymentType: paymentResource

packages/react-components/src/components/payment_gateways/CheckoutComGateway.tsx

@@ -53,7 +53,6 @@ export function CheckoutComGateway(props: Props): JSX.Element | null {
   if (readonly || showCard) {
     const card = getCardDetails({
       customerPayment: {
-        // @ts-expect-error missing type
         payment_source: paymentSource
       },
       paymentType: paymentResource

packages/react-components/src/components/payment_gateways/ExternalGateway.tsx

@@ -55,7 +55,6 @@ export function ExternalGateway(props: Props): JSX.Element | null {
   if (readonly || showCard) {
     const card = getCardDetails({
       customerPayment: {
-        // @ts-expect-error missing type
         payment_source: paymentSource
       },
       paymentType: paymentResource

packages/react-components/src/components/payment_gateways/KlarnaGateway.tsx

@@ -51,7 +51,6 @@ export function KlarnaGateway(props: Props): JSX.Element | null {
   if (readonly || showCard) {
     const card = getCardDetails({
       customerPayment: {
-        // @ts-expect-error missing type
         payment_source: paymentSource
       },
       paymentType: paymentResource

packages/react-components/src/components/payment_gateways/PaypalGateway.tsx

@@ -24,7 +24,6 @@ export function PaypalGateway(props: Props): JSX.Element | null {
   if (readonly) {
     const card = getCardDetails({
       customerPayment: {
-        // @ts-expect-error missing type
         payment_source: order?.payment_source || paymentSource
       },
       paymentType: paymentResource

packages/react-components/src/components/payment_gateways/StripeGateway.tsx

@@ -55,7 +55,6 @@ export function StripeGateway(props: Props): JSX.Element | null {
   if (readonly || showCard) {
     const card = getCardDetails({
       customerPayment: {
-        // @ts-expect-error missing type
         payment_source: paymentSource
       },
       paymentType: paymentResource

packages/react-components/src/components/payment_gateways/WireTransferGateway.tsx

@@ -26,7 +26,6 @@ export function WireTransferGateway(props: Props): JSX.Element | null {
   if (readonly) {
     const card = getCardDetails({
       customerPayment: {
-        // @ts-expect-error no type
         payment_source: order?.payment_source || paymentSource
       },
       paymentType: paymentResource

packages/react-components/src/components/payment_source/AdyenPayment.tsx

@@ -62,6 +62,7 @@ export interface AdyenPaymentConfig {
   threeDSecureContainerClassName?: string
   placeOrderCallback?: (response: { placed: boolean }) => void
   styles?: PaymentMethodsStyle
+  paymentMethodsConfiguration?: CoreOptions['paymentMethodsConfiguration']
 }
 
 interface Props {
@@ -379,13 +380,16 @@ export function AdyenPayment({
         showStoredPaymentMethods,
         paypal: {
           showPayButton: true,
-          style: styles?.paypal
+          style: styles?.paypal,
+          ...config?.paymentMethodsConfiguration?.paypal
         },
         card: {
           enableStoreDetails: showStoredPaymentMethods,
           styles: styles?.card,
-          holderNameRequired: false
-        }
+          holderNameRequired: false,
+          ...config?.paymentMethodsConfiguration?.card
+        },
+        ...config?.paymentMethodsConfiguration
       },
       onAdditionalDetails: (state, element) => {
         void handleOnAdditionalDetails(state, element)

packages/react-components/src/components/payment_source/CheckoutComPayment.tsx

@@ -37,7 +37,7 @@ const systemLanguages: FramesLanguages[] = [
   'ES-ES',
   'FR-FR',
   'IT-IT',
-  'KR-KR',
+  'KO-KR',
   'NL-NL'
 ]
 

packages/react-components/src/components/payment_source/PaymentSource.tsx

@@ -59,7 +59,6 @@ export function PaymentSource(props: PaymentSourceProps): JSX.Element {
       const card = getCardDetails({
         paymentType: payment?.payment_source_type as PaymentResource,
         customerPayment: {
-          // @ts-expect-error missing type
           payment_source: paymentSource
         }
       })

packages/react-components/src/reducers/OrderReducer.ts

@@ -20,9 +20,11 @@ import type {
   OrderUpdate,
   QueryParamsRetrieve
 } from '@commercelayer/sdk'
-import { getOrganizationSlug } from '#utils/organization'
+import { getOrganizationConfig } from '#utils/organization'
 import { type LooseAutocomplete } from '#typings/globals'
 import { publish } from '#utils/events'
+import { getDomain } from '#utils/getDomain'
+import { getApplicationLink } from '#utils/getApplicationLink'
 
 export type GetOrderParams = Partial<{
   clearWhenPlaced: boolean
@@ -493,12 +495,27 @@ export async function addToCart(
             }
           })
         }
-        if (buyNowMode) {
-          const { organization } = getOrganizationSlug(config.endpoint ?? '')
+        if (buyNowMode && id && config?.accessToken != null && config?.endpoint != null) {
           const params = `${id}?accessToken=${config.accessToken ?? ''}`
+          const { domain, slug } = getDomain(config.endpoint)
+          const href = getApplicationLink({
+            slug,
+            orderId: id,
+            accessToken: config.accessToken,
+            applicationType: 'checkout',
+            domain
+          })
+          const organizationConfig = await getOrganizationConfig({
+            accessToken: config.accessToken,
+            endpoint: config.endpoint,
+            params: {
+              accessToken: config.accessToken,
+              orderId: order?.id
+            }
+          })
           const redirectUrl = checkoutUrl
             ? `${checkoutUrl}/${params}`
-            : `https://${organization}.commercelayer.app/checkout/${params}`
+            : organizationConfig?.links?.checkout ?? href
           location.href = redirectUrl
         } else if (openMiniCart) {
           publish('open-cart')

packages/react-components/src/utils/getCardDetails.ts

@@ -15,7 +15,7 @@ interface CardDetails {
 
 interface Args {
   paymentType: PaymentResource
-  customerPayment: CustomerPaymentSource
+  customerPayment: Partial<CustomerPaymentSource>
 }
 
 export default function getCardDetails({