Braintree Hosted Fields Extension - Paypal and CC Type
I have hosted fields that work fine in my sandbox environment, but I was wondering how I can simulate the two I / O interface functions, namely:
- Displays the icon for the credit card type. I can register the type in the console based on the events fired (as per the docs), but wanted to know if there was an easy way to show the map image in a string?
- PayPal button integration? Considering the parameters of the posted fields, paypal is not supported, so my guess is that I need to set up a second connection of type "paypal" and pass it to the container, however this seems very inefficient.
I tried:
braintree.setup(token, "custom", {
id: "options",
paypal: {
container: "paypal-button"
},
/* hosted fields stuff */
});
.. but it didn't do anything.
If anyone from BT could direct me to these two questions, that would be greatly appreciated.
Thanks
David
source to share
I work at Braintree on the JavaScript SDK team.
As for the render image icons, since you have access to the map types via the onFieldEvent callback , you can switch the cool names on the element and adjust the appropriate CSS to render the icons. Here's 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 problem, PayPal should work as long as it's enabled in your dashboard. The code you provided above is correct. If you still have problems with this, I recommend contacting our support team ( support@braintreepayments.com ).
source to share
Checkout below demo to integrate hosted fields in Braintree with custom styles and image based card type with built in custom validation rules.
Braintree Hosted Fields integration with custom styling (css) and validation
source to share