paymentMethodRequestable Triggering Prematurely

[bkonia]

I implemented the new paymentMethodRequestable event on my form. It works perfectly when adding a PayPal account. However, when adding a credit card, if you have the zip code field enabled, the event triggers when the user enters the third digit of his zip code. This is incorrect since the credit card is not requestable until after the user clicks the Submit button.

In my case, I'm using the event to retrieve the list of payment methods and update a dropdown with the available methods. Since the event triggers before the credit card has been added, the dropdown updates prematurely and the new credit card does not show up until after the page has been refreshed.

[crookedneighbor]

For PayPal accounts, you can call requestPaymentMethod on the dropin instance only after the PayPal account has been authenticated, otherwise, it'll error. That's why the event fires after authentication completes.

For credit cards, you are able to attempt to call requestPaymentMethod when the card passes client side validation. Client side validation for postal code is that it is longer than 3 characters. (some international postal codes can have as few as 3 characters)

If you need special logic for credit cards, you can leverage the data passed back with the event object:

dropinInstance.on('paymentMethodRequestable', function (event) {
  if (event.type === 'CreditCard') {
    // display submit button so payment method can be requested by the user once postal code is done being entered
  } else {
    // whatever logic you are currently doing
  }

We'll look into adding a configurable minLength property to postal code in Hosted Fields (what Drop-in is using to create the card form) so that the client side validation will not report that it is valid until that minLength value is reached.