PayPal onApprove callback fix (#2771)

* paypal fix * changeset * added test
Adyen · Jul 29, 2024 · 3959166 · 3959166
1 parent da7da4e
commit 3959166
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 2 deletions.
diff --git a/.changeset/sixty-phones-allow.md b/.changeset/sixty-phones-allow.md
@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': patch
+---
+
+PayPal - Fixed bug where payment wasnt being finalized once the PayPal lightbox closes
diff --git a/packages/lib/src/components/PayPal/Paypal.test.ts b/packages/lib/src/components/PayPal/Paypal.test.ts
@@ -1,4 +1,5 @@
 import Paypal from './Paypal';
+import { render, screen } from '@testing-library/preact';
 
 describe('Paypal', () => {
     test('Returns a data object', () => {
@@ -44,6 +45,26 @@ describe('Paypal', () => {
         paypal.submit();
         expect(onErrorMock).toHaveBeenCalled();
     });
+
+    test('should pass the required callbacks to the Component', async () => {
+        const paypal = new Paypal(global.core);
+        render(paypal.render());
+
+        await screen.findByTestId('paypal-loader');
+
+        // TODO: Implement full integration test mocking the Script loading and PayPal SDK, so we can avoid accessing proceted prop
+        // @ts-ignore Accessing protected prop to check that the callbacks are being passed down
+        const props = paypal.componentRef.props;
+
+        expect(props.onApprove).toBeDefined();
+        expect(props.onCancel).toBeDefined();
+        expect(props.onChange).toBeDefined();
+        expect(props.onError).toBeDefined();
+        expect(props.onScriptLoadFailure).toBeDefined();
+        expect(props.onSubmit).toBeDefined();
+        expect(props.isExpress).toBeFalsy();
+        expect(props.userAction).toBe('pay');
+    });
 });
 
 describe('Paypal configuration prop configures correctly', () => {

diff --git a/packages/lib/src/components/PayPal/Paypal.tsx b/packages/lib/src/components/PayPal/Paypal.tsx
@@ -211,7 +211,7 @@ class PaypalElement extends UIElement<PayPalConfiguration> {
                     {...(onShippingOptionsChange && { onShippingOptionsChange: this.handleOnShippingOptionsChange })}
                     onCancel={() => this.handleError(new AdyenCheckoutError('CANCEL'))}
                     onChange={this.setState}
-                    onApprove={void this.handleOnApprove}
+                    onApprove={this.handleOnApprove}
                     onError={error => {
                         this.handleError(new AdyenCheckoutError('ERROR', error.toString(), { cause: error }));
                     }}

diff --git a/packages/lib/src/components/PayPal/components/PaypalComponent.tsx b/packages/lib/src/components/PayPal/components/PaypalComponent.tsx
@@ -46,7 +46,7 @@ export default function PaypalComponent({ onApprove, onCancel, onChange, onError
     if (status === 'pending') {
         return (
             <div className="adyen-checkout__paypal" aria-live="polite" aria-busy="true">
-                <div className="adyen-checkout__paypal__status adyen-checkout__paypal__status--pending">
+                <div className="adyen-checkout__paypal__status adyen-checkout__paypal__status--pending" data-testid={'paypal-loader'}>
                     <Spinner />
                 </div>
             </div>