Ampliación de los campos alojados de Braintree: tipo Paypal y CC

Tengo los campos alojados funcionando bien en mi entorno de espacio aislado, pero me preguntaba cómo puedo imitar dos características de la interfaz de usuario integrada, a saber:

  1. Mostrando un ícono para el tipo de tarjeta de crédito. Puedo registrar el tipo en la console en function de la activación de events (según los documentos) pero quería saber si había una manera fácil de mostrar la image de la tarjeta en línea.
  2. Integrar un button de PayPal? En cuanto a las opciones de campos alojados, no se admite PayPal, así que supongo que necesito configurar una segunda connection con el tipo "paypal" y pasar el contenedor, sin embargo, esto parece muy ineficiente.

Lo intenté:

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

.. pero eso no hizo nada.

Si alguien de BT pudiera guiarme en estas dos preguntas, sería muy apreciado.

Gracias,
David

Trabajo en Braintree en el equipo JavaScript SDK.

En cuanto a los icons de tarjeta de representación, dado que tiene acceso a los types de tarjeta a través de la callback onFieldEvent , puede alternar nombres de class en un elemento y configurar el CSS correspondiente para representar los icons. Aquí hay un ejemplo generalizado:

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); } } } }); 

En cuanto a su segundo problema, PayPal debería funcionar siempre que esté habilitado en su Panel de control. El código que presentó arriba es correcto. Si sigues teniendo problemas con eso, te recomendamos contactar a nuestro equipo de soporte (support@braintreepayments.com).

enter image description here Checkout debajo de la demo para la integración de campos alojados en Braintree con styles personalizados y sobre la base del tipo de tarjeta que muestra la image de la tarjeta en línea con reglas de validation personalizadas.

Integración de Braintree Hosted Fields con Custom Stylesheet (css) y validation

    Intereting Posts