Adyen Drop-In Submit Button Says 'Confirm preauthorization' instead of 'Pay $...'

Question

Our app is experiencing really long drop-in load times. We decided to try and preload the payment session in the homepage (with a dummy $0 product), then update amount and mount in the payment page. To clarify, a typical drop-in use case involves create() and mount() made in one call, such as: checkout.create('dropin').mount('#dropin-container').

In my attempt at preloading, I have:

1. checkout.create('dropin'), called and stored (as checkoutInstance) from the homepage
2. checkoutInstance.mount() called in the payment page

This looks like it really sped up the UI load time, but when the UI is mounted, the drop-in submit button shows ‘Confirm preauthorization’?

Does anyone have thoughts on what is going on and what steps I can take to update what is displayed in the UI once it is mounted? Especially, I'd like to update the submit button to display the usual 'Pay $...'

Answer 1

The reason you are getting this message is because you are offering to make a 0$ payment. This isn't a typical flow for our drop-in, where you start with an empty payment and update it later on.

I would recommend instead finding the source of the slowness, because it definitely shouldn't happen even on test environments. Using workarounds may also lead to unexpected side-effects on production. If you share a performance profile from the network tab of your current environment I might be able to help further.

That being said, you can use localization profiles to change the text of the drop-in as you desire.

The documentation for this is here and we have a handy video for it as well.

It will look like this

    const translations = {
    "en-GB": {
        "payButton": "Pay",
        "confirmPreauthorization": "Pay $",
        ...
    }
};

Here is an example file.

Again though, I recommend looking into the reason for the slowness instead.