braintree-ui

Allow your projects to take payments in as few lines of code possible.

Credit cards, PayPal, Apple Pay, Google Pay and Venmo, supported only.

Testing Credit Cards | PayPal | Apple Pay | Google Pay | Venmo

Usage

This component requires no dependencies, use the <braintree-ui/> HTML custom element where you wish to display. Ensure to import the script somewhere on your page.

Consume the payload event, which gets emitted when a valid payment method is chosen and completed by the user.

<braintree-ui token="{{ CLIENT_TOKEN }}" data-amount="0.01"></braintree-ui>
<script src="https://uicomponent.live.payments.maginfrastructure.com/payments.js"></script>
<script>
el = document.querySelector('braintree-ui')
function makePayment (nonce) {
   fetch('https://example.com/checkout')
     .then(response => response.json())
     .then(result => {
       // Pass the result through to the component.
       // Expected format:
       // {
       //  success: Boolean,
       //  verification: {
       //    status: String("processor_declined|processor_declined"),
       //    gatewayRejectionReason: String
       //  }
       // }
       el.dispatchEvent(new CustomEvent('complete', { detail: result }))
       if (result.success) {
         alert('Payment successful')
       } else {
         el.dataset.error = 'There was an error'
       }
     })
}

el.addEventListener('payload', function(event) {
   console.log(event.detail)
   // { nonce: "tokencc_bh_kz4r7k_7c2fsp_4qyf6q_wb5vmy_6y8", ... }
   makePayment(event.detail.nonce)
})

</script>

Debugging

To view debugging in DevTools Console, enable the debug key on LocalStorage.

localStorage.debug = "braintree-ui:*"

Sandbox Example

Example cards

More information, see Braintree Card Testing

this example is using a sandbox account

Demo Actions

API Options

Properties and events that can be used to interface with this Web Component.

Properties

Events

CSS Custom Properties