Allow saved credit card information removal on Adyen Drop In

user_19400432 0
Viewed 128

I am working on a POC with Adyen payments using the sample .Net code. Currently I am working on configuring the DropIn checkout.

I was able to allow save credit card info adding the enableStoreDetails attribute to the checkout.

I see that there is another attribute showRemovePaymentMethodButton and I believe it would be used to remove saved credit card info from the Drop In, but nothing changes when I add that attribute

What is the correct way of allowing a user to remove a saved credit card info at the DropIn checkout?

This is part of the code I am working on:

return new AdyenCheckout(
{
  clientKey,
  locale: "en_US",
  environment: "test",
  session: session,
  showPayButton: true,
  paymentMethodsConfiguration: {
    ideal: {
      showImage: true,
    },
    card: {
      hasHolderName: true,
      holderNameRequired: true,
      name: "Credit or debit card",
      amount: {
        value: 2000,
        currency: "USD",
        },
      enableStoreDetails: true,
      showRemovePaymentMethodButton: true
    },
    paypal: {
      amount: {
        value: 1000,
        currency: "USD",
      },
      environment: "test", // Change this to "live" when you're ready to accept live PayPal payments
      countryCode: "US", // Only needed for test. This will be automatically retrieved when you are in production.
    },
  },
adyen payment .net
1 Answers

The callback onDisableStoredPaymentMethod(...) also needs to be included in the Dropin. According to the documentation: onDisableStoredPaymentMethod(storedPaymentMethodId, resolve, reject) removes the stored payment method (requires work in the HomeController.cs to support the /disable endpoint). This is called when a shopper removes a stored payment method. To remove the selected payment method, make a /disable request using the storedPaymentMethodId. Then call either resolve() or reject(), depending on the /disable response.

For more information (https://docs.adyen.com/online-payments/tokenization/managing-tokens#disable-stored-details) and/or advanced use-cases, you can find more information here: https://docs.adyen.com/online-payments/web-drop-in/optional-configuration

Hope that helped!

Edit/added example:

const dropin = checkout
  .create('dropin', {
    showRemovePaymentMethodButton: true,
    onDisableStoredPaymentMethod(storedPaymentMethodId, resolve, reject) {
      console.log('hey there');
    }
  })
  .mount('#dropin-container');

user_191899610
Related