最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Extending Braintree hosted fields - Paypal & CC type - Stack Overflow

programmeradmin2浏览0评论

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

Share Improve this question asked Jun 6, 2015 at 12:30 dscdsc 2223 silver badges9 bronze badges 4
  • 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
Add a ment  | 

2 Answers 2

Reset to default 9

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

发布评论

评论列表(0)

  1. 暂无评论