question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Drop-in flips to "vaulted" appearance upon order form submission

See original GitHub issue

Using any of the recent versions of the .js, including the current “official” one from https://js.braintreegateway.com/v2/braintree.js we’re seeing some undesirable behaviour.

It starts off ok. When the (single) checkout page containing the braintree.setup() is called with a clientToken generated on the server without a customerId passed in, the drop-in form appears as it should: with PayPal button and fields for credit card number, expiry and CVV (CID for Amex).

   var dropInOptions = {
        container: 'dropin-braintree',
        onPaymentMethodReceived: insertNonceOnForm
    };
    var clientToken = '<?php echo $_clientToken; ?>';
    braintree.setup(clientToken, 'dropin', dropInOptions);
drop-in before submit

When the shopper presses “Place Order” on the checkout form, we capture and park the click, then programmatically press the hidden button on the drop-in form to have the nonce generated on our checkout form. We then re-instate the handler on the “Place Order” button to let it do its thing, which is to submit everything on the checkout form (product and shipping details, nonce) to the store. All of this has worked beautifully with a version of the .js dating back to May (we think). It still works with later versions (we tried 2.7.4 and 2.14.0) in that the order gets processed. But there is a major difference: when the checkout form submit occurs, the drop-in changes its look to the “vaulted” appearance, showing the last two digits of the credited card and a “Change payment method” link.

drop-in after submit

This isn’t so bad when the order goes through, as the shopper will be redirected to some sort of success page. End of story. But it is a major UX issue when the sale is declined and the shopper is left on the page with the drop-in having changed its looks and the original input fields no longer available.

To correct card details, say a CVV/CID, the shopper then needs to either refresh the page (losing all data entered) or using the drop-in vault look add a payment method (which is counter intuitive) and retype all of their card details, as these are not pre-populated. They can then press “Place Order” order a second time (since v2.7.4 will now auto-generate a NEW nonce, yay!) and the order will go through.

Is this behaviour configurable at all?

We much prefer the old behaviour whereby the drop-in retains its original look & feel, however we cannot use versions prior to 2.7.4 because of https://github.com/braintree/braintree-web/issues/20 Versions prior to 2.7.4 return the previously generated nonce, which then gets rejected on the server in the sale() call, for being used twice.

Note that in all this the Vault is off in that no customerId is ever past to the Braintree_ClientToken::generate or Braintree_Transaction::sale() calls.

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Reactions:1
  • Comments:16 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
RikdeBoercommented, Sep 26, 2015

Thank you for the code example. Ok, I won’t push any further.

Just this…

If you are talking about backwards compatibility … This never used to be the default behaviour. It is a regression. The default behaviour, months ago, used to be exactly what we all want: to leave the card number, expiry and CVV fields exactly as they were left by the shopper. No erasing. No flipping to a little panel that says “VISA ending in 11”. Just do NOTHING.

Then if there is a gateway error, those fields are still there for the shopper to correct. Then they press “Place order” for a second time, NEW nonce gets generated, order goes through. Happy days.

Does that make sense? Would you agree that this is a better UX than the current behaviour? Do you agree that teardown() is not going to do much for the shoppers and merchants in this scenario?

Final question: when shoppers complain to the merchants that we do business with, may I quote this as the official Braintree response:

“Future versions of braintree.js will likely address these concerns.” “Until such time (release date unknown), refresh the page or re-initialise the drop-in, thereby losing all data entered.”

0reactions
crookedneighborcommented, Sep 15, 2017

@chrisribe I recommend updating to the latest version of Drop-in (1.7.0).

It has a clearSelectedPaymentMethod function that allows you to remove the selected payment method. For your use case, you’d tokenize with drop-in, send the payment method nonce to your server, get the validation error and then call clearSelectedPaymentMethod and add an error message to your page about it.

Read more comments on GitHub >

github_iconTop Results From Across the Web

"requestPaymentMethod()" Intermittently Throws an Error ...
The user has to interact with the application again in order to submit the payment. My app is using the same button and...
Read more >
Setup and Integration | JavaScript - PayPal Developer
To get started, you will need client authorization, a container where Drop-in will appear, and a button. When loaded, the UI will appear...
Read more >
Monitor HashiCorp Vault Metrics and Logs - Datadog
In this post, we will discuss how you can gain visibility into the health and performance of your Vault deployment with metrics and...
Read more >
Introducing a New Battle Pass System in Call of Duty
Advance through the AO your way in an all-new Battle Pass system. Expect the same great rewards — free functional weapons and access...
Read more >
What It Took To Vault the Ceiling - HOUSE*TWEAKING
It does not include the cost of installing tongue and groove on the vaulted ceiling either. (You can read about that DIY project...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found