paymentMethodRequestable fires unexpectedly after receiving a payload from requestPaymentMethod

[cmawhorter]

General information

• SDK/Library version: 1.27.0
• Environment: Sandbox
• Browser and OS Chrome/mac

Issue description

While entering credit card for an anonymous customer, paymentMethodRequestable event is firing when it shouldn't.

To reproduce:

1. dropin.create
2. instance.on('paymentMethodRequestable', () => {
3. instance.requestPaymentMethod((err, payload) => {

paymentMethodRequestable fires once as soon as the form is complete (correct) and once after the payload is returned from requestPaymentMethod:

^== in the image doit() is just window.doit = () => instance.requestPaymentMethod

This makes it difficult to know if I should show a show a save payment method button or know the order is ready to be submitted.

[crookedneighbor]

I think this is intentional. The event payload includes a property paymentMethodIsSelected that will be false when the card is ready to be tokenized and true once the tokenization is complete and the payment method is actually displayed as being selected.

Can you go into more detail about how your integration works? In most cases, once requestPaymentMethod is called, the end result is to finish the checkout and submit the payment method nonce to your server.

[cmawhorter]

Oh, I missed that in the docs and and didn't think to check what was being passed to the event handler. Good to know, thanks.

Can you go into more detail about how your integration works

Sure thing. I'm displaying drop-in as the final step of my multi-step checkout process:

1. multiple steps of customer data entry e.g. shipping address
2. lands on final payment step with the drop-in component
3. customer (anonymous or not) enters a payment method
4. customer clicks submit order

The problem for me is what the customer does between steps 3 and 4.

I'd like to have a single button that is a Save credit card and then changes to Submit order once a valid card is chosen.

With cc entry at least, the crux of the issue is the "Choose another way to pay" button. I have no way of knowing if they've clicked this and entered a new card. And because of that I don't know if I should request a new nonce or I can use the one I have and submit the order. (paymentMethodIsSelected might help here but I'm too sleep deprived to think it through right now)

Is there a reason there isn't a built-in button for committing the entered card? There are other buttons for editing and deleting saved payments, no? Without that button it means I need one and to worry about keeping my ui in sync with the component.

For now my workaround is to just request the nonce and submit the order in one go but it's not great.

[crookedneighbor]

Is there a reason there isn't a built-in button for committing the entered card?

In retrospect, I wish we had gone that route. That certainly would put the credit card form in line with how the other payment methods work. I think the only real difficulty is figuring out the right language for it, because it certainly isn't "saving" the card if you don't intend to vault it afterward.

Something to think about as we design the next major version of Drop-in. I'll mark this issue with the v2 label so we can revisit it as we work on the next major version.

For now, using the paymentMethodIsSelected option should get you most of the way there. I'll be curious to hear back from you about if it meets the needs of your integration.