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

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

• javascript
• meteor
• paypal
• braintree

• PayPal is supported with the drop in, have you enabled/linked PayPal in the Braintree Control Panel? – Matthew Arkin Commented Jun 7, 2015 at 1:43
• Hi - I have it working fine in the drop-in, my question relates to using hosted fields (beta) – dsc Commented Jun 7, 2015 at 9:36
• Whoops, I meant hosted fields. Best bet would probably be to email support – Matthew Arkin Commented Jun 7, 2015 at 10:17
• Did you ever figure out how to do hosted fields + paypal? – tofutim Commented Feb 26, 2016 at 20:56

2 Answers 2

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 remend reaching out to our support team ([email protected]).

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