Fix/redirect component to pass browser info (#2469)

* fix(redirect): collect browserInfo

* test: add unit test

* refactor(giropay-redirect): remove formatData override

* chore: add the changeset

.changeset/swift-rice-punch.md

@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': patch
+---
+
+Pass the `browserInfo` in the `state.data` for the Redirect payments, in order to fix the mobile web integration for some redirect payments.

packages/lib/src/components/Giropay/Giropay.tsx

@@ -13,17 +13,6 @@ class GiropayElement extends RedirectElement {
         };
     }
 
-    /**
-     * Formats the component data output
-     */
-    formatData() {
-        return {
-            paymentMethod: {
-                type: GiropayElement.type
-            }
-        };
-    }
-
     get displayName() {
         return this.props.name || this.constructor['type'];
     }

packages/lib/src/components/Redirect/Redirect.test.tsx

@@ -2,6 +2,7 @@ import { mount } from 'enzyme';
 import { h } from 'preact';
 import Redirect from './Redirect';
 import RedirectShopper from './components/RedirectShopper';
+import RedirectElement from './Redirect';
 
 jest.mock('../../utils/detectInIframe', () => {
     return jest.fn().mockImplementation(() => {
@@ -21,6 +22,7 @@ describe('Redirect', () => {
         test('Accepts a POST redirect status', () => {
             window.HTMLFormElement.prototype.submit = jest.fn();
 
+            // @ts-ignore ignore
             const wrapper = mount(<RedirectShopper url="http://www.adyen.com" method="POST" data={{}} />);
 
             expect(wrapper.find('form')).toHaveLength(1);
@@ -32,11 +34,19 @@ describe('Redirect', () => {
         test('Accepts a POST redirect status, setting target to _top, when the config prop tells it to', () => {
             window.HTMLFormElement.prototype.submit = jest.fn();
 
+            // @ts-ignore ignore
             const wrapper = mount(<RedirectShopper url="http://www.adyen.com" method="POST" data={{}} redirectFromTopWhenInIframe={true} />);
 
             expect(wrapper.find('form')).toHaveLength(1);
             expect(wrapper.find('form').prop('target')).toBe('_top');
             setTimeout(() => expect(window.HTMLFormElement.prototype.submit).toHaveBeenCalled(), 0);
         });
     });
+
+    describe('Redirect formatData', () => {
+        test('should send browserInfo in the data', () => {
+            const redirectElement = new RedirectElement({});
+            expect(redirectElement.formatData().browserInfo).not.toBeNull();
+        });
+    });
 });

packages/lib/src/components/Redirect/Redirect.tsx

@@ -4,6 +4,7 @@ import UIElement from '../UIElement';
 import CoreProvider from '../../core/Context/CoreProvider';
 import RedirectShopper from './components/RedirectShopper';
 import RedirectButton from '../internal/RedirectButton';
+import collectBrowserInfo from '../../utils/browserInfo';
 
 /**
  * RedirectElement
@@ -30,7 +31,8 @@ class RedirectElement extends UIElement {
         return {
             paymentMethod: {
                 type: this.props.type
-            }
+            },
+            browserInfo: this.browserInfo
         };
     }
 
@@ -45,6 +47,10 @@ class RedirectElement extends UIElement {
         return this.resources.getImage()(this.props.type);
     }
 
+    get browserInfo() {
+        return collectBrowserInfo();
+    }
+
     render() {
         if (this.props.url && this.props.method) {
             return <RedirectShopper {...this.props} />;

packages/playground/src/config/commonConfig.js

@@ -18,7 +18,7 @@ export const amount = {
 
 export const useSession = urlParams.session !== 'manual';
 
-export const returnUrl = 'http://localhost:3020/result';
+export const returnUrl = `${window.location.protocol}//localhost:3020/result`;
 
 export default {
     amount,

packages/playground/src/pages/Dropin/manual.js

@@ -1,7 +1,7 @@
 import AdyenCheckout from '@adyen/adyen-web';
 import '@adyen/adyen-web/dist/es/adyen.css';
 import { getPaymentMethods, makePayment, checkBalance, createOrder, cancelOrder, makeDetailsCall } from '../../services';
-import { amount, shopperLocale, countryCode, returnUrl } from '../../config/commonConfig';
+import { amount, shopperLocale, countryCode } from '../../config/commonConfig';
 import { getSearchParameters } from '../../utils';
 
 export async function initManual() {