Sumit Haldar
Sumit Haldar

Reputation: 1

Missing header with card brand and last four digits for Adyen Stored Card Component

I am trying to integrate Adyen Web Component Advanced Flow to display stored cards from Adyen checkout.paymentMethodsResponse.storedPaymentMethods. I have 3 stored cards. Based on the sample code on Adyen documentation website, I am able to get and display the 1st card on the website. However, it only displays expiry date and editable cvv field, and does not show card brand with last four digits, along with the remove option.


Current display of stored card

I have used the following code:

const configuration = {
      locale: paymentMethodsResponse.shopperLocale,
      environment: paymentMethodsResponse.environmentMode,
      clientKey: paymentMethodsResponse.adyenClientKey,
      analytics: {
        enabled: false
      },
      paymentMethodsResponse: paymentMethodsResponse,
      showPayButton: true,
      paymentMethodsConfiguration: {
        ideal: {
          showImage: true
        },
        storedCard: {
          hideCVC: false,
        },
        card: {
          hasHolderName: true,
          holderNameRequired: true,
          billingAddressRequired: true,
          positionHolderNameOnTop: true,
          maskSecurityCode: true,
          enableStoreDetails: true,
          showRemovePaymentMethodButton: true,
        }
      },
      onSubmit: (state: any, component: any) => {
        this.handleOnSubmit(state, component);
      },
      onAdditionalDetails: (state: any, component: any) => {
        this.handleOnAdditionalDetails(state, component);
      }
    };
const checkout = await AdyenCheckout(configuration);
const storedPaymentMethod = checkout.paymentMethodsResponse.storedPaymentMethods[0];
const card = checkout.create("card", storedPaymentMethod).mount("#stored-card");

Is there something which I am missing? Also, is there a way to display all the 3 stored cards?

NOTE: My new card form and subsequent payment works properly.

I have tried multiple options to display the header part. My expectation is that it will be able to mount the data and display like this:


Expected display of stored card

Upvotes: 0

Views: 69

Answers (0)

Related Questions