Merge branch 'main' into feat/klarna-logo-fix

Adyen · Dec 4, 2023 · 447cb37 · 447cb37
2 parents bf528af + 9d04b6f
commit 447cb37
Show file tree

Hide file tree

Showing 140 changed files with 3,264 additions and 1,928 deletions.
diff --git a/.changeset/cool-hotels-remember.md b/.changeset/cool-hotels-remember.md
@@ -0,0 +1,7 @@
+---
+'@adyen/adyen-web': patch
+---
+
+For all PaymentMethodItems we were adding a class `adyen-checkout__payment-method--{fundingSource}` (where fundingSource was either "credit" or "debit")
+
+This is meant to be a Card PM specific class to indicate, in the paymentMethods list, whether the card is a credit or debit card.
diff --git a/.changeset/fifty-parrots-collect.md b/.changeset/fifty-parrots-collect.md
@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': minor
+---
+
+feature: adds new onAddressSelected to fill data when an item is selected in AddressSearch
diff --git a/.changeset/lemon-emus-wait.md b/.changeset/lemon-emus-wait.md
@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': minor
+---
+
+Click to Pay - Enabling MC/Visa to drop cookies if the shopper gives consent
diff --git a/.changeset/old-ears-heal.md b/.changeset/old-ears-heal.md
@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': minor
+---
+
+Click to Pay - Replacing loading gif by animated SVGs
diff --git a/.changeset/swift-rice-punch.md b/.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.
diff --git a/packages/e2e-playwright/app/config/webpack.config.js b/packages/e2e-playwright/app/config/webpack.config.js
@@ -19,8 +19,8 @@ const htmlPages = fs.readdirSync(basePageDir).map(fileName => ({
 const htmlPageGenerator = ({ id }, index) => {
     console.log('htmlPageGenerator', id, index);
     return new HTMLWebpackPlugin({
-        // make card index.html the rest of the pages will have page <lower case ID>.html
-        filename: `${id !== 'Cards' ? `${id.toLowerCase()}/` : ''}index.html`,
+        // make Dropin index.html the rest of the pages will have page <lower case ID>.html
+        filename: `${id !== 'Dropin' ? `${id.toLowerCase()}/` : ''}index.html`,
         template: path.join(__dirname, `../src/pages/${id}/${id}.html`),
         templateParameters: () => ({ htmlWebpackPlugin: { htmlPages } }),
         inject: 'body',

diff --git a/packages/e2e-playwright/app/src/handlers.js b/packages/e2e-playwright/app/src/handlers.js
@@ -4,10 +4,10 @@ function removeComponent(component) {
     component.remove();
 }
 
-export function showAuthorised() {
+export function showAuthorised(message = 'Authorised') {
     const resultElement = document.getElementById('result-message');
     resultElement.classList.remove('hide');
-    resultElement.innerText = 'Authorised';
+    resultElement.innerText = message;
 }
 
 export function handleResponse(response, component) {

diff --git a/packages/e2e-playwright/app/src/pages/ANCV/ANCV.html b/packages/e2e-playwright/app/src/pages/ANCV/ANCV.html
@@ -16,11 +16,12 @@ <h2>ANCV</h2>
                     </div>
                     <div class="merchant-checkout__payment-method__details">
                         <div class="ancv-field"></div>
-                        <button id="ancv-pay-button" type="button">Pay</button>
                     </div>
                 </div>
             </form>
+
             <div id='result-message' class="merchant-checkout__result hide"></div>
+
         </main>
 
         <script type="text/javascript">

diff --git a/packages/e2e-playwright/app/src/pages/ANCV/ANCV.js b/packages/e2e-playwright/app/src/pages/ANCV/ANCV.js
@@ -1,7 +1,7 @@
 import AdyenCheckout from '@adyen/adyen-web';
 import '@adyen/adyen-web/dist/es/adyen.css';
-import { handleSubmit, handleAdditionalDetails, handleError, handleOrderRequest, showAuthorised } from '../../handlers';
-import { amount, shopperLocale, countryCode } from '../../services/commonConfig';
+import { handleError, showAuthorised } from '../../handlers';
+import { shopperLocale, countryCode } from '../../services/commonConfig';
 import '../../style.scss';
 import { createSession } from '../../services';
 
@@ -16,13 +16,8 @@ const initCheckout = async () => {
         returnUrl: 'http://localhost:3024/'
     });
 
-    // console.log('env env', process.env.__CLIENT_ENV__);
-    // console.log('env key', process.env.__CLIENT_KEY__);
     const checkout = await AdyenCheckout({
         environment: process.env.__CLIENT_ENV__,
-        // environmentUrls: {
-        //     api: process.env.__CLIENT_ENV__
-        // },
         analytics: {
             enabled: false
         },
@@ -31,32 +26,16 @@ const initCheckout = async () => {
         clientKey: process.env.__CLIENT_KEY__,
         locale: shopperLocale,
         countryCode,
-        showPayButton: false,
-        //onSubmit: handleSubmit,
-        //onOrderRequest: handleOrderRequest,
-        //onAdditionalDetails: handleAdditionalDetails,
-        onOrderCreated: data => {
-            console.log('=== onOrderCreated ===', data);
+        showPayButton: true,
 
-            window.paymentMethod = checkout.create('card').mount('.ancv-field');
-        },
-        onPaymentCompleted: () => {
-            showAuthorised();
+        onOrderCreated: data => {
+            console.log('hello');
+            showAuthorised('Partially Authorised');
         },
-        onError: handleError,
-        paymentMethodsConfiguration: {
-            ideal: {
-                highlightedIssuers: ['1121', '1154', '1153']
-            }
-        }
-        // ...window.mainConfiguration
+        onError: handleError
     });
 
     window.paymentMethod = checkout.create('ancv').mount('.ancv-field');
-
-    document.querySelector('#ancv-pay-button').addEventListener('click', () => {
-        window.paymentMethod.submit();
-    });
 };
 
 initCheckout();
diff --git a/packages/e2e-playwright/app/src/pages/CustomCards/CustomCards.html b/packages/e2e-playwright/app/src/pages/CustomCards/CustomCards.html
@@ -39,18 +39,18 @@ <h3 class="card-text sf-text">CustomCard #1</h3>
                     />
                 </span>
                 <label class="pm-form-label pm-form-label-pan">
-                    <span class="pm-form-label__text">Card number:</span>
+                    <span class="pm-form-label__text">Card number</span>
                     <span class="pm-input-field" data-cse="encryptedCardNumber"></span>
                     <span class="pm-form-label__error-text">Please enter a valid credit card number</span>
                 </label>
                 <label class="pm-form-label pm-form-label--exp-date">
-                    <span class="pm-form-label__text">Expiry date:</span>
+                    <span class="pm-form-label__text">Expiry date</span>
                     <span class="pm-input-field" data-cse="encryptedExpiryDate"></span>
                     <span class="pm-form-label__error-text">Date error text</span>
                 </label>
                 </label>
                 <label class="pm-form-label pm-form-label--cvc">
-                    <span class="pm-form-label__text">CVV/CVC:</span>
+                    <span class="pm-form-label__text">Security code</span>
                     <span class="pm-input-field" data-cse="encryptedSecurityCode"></span>
                     <span class="pm-form-label__error-text">CVC Error text</span>
                 </label>
@@ -60,6 +60,57 @@ <h3 class="card-text sf-text">CustomCard #1</h3>
         </div>
     </div>
 
+    <!-- Custom Card w. separate date fields -->
+    <div class="merchant-checkout__form">
+        <div class="merchant-checkout__payment-method">
+            <div class="merchant-checkout__payment-method__header">
+                <h3 class="card-text sf-text">CustomCard #2</h3>
+            </div>
+            <div class="merchant-checkout__payment-method__details secured-fields-2">
+                <span class="pm-image">
+                    <img
+                            class="pm-image-1"
+                            width="40"
+                            src="https://checkoutshopper-test.adyen.com/checkoutshopper/images/logos/nocard.svg"
+                            alt=""
+                    />
+                </span>
+                <span class="pm-image-dual">
+                    <img
+                            class="pm-image-dual-1"
+                            width="40"
+                            alt=""
+                    />
+                    <img
+                            class="pm-image-dual-2"
+                            width="40"
+                            alt=""
+                    />
+                </span>
+                <label class="pm-form-label pm-form-label-pan">
+                    <span class="pm-form-label__text">Card number</span>
+                    <span class="pm-input-field" data-cse="encryptedCardNumber"></span>
+                    <span class="pm-form-label__error-text">Please enter a valid credit card number</span>
+                </label>
+                <label class="pm-form-label pm-form-label--exp-month">
+                    <span class="pm-form-label__text">Expiry month</span>
+                    <span class="pm-input-field" data-cse="encryptedExpiryMonth"></span>
+                    <span class="pm-form-label__error-text">Date error text</span>
+                </label>
+                <label class="pm-form-label pm-form-label--exp-year">
+                    <span class="pm-form-label__text">Expiry year</span>
+                    <span class="pm-input-field" data-cse="encryptedExpiryYear"></span>
+                    <span class="pm-form-label__error-text">Date error text</span>
+                </label>
+                <label class="pm-form-label pm-form-label--cvc">
+                    <span class="pm-form-label__text">Security code</span>
+                    <span class="pm-input-field" data-cse="encryptedSecurityCode"></span>
+                    <span class="pm-form-label__error-text">CVC Error text</span>
+                </label>
+            </div>
+        </div>
+    </div>
+
 </main>
 
 <script type="text/javascript">

diff --git a/packages/e2e-playwright/app/src/pages/CustomCards/CustomCards.js b/packages/e2e-playwright/app/src/pages/CustomCards/CustomCards.js
@@ -20,10 +20,10 @@ const initCheckout = async () => {
         ...window.mainConfiguration
     });
 
-    window.securedFields = checkout
+    window.customCard = checkout
         .create('securedfields', {
             type: 'card',
-            brands: ['mc', 'visa', 'amex', 'bcmc', 'maestro', 'cartebancaire'],
+            brands: ['mc', 'visa', 'synchrony_plcc'],
             onConfigSuccess,
             onBrand,
             onFocus: setFocus,
@@ -33,14 +33,30 @@ const initCheckout = async () => {
         })
         .mount('.secured-fields');
 
-    createPayButton('.secured-fields', window.securedFields, 'securedfields');
+    createPayButton('.secured-fields', window.customCard, 'customCardRegular');
+
+    window.customCardSeparate = checkout
+        .create('securedfields', {
+            type: 'card',
+            brands: ['mc', 'visa', 'synchrony_plcc'],
+            onConfigSuccess,
+            onBrand,
+            onFocus: setFocus,
+            onBinLookup,
+            onChange,
+            ...window.cardConfig
+        })
+        .mount('.secured-fields-2');
+
+    createPayButton('.secured-fields-2', window.customCardSeparate, 'customCardSeparate');
 
     function createPayButton(parent, component, attribute) {
         const payBtn = document.createElement('button');
 
         payBtn.textContent = 'Pay';
-        payBtn.name = 'pay';
-        payBtn.classList.add('adyen-checkout__button', 'js-components-button--one-click', `js-${attribute}`);
+        payBtn.name = `pay-${attribute}`;
+        payBtn.setAttribute('data-testid', `pay-${attribute}`);
+        payBtn.classList.add('adyen-checkout__button', 'js-components-button--one-click', `js-pay-${attribute}`);
 
         payBtn.addEventListener('click', e => {
             e.preventDefault();

diff --git a/packages/e2e-playwright/app/src/pages/CustomCards/customCards.config.js b/packages/e2e-playwright/app/src/pages/CustomCards/customCards.config.js
@@ -103,12 +103,12 @@ export function onBrand(pCallbackObj) {
     // Optional cvc fields
     if (pCallbackObj.cvcPolicy === 'optional' && !optionalCVC) {
         optionalCVC = true;
-        if (cvcNode) cvcNode.querySelector('.pm-form-label__text').innerText = 'CVV/CVC (optional):';
+        if (cvcNode) cvcNode.querySelector('.pm-form-label__text').innerText = 'Security code (optional)';
     }
 
     if (optionalCVC && pCallbackObj.cvcPolicy !== 'optional') {
         optionalCVC = false;
-        if (cvcNode) cvcNode.querySelector('.pm-form-label__text').innerText = 'CVV/CVC:';
+        if (cvcNode) cvcNode.querySelector('.pm-form-label__text').innerText = 'Security code';
     }
 
     /**
@@ -135,16 +135,16 @@ export function onBrand(pCallbackObj) {
     // Optional date fields
     if (pCallbackObj.expiryDatePolicy === 'optional' && !optionalDate) {
         optionalDate = true;
-        if (dateNode) dateNode.querySelector('.pm-form-label__text').innerText = 'Expiry date (optional):';
-        if (monthNode) monthNode.querySelector('.pm-form-label__text').innerText = 'Expiry month (optional):';
-        if (yearNode) yearNode.querySelector('.pm-form-label__text').innerText = 'Expiry year (optional):';
+        if (dateNode) dateNode.querySelector('.pm-form-label__text').innerText = 'Expiry date (optional)';
+        if (monthNode) monthNode.querySelector('.pm-form-label__text').innerText = 'Expiry month (optional)';
+        if (yearNode) yearNode.querySelector('.pm-form-label__text').innerText = 'Expiry year (optional)';
     }
 
     if (optionalDate && pCallbackObj.expiryDatePolicy !== 'optional') {
         optionalDate = false;
-        if (dateNode) dateNode.querySelector('.pm-form-label__text').innerText = 'Expiry date:';
-        if (monthNode) monthNode.querySelector('.pm-form-label__text').innerText = 'Expiry month:';
-        if (yearNode) yearNode.querySelector('.pm-form-label__text').innerText = 'Expiry year:';
+        if (dateNode) dateNode.querySelector('.pm-form-label__text').innerText = 'Expiry date';
+        if (monthNode) monthNode.querySelector('.pm-form-label__text').innerText = 'Expiry month';
+        if (yearNode) yearNode.querySelector('.pm-form-label__text').innerText = 'Expiry year';
     }
 }
 
@@ -248,7 +248,7 @@ export function onChange(state, component) {
     }
 }
 
-const setErrorClasses = function(pNode, pSetErrors) {
+const setErrorClasses = function (pNode, pSetErrors) {
     if (pSetErrors) {
         if (pNode.className.indexOf('pm-input-field--error') === -1) {
             pNode.className += ' pm-input-field--error';
@@ -263,7 +263,7 @@ const setErrorClasses = function(pNode, pSetErrors) {
     }
 };
 
-const setFocusClasses = function(pNode, pSetFocus) {
+const setFocusClasses = function (pNode, pSetFocus) {
     if (pSetFocus) {
         if (pNode.className.indexOf('pm-input-field--focus') === -1) {
             pNode.className += ' pm-input-field--focus';

diff --git a/packages/e2e-playwright/app/src/pages/Dropin/Dropin.html b/packages/e2e-playwright/app/src/pages/Dropin/Dropin.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="x-ua-compatible" content="ie=edge" />
+        <title>Adyen Web | Drop-in</title>
+        <meta name="description" content="" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    </head>
+
+    <body>
+        <main>
+            <div class="merchant-checkout__form">
+                <div id="dropin-container"></div>
+            </div>
+        </main>
+
+        <script type="text/javascript">
+            window.htmlPages = <%= JSON.stringify(htmlWebpackPlugin.htmlPages) || '' %>;
+        </script>
+    </body>
+</html>
diff --git a/packages/e2e-playwright/app/src/pages/Dropin/Dropin.js b/packages/e2e-playwright/app/src/pages/Dropin/Dropin.js
@@ -0,0 +1,27 @@
+import AdyenCheckout from '@adyen/adyen-web';
+import '@adyen/adyen-web/dist/es/adyen.css';
+import { getPaymentMethods } from '../../services';
+import { amount, shopperLocale, countryCode } from '../../services/commonConfig';
+import { handleSubmit, handleAdditionalDetails, handleError } from '../../handlers';
+import '../../style.scss';
+
+const initCheckout = async () => {
+    const paymentMethodsResponse = await getPaymentMethods({ amount, shopperLocale });
+
+    window.checkout = await AdyenCheckout({
+        amount,
+        countryCode,
+        clientKey: process.env.__CLIENT_KEY__,
+        paymentMethodsResponse,
+        locale: shopperLocale,
+        environment: 'test',
+        onSubmit: handleSubmit,
+        onAdditionalDetails: handleAdditionalDetails,
+        onError: handleError,
+        ...window.mainConfiguration
+    });
+
+    window.dropin = checkout.create('dropin', window.dropinConfig).mount('#dropin-container');
+};
+
+initCheckout();
diff --git a/packages/e2e-playwright/mocks/binLookup/binLookup.data.ts b/packages/e2e-playwright/mocks/binLookup/binLookup.data.ts
@@ -13,4 +13,18 @@ const optionalDateAndCvcMock = {
     requestedId: null
 };
 
-export { optionalDateAndCvcMock };
+const hiddenDateAndCvcMock = {
+    brands: [
+        {
+            brand: 'mc',
+            enableLuhnCheck: true,
+            supported: true,
+            cvcPolicy: 'hidden',
+            expiryDatePolicy: 'hidden'
+        }
+    ],
+    issuingCountryCode: 'US',
+    requestedId: null
+};
+
+export { optionalDateAndCvcMock, hiddenDateAndCvcMock };