Issue with displaying stored payment information for cards

Describe the bug It is no longer possible with the newest api to display stored card informations correctly.

The issue is the following one, the call to https://docs.adyen.com/api-explorer/#/PaymentSetupAndVerificationService/v53/post/paymentMethods returns the following result (reducted to relevant part):

{
  ....
  "storedPaymentMethods": [
    {
      ....
      "id": "8315980248.....",
      ....
      "type": "scheme"
    }
  ]
}

The adyen web components are expecting the following format to work tho:

{
  ....
  "storedPaymentMethods": [
    {
      ....
      "storedPaymentMethodId": "8315980248.....",
      ....
      "type": "scheme"
    }
  ]
}

So by using the newest api with the adyen components it is no longer possible without replacing the raw id with the storedPaymentMethodId to get the stored payment method properly displayed. Passing the information in the raw format is actually defined in the documentation here: https://docs.adyen.com/payment-methods/cards/web-component#show-a-stored-card-in-your-payment-form

To Reproduce Steps to reproduce the behavior:

1. Inititialize a checkout via the following code and use the exact response you get for the request from with a shopperId https://docs.adyen.com/api-explorer/#/PaymentSetupAndVerificationService/v53/post/paymentMethods

if (paymentMethodsResponse != null && paymentMethodsResponse.storedPaymentMethods.length > 0) {
        const storedPaymentMethod = paymentMethodsResponse.storedPaymentMethods[0];
        const oneClick = checkout.create('card', storedPaymentMethod).mount('#component-container-one-click');
}

1. The user has to enter the credit card data again

Expected behavior

1. Initialize request as mentioned above
2. User only has to enter the cvc from the stored payment method again

Screenshots If applicable, add screenshots to help explain your problem.

Expected result:

Actual result:

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome

Hope i have written down the issue clear enough. 😃

best regards, David

[marcperez]

Hi @denic, happy it’s all working for you now!

[marcperez]

Hi @Loktor,

In the case of stored payment methods, we process that response data when initializing a new checkout instance. Here you can find the detailed steps: https://docs.adyen.com/payment-methods/cards/web-component#show-a-stored-card-in-your-payment-form

These are the key points:

When creating an instance of the AdyenCheckout, pass the full /paymentMethods response to the paymentMethodsResponse object

const storedPaymentMethod = checkout.paymentMethodsResponse.storedPaymentMethods[0]; // This comes from the main instance, not the raw response itself
const card = checkout.create("card", storedPaymentMethod).mount("#stored-card");

Hope this helps!