We have implemented Adyen Drop-in on our Angular app. We discovered an issue where the drop-in takes a really long time to load. One of the strategies we are investigating is to load the session earlier like in a homepage. We load the session with a dummy product with a $0 amount. When a user selects the product, we want to update the existing Adyen session details with the proper product and amount, then load (or mount) the Adyen UI on our payment page (with the updated payment data). Would anyone know of a way to do this? So far, we are using the /sessions API and don't see any way to update a session and looking to see if this is possible.
The Session Flow is simple to use but it comes with a few limitations, like updating the amount after the session has been initialised.
You have in this case 2 options:
In the first case, you implement the Session approach, and then you perform the payment (with the relevant amount) through an additional /payments call. The drop-in configuration needs to provide the onSubmit handler:
onSubmit: (state: any, component: any) => {
if (state.isValid) {
const data = {
// Your data object
};
// make payment
this.apiService.makePayment(data).subscribe(
...
);
}
},
In the case of Advanced Flow you don't create a session, but instead implement the payment flow in your application, performing the 3-step workflow.
There is here an example in NodeJS.
PS If the drop-in loads very slowly (it shouldn't be the case) I suggest to post a new question or create a GitHub issue.