Merge pull request #578 from commercelayer/fix/apple-pay

Apple Pay Payment Processing Issue

lerna.json

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

packages/react-components/README.md

@@ -8,7 +8,7 @@ A collection of reusable React components that makes it super fast and simple to
 
 # Getting started
 
-For a constantly updated list of the available and soon-to-come micro frontends provided by Commerce Layer's react componente, please refer to [this interactive documentation](https://commercelayer.github.io/commercelayer-react-components/?path=/docs/getting-started-introdution--docs) that will provide you with all the necessary information about the involved web components and help you get started in a snap.
+For a constantly updated list of the available and soon-to-come micro frontends provided by Commerce Layer's react componente, please refer to [this interactive documentation](https://commercelayer.github.io/commercelayer-react-components) that will provide you with all the necessary information about the involved web components and help you get started in a snap.
 
 ## Installation
 

packages/react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercelayer/react-components",
-  "version": "4.15.9",
+  "version": "4.15.10-beta.0",
   "description": "The Official Commerce Layer React Components",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",
@@ -224,4 +224,4 @@
   "peerDependencies": {
     "react": ">=18.0.0"
   }
-}
+}

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

@@ -363,8 +363,10 @@ export function AdyenPayment({
         'Payment methods are not available. Please, check your Adyen configuration.'
       )
     }
-    // @ts-expect-error no type
-    const showStoredPaymentMethods = paymentSource?.payment_methods?.storedPaymentMethods != null ?? false
+    const showStoredPaymentMethods =
+      // @ts-expect-error no type
+      paymentSource?.payment_methods?.storedPaymentMethods != null ?? false
+
     const options = {
       locale: order?.language_code ?? locale,
       environment,
@@ -410,6 +412,7 @@ export function AdyenPayment({
           const component = adyenCheckout
             .create(type, {
               showRemovePaymentMethodButton: showStoredPaymentMethods,
+              instantPaymentTypes: ['applepay', 'googlepay'],
               onSelect: (component) => {
                 const id: string = component._id
                 if (id.search('scheme') === -1) {

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

@@ -28,6 +28,10 @@ export interface BraintreeConfig {
   inputWrapperClassName?: string
   fields?: BraintreeHostedFields<HostedFieldFieldOptions>
   styles?: Record<string, Record<string, string>>
+  /**
+   * Force challenge request for 3D Secure authentication. Default is true.
+   */
+  challengeRequested?: boolean
 }
 
 interface Props {
@@ -218,7 +222,10 @@ export function BraintreePayment({
       const hostedFields = require('braintree-web/hosted-fields')
       const threeDSecure = require('braintree-web/three-d-secure')
       braintreeClient.create(
-        { authorization },
+        {
+          authorization,
+          challengeRequested: config?.challengeRequested ?? true
+        },
         (clientErr: any, clientInstance: any) => {
           if (clientErr) {
             console.error(clientErr)