Magento2 Checkout : How to display Braintree Credit card details on Custom step "Review"

Question

I've added a new checkout step "Review" & using Braintree credit card method.

On review step, I need to display user entered cc details like last4digits, expirationMonth, expirationYear.

As Braintree uses "Hosted fields" concept I'm not able to fetch these details through normal flow.

Braintree uses iframe for cc section. Any suggestions or help on this is appreciated!

Thank you!

Answer 1

_{Full disclosure: I work at Braintree. If you have any further questions, feel free to contact support.}

The last 4 digits of a card are available in the tokenizePayload returned from successful tokenization of a card using Hosted Fields in the details object. As an example, you could use something like this:

hostedFieldsInstance.tokenize(function (tokenizeErr, payload) {
  if (tokenizeErr) {
    console.error(tokenizeErr);
    return;
  }
  // If this was a real integration, this is where you would
  // send the nonce to your server.
  console.log('Last 4 digits: ' + payload.details.lastFour);
});

With that said, the expiration month and year are not returned in the tokenizePayload. However, if you're using Braintree's Vault, you can access this information by performing a Customer.create() API request with the payment method details from Hosted Fields prior to your review step. If successful, the customer response object will contain an array of payment methods and their relevant payment method details. Here's an example in Ruby of what that may look like:

result = gateway.customer.create(
  :payment_method_nonce => nonce_from_the_client
)
if result.success?
  # "customer ID: " + result.customer.id
  # "token: " + result.customer.credit_cards[0].token
  # "last4: " + result.customer.credit_cards[0].last_4
  # "exp month: " + result.customer.credit_cards[0].expiration_month
  # "exp year: " + result.customer.credit_cards[0].expiration_year
else
  # handle errors
end

Keep in mind, you can only use a payment method nonce once. If you use this method, you'll need to perform your Transaction.sale() API request using the resulting payment method token from the Customer.create() API request.