Allow access to some card information prior to using the nonce

[pdg137]

Many checkout systems show a preview page with a summary of what is about to happen, like "$44 will be charged to your Visa ending in 1234". That's not possible with the Drop-In UI, since the only thing we have access to at preview time is a nonce, and (if you care about the CVV) the nonce can only be used to create a transaction.

So, here is a simple feature request: the Drop-In UI should submit the credit card type and last four digits in some additional parameters to our form, along with the nonce. Presumably something similar would apply to PayPal transactions.

[jeffcarp]

Cool idea. Something you could do right now is:

1. Intercept nonce on Drop-in submit
2. Send nonce to your server
3. Create a payment method with that nonce
4. Send creditCard.last4 and creditCard.cardType to your front-end for display

[pdg137]

You can do that to display a preview, but then if you create a transaction you won't get CVV verification at all, right?

[jeffcarp]

If you have CVV rules enabled in the control panel, Drop-in will validate the CVV and won't produce a nonce unless the credit card info is valid.

[pdg137]

Really? What would it do instead, display some error to the user? I just tried a few times in the sandbox with CVV 200, and the iframe generated nonces as usual.

[pdg137]

It would be surprising if there were some way to casually check CVVs without explicitly requesting a sale or verification. Braintree support has indicated to me by email that there isn't a good way to do what I want yet.

[jeffcarp]

@pdg137 totally my bad, you're right - that would be opening a huge avenue for fraud. I'm going to add the enhancement tag.

[pdg137]

Thanks. For comparison, Stripe includes CC info with their nonce. It would be great to have a feature like that here!

[kyledetella]

@pdg137 we have recently released braintree.js v2.5.0 which introduces a new callback schema. It is backwards compatible and what you are currently using will work, however with this new callback you can get some credit card details back.

We have not yet added it to our documentation (coming soon) but I am happy to help here to see if this addresses your issue.

braintree.setup('TOKEN', 'dropin', {
  container: 'my-container',
  onPaymentMethodReceived: function (payload) {
    // payload.nonce
  }
});

The payload of onPaymentMethodReceived will look like this (for a credit card):

{
  nonce: 'A nonce',
  type: 'CreditCard',
  details: {
    lastTwo: '44',
    type: 'Visa'
  }
}

Go ahead and try this out and let me know if that solves your problem. You can get the latest version of braintree.js on npm or bower or by using the "hotlinked" version at https://assets.braintreegateway.com/v2/braintree.js.

[pdg137]

Is it really only going to be the last two digits? Will the information be available in the Ruby interface to the nonce, or do we have to use Javascript to see it?

[jeffcarp]

@pdg137 you can grab the last four using the Ruby client library. Unfortunately for security reasons our client API only returns the last 2 digits of a card.

[pdg137]

So it is only available in Ruby after you make a transaction; you can't get it from the nonce in Ruby?

[jeffcarp]

@pdg137 that's correct - the nonce doesn't contain any information within itself, it just points to a payment method in the gateway.

[jeffcarp]

Closing - let me know if you have any other questions 😄

[avidas]

Was looking for this exact feature 👍

[ghost]

Looking for same feature in Java. I want to retrieve the billing address using the Braintree nonce, validate it, & then create a customer profile.

Is it possible to get the credit cards details (expiry info, billing address ect.) using the nonce (before creating a customer)?

[kyledetella]

@pvaibhav1510 I just commented on #109 with this:

...this sounds like an issue with your server-side integration. I would suggest opening an issue on the braintree_java library or reaching out to our support team (support@braintreepayments.com) directly.