Adyen .NET Framework 4.72 - drop in

Question

Please help me with some sample code. I am battling to get Adyen drop in components to work (seemlessly) in my asp.net .net framework 4.72 ..

I have pretty much followed the php example from github and do exactly the same thing just made it work with c# and asp.net .. https://github.com/adyen-examples/adyen-php-online-payments

I have managed to get a response: Refused and Accepted with my interaction through javascript..

the problem is: once payment has succeeded(or failed) the payment method component stays in a waiting state (donut).. I want to :

1. show a message and reset it on fail
2. redirect somewhere else on success (I was hoping it was clever enough to redirect to my redirect url by itself.. but I dont know if the drop in can do that ?)

the makepayment javascript looks like this:

its literally from the php sample.

const makePayment = (paymentMethod, config = {}) => {
    const paymentsConfig = { ...paymentsDefaultConfig, ...config };
    const paymentRequest = { ...paymentsConfig, ...paymentMethod };

   updateRequestContainer(paymentRequest);

    return httpPost(baseurl + 'payments', paymentRequest)
        .then(response => {
            //if (response.error) throw 'Payment initiation failed';

            updateResponseContainer(response);


            //ui stuff so I can see what happened.
            if (response.error) {
                $("#payment-failed").show();
                return;
            }

            //alert(response.resultCode);

            if (response.resultCode == "Authorised") {
                document.getElementById('payment-success').style = "display:block"
            }
            else {
                document.getElementById('payment-failed').style = "display:block"
            }

            return response;
        })
        .catch(console.error);
};

this never changes once payment has gone to the server and returned in the javascript above.

I cant figure out how to reset the drop in component

Answer 1

Happy to help!

the problem is: once payment has succeeded(or failed) the payment method component stays in a waiting state (donut).. I want to :

1. show a message and reset it on fail
2. redirect somewhere else on success (I was hoping it was clever enough to redirect to my redirect url by itself.. but I dont know if the drop in can do that ?)

The Adyen Drop-in is able handle this for you. According to the Adyen documentation, you can get this behavior by overriding the onPaymentCompleted(...) and the onError(...) functions. Note: You must ensure that the returnUrl is specified in your request, see documentation here.

The configuration is used in Checkout(configuration), you can find a Javascript + .NET integration-example here.

const configuration = {
  environment: 'test', // Change to 'live' for the live environment.
  clientKey: 'test_870be2...', // Public key used for client-side authentication: https://docs.adyen.com/development-resources/client-side-authentication
  analytics: {
    enabled: true // Set to false to not send analytics data to Adyen.
  },
  session: {
    id: 'CSD9CAC3...', // Unique identifier for the payment session.
    sessionData: 'Ab02b4c...' // The payment session data.
  },
  onPaymentCompleted: (result, component) => {
      console.info(result, component);
  },
  onError: (error, component) => {
      console.error(error.name, error.message, error.stack, component);
  },
  // Any payment method specific configuration. Find the configuration specific to each payment method:  https://docs.adyen.com/payment-methods
  // For example, this is 3D Secure configuration for cards:
  paymentMethodsConfiguration: {
    card: {
      hasHolderName: true,
      holderNameRequired: true,
      billingAddressRequired: true
    }
  }
};

I see that your question also contains a reference to the ".NET Framework 4.72". Typically, the (javascript) code above should be part of your frontend (client-side). The client should then send your request to your backend (server-side/ASP .NET Core usually, which holds your secrets such as your ADYEN_API_KEY and ADYEN_MERCHANT_ACCOUNT), which then forwards that request to the Adyen servers. I've included a diagram below for illustration purposes:

Hope this helped you move forward with your integration :)