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:
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 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 ([email protected]).