fix: handle reject onPaymentMethodsRequest

Adyen · Dec 6, 2023 · 95519d7 · 95519d7
1 parent 4cf1e54
commit 95519d7
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 22 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -3,6 +3,6 @@
     "bracketSpacing": true,
     "trailingComma": "none",
     "tabWidth": 4,
-    "printWidth": 150,
+    "printWidth": 120,
     "singleQuote": true
 }
diff --git a/packages/lib/src/components/internal/UIElement/UIElement.tsx b/packages/lib/src/components/internal/UIElement/UIElement.tsx
@@ -21,7 +21,10 @@ import {
 import './UIElement.scss';
 import { CheckoutSessionPaymentResponse } from '../../../core/CheckoutSession/types';
 
-export abstract class UIElement<P extends UIElementProps = UIElementProps> extends BaseElement<P> implements IUIElement {
+export abstract class UIElement<P extends UIElementProps = UIElementProps>
+    extends BaseElement<P>
+    implements IUIElement
+{
     protected componentRef: any;
 
     protected resources: Resources;
@@ -290,10 +293,9 @@ export abstract class UIElement<P extends UIElementProps = UIElementProps> exten
     protected handleOrder = (response: PaymentResponseData): void => {
         const { order } = response;
 
-        const updateCorePromise =
-            !this.props.session && this.props.onPaymentMethodsRequest
-                ? this.handleAdvanceFlowPaymentMethodsUpdate(order)
-                : this.core.update({ order });
+        const updateCorePromise = this.core.session
+            ? this.core.update({ order })
+            : this.handleAdvanceFlowPaymentMethodsUpdate(order);
 
         updateCorePromise.then(() => {
             this.props.onOrderUpdated?.({ order });
@@ -369,7 +371,9 @@ export abstract class UIElement<P extends UIElementProps = UIElementProps> exten
      * Get the element's displayable name
      */
     public get displayName(): string {
-        const paymentMethodFromResponse = this.core.paymentMethodsResponse?.paymentMethods?.find(pm => pm.type === this.type);
+        const paymentMethodFromResponse = this.core.paymentMethodsResponse?.paymentMethods?.find(
+            pm => pm.type === this.type
+        );
         return this.props.name || paymentMethodFromResponse?.name || this.type;
     }
 
@@ -391,27 +395,50 @@ export abstract class UIElement<P extends UIElementProps = UIElementProps> exten
      * Get the payButton component for the current element
      */
     protected payButton = (props: PayButtonFunctionProps) => {
-        return <PayButton {...props} amount={this.props.amount} secondaryAmount={this.props.secondaryAmount} onClick={this.submit} />;
+        return (
+            <PayButton
+                {...props}
+                amount={this.props.amount}
+                secondaryAmount={this.props.secondaryAmount}
+                onClick={this.submit}
+            />
+        );
     };
 
     private async handleAdvanceFlowPaymentMethodsUpdate(order: Order) {
         return new Promise<PaymentMethodsResponse>((resolve, reject) => {
-            const data = {
-                order: {
-                    orderData: order.orderData,
-                    pspReference: order.pspReference
+            if (!this.props.onPaymentMethodsRequest) {
+                return reject();
+            }
+
+            this.props.onPaymentMethodsRequest(
+                {
+                    order: {
+                        orderData: order.orderData,
+                        pspReference: order.pspReference
+                    },
+                    locale: this.core.options.locale
                 },
-                locale: this.core.options.locale
-            };
-            this.props.onPaymentMethodsRequest(data, { resolve, reject });
+                { resolve, reject }
+            );
         })
-            .then(paymentMethodsResponse => {
-                return this.core.update({ paymentMethodsResponse, order, amount: order.remainingAmount });
-            })
             .catch(error => {
                 this.handleError(
-                    new AdyenCheckoutError('IMPLEMENTATION_ERROR', 'Payment methods be updated after partial payment.', { cause: error })
+                    new AdyenCheckoutError(
+                        'IMPLEMENTATION_ERROR',
+                        'Something failed during payment methods update or onPaymentMethodsRequest was not implemented',
+                        {
+                            cause: error
+                        }
+                    )
                 );
+            })
+            .then(paymentMethodsResponse => {
+                return this.core.update({
+                    ...(paymentMethodsResponse && { paymentMethodsResponse }),
+                    order,
+                    amount: order.remainingAmount
+                });
             });
     }
 }

diff --git a/packages/playground/src/pages/Dropin/manual.js b/packages/playground/src/pages/Dropin/manual.js
@@ -1,6 +1,24 @@
-import { AdyenCheckout, Dropin, Card, GooglePay, PayPal, Ach, Affirm, WeChat, Giftcard, AmazonPay } from '@adyen/adyen-web';
+import {
+    AdyenCheckout,
+    Dropin,
+    Card,
+    GooglePay,
+    PayPal,
+    Ach,
+    Affirm,
+    WeChat,
+    Giftcard,
+    AmazonPay
+} from '@adyen/adyen-web';
 import '@adyen/adyen-web/styles/adyen.css';
-import { getPaymentMethods, makePayment, checkBalance, createOrder, cancelOrder, makeDetailsCall } from '../../services';
+import {
+    getPaymentMethods,
+    makePayment,
+    checkBalance,
+    createOrder,
+    cancelOrder,
+    makeDetailsCall
+} from '../../services';
 import { amount, shopperLocale, countryCode } from '../../config/commonConfig';
 import { getSearchParameters } from '../../utils';
 import getTranslationFile from '../../config/getTranslation';
@@ -96,7 +114,11 @@ export async function initManual() {
                 };
 
                 const orderPaymentMethods = await getPaymentMethods({ order, amount, shopperLocale });
-                checkout.update({ paymentMethodsResponse: orderPaymentMethods, order, amount: result.order.remainingAmount });
+                checkout.update({
+                    paymentMethodsResponse: orderPaymentMethods,
+                    order,
+                    amount: result.order.remainingAmount
+                });
             } else {
                 handleFinalState(result.resultCode, component);
             }