Added support to card brands configured in merchant account in accoun…

…t page (#1223)
Adyen · Dec 5, 2024 · 7f28013 · 7f28013
1 parent 85eba5c
commit 7f28013
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 26 deletions.
diff --git a/src/cartridges/app_adyen_SFRA/cartridge/client/default/js/adyenAccount.js b/src/cartridges/app_adyen_SFRA/cartridge/client/default/js/adyenAccount.js
@@ -1,4 +1,4 @@
-const { onFieldValid, onBrand } = require('./commons');
+const { onFieldValid, onBrand, getPaymentMethods } = require('./commons');
 const store = require('../../../store');
 
 let checkout;
@@ -10,32 +10,44 @@ store.checkoutConfiguration.amount = {
   currency: 'EUR',
 };
 
-store.checkoutConfiguration.paymentMethodsConfiguration = {
-  card: {
-    enableStoreDetails: false,
-    hasHolderName: true,
-    holderNameRequired: true,
-    installments: [],
-    onBrand,
-    onFieldValid,
-    onChange(state) {
-      store.isValid = state.isValid;
-      store.componentState = state;
+async function initializeStoreConfiguration() {
+  const paymentMethodsData = await getPaymentMethods();
+  const paymentMethodsResponse = paymentMethodsData.AdyenPaymentMethods;
+  const cardBrands = paymentMethodsResponse.paymentMethods
+    .filter((method) => method.type === 'scheme')
+    .flatMap((method) => method.brands || []);
+
+  store.checkoutConfiguration.paymentMethodsConfiguration = {
+    card: {
+      enableStoreDetails: false,
+      hasHolderName: true,
+      holderNameRequired: true,
+      installments: [],
+      onBrand,
+      onFieldValid,
+      brands: cardBrands,
+      onChange(state) {
+        store.isValid = state.isValid;
+        store.componentState = state;
+      },
     },
-  },
-};
+  };
+}
+
+async function initializeCardComponent() {
+  const cardNode = document.getElementById('card');
+  checkout = await AdyenCheckout(store.checkoutConfiguration);
+  card = checkout.create('card').mount(cardNode);
+}
 
 // Handle Payment action
 function handleAction(action) {
   checkout.createFromAction(action).mount('#action-container');
   $('#action-modal').modal({ backdrop: 'static', keyboard: false });
 }
 
-// confirm onAdditionalDetails event and paymentsDetails response
 store.checkoutConfiguration.onAdditionalDetails = (state) => {
-  const requestData = JSON.stringify({
-    data: state.data,
-  });
+  const requestData = JSON.stringify({ data: state.data });
   $.ajax({
     type: 'POST',
     url: window.paymentsDetailsURL,
@@ -57,12 +69,6 @@ store.checkoutConfiguration.onAdditionalDetails = (state) => {
   });
 };
 
-async function initializeCardComponent() {
-  const cardNode = document.getElementById('card');
-  checkout = await AdyenCheckout(store.checkoutConfiguration);
-  card = checkout.create('card').mount(cardNode);
-}
-
 let formErrorsExist = false;
 
 function submitAddCard() {
@@ -84,9 +90,11 @@ function submitAddCard() {
   });
 }
 
-initializeCardComponent();
+(async () => {
+  await initializeStoreConfiguration();
+  await initializeCardComponent();
+})();
 
-// Add Payment Button event handler
 $('button[value="add-new-payment"]').on('click', (event) => {
   if (store.isValid) {
     document.querySelector('#adyenStateData').value = JSON.stringify(

diff --git a/src/cartridges/app_adyen_SFRA/cartridge/templates/default/account/payment/paymentForm.isml b/src/cartridges/app_adyen_SFRA/cartridge/templates/default/account/payment/paymentForm.isml
@@ -18,6 +18,7 @@
             };
             window.redirectUrl = "${URLUtils.url('PaymentInstruments-List')}";
             window.paymentsDetailsURL = "${URLUtils.https('Adyen-PaymentsDetails')}";
+            window.getPaymentMethodsURL = "${URLUtils.https('Adyen-GetPaymentMethods')}";
         </script>
         <form
             action="${URLUtils.url('PaymentInstruments-SavePayment', 'UUID', pdict.UUID)}"

diff --git a/tests/playwright/pages/CheckoutPageSFRA5.mjs b/tests/playwright/pages/CheckoutPageSFRA5.mjs
@@ -104,6 +104,9 @@ export default class CheckoutPageSFRA5 {
     await this.successMessage.waitFor({ visible: true });
 
     await this.navigateToCheckout(locale);
+    if (this.consentButton.isVisible()) {
+		this.consentButton.click();
+	  }
     await this.checkoutGuest.click();
   };