Extending Braintree hosted fields - Paypal & CC type

Question

I've got the hosted fields working fine in my sandbox environment but was wondering how I can mimic two features of the drop-in UI, namely:

1. Showing an icon for the credit card type. I can log the type in the console based on events firing (as per docs) but wanted to know if there was an easy way to show the card image inline?
2. Integrate a paypal button? Looking at the hosted fields options, paypal is not supported so my guess would be I need to setup a second connection with the type "paypal" and pass in the container, however this seems very inefficient.

I did try:

braintree.setup(token, "custom", {
  id: "options",
  paypal: {
    container: "paypal-button"
  },
/* hosted fields stuff */
});

.. but that didn't do anything.

If anyone from BT could guide me on these two questions it would be much appreciated.

Thanks,
David

Answer 1

I work at Braintree on the JavaScript SDK team.

Regarding rendering card icons, since you have access to the card types via the onFieldEvent callback you can toggle classnames on an element and setup corresponding CSS to render the icons. Here is a generalized example:

HTML

<form id="checkout" method="post" action="/pay">
  <div id="card-number-container">
    <label for="number">Card Number</label>
    <div id="number"></div>
  </div>

  <div>
    <label for="cvv">CVV</label>
    <div id="cvv"></div>
  </div>

  <div>
    <label for="expiration">Expiration Date</label>
    <div id="expiration"></div>
  </div>

  <input type="submit" value="Pay" />
</form>

CSS

#card-number-container {
  background-repeat: no-repeat;
  background-position: right;
  background-position: right 10px center;
}

#card-number-container.visa {
  background-image: url("../images/icons/visa.png");
  -webkit-background-size: 28px 19px;
  background-size: 28px 19px;
}

#card-number-container.discover {
  background-image: url("../images/icons/visa.png");
  -webkit-background-size: 28px 19px;
  background-size: 28px 19px;
}

// ... and so on

JavaScript

var $cardNumberContainer = $('#card-number-container');

braintree.setup(TOKEN, 'custom', {
  id: 'checkout',
  hostedFields: {
    number: {selector: '#number'},
    cvv: {selector: '#cvv'},
    expirationDate: {selector: '#expiration'},
    onFieldEvent: function (payload) {
      $cardNumberContainer.removeClass('visa master-card discover jcb american-expres diners-club maestro');

      if (payload.card) {
        $cardNumberContainer.addClass(card.type);
      }
    }
  }
});

---

As for your second issue, PayPal should work as long as it is enabled in your Control Panel. The code you presented above is correct. If you are still having trouble with that, I recommend reaching out to our support team (support@braintreepayments.com).

Answer 2

Checkout below demo for Braintree hosted fields integration with custom styles and on the basis of card type show card image inline with custom validation rules.

Braintree Hosted Fields integration with Custom Stylesheet(css) and validation