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


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=""></script>
el = document.querySelector('braintree-ui')
function makePayment (nonce) {
     .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) {
   // { nonce: "tokencc_bh_kz4r7k_7c2fsp_4qyf6q_wb5vmy_6y8", ... }



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

localStorage.debug = "braintree-ui:*"

Sandbox Example

Example cards
Card NumberCard TypeResponse
4000111111111115VISAProcessor Declined
4000000000001000 (Jan, 2 years from now)VISA3D Secure no challenge
4000000000001091 (Jan, 2 years from now)VISA3D Secure challenge success
4000000000001109 (Jan, 2 years from now)VISA3D Secure challenge failure

More information, see Braintree Card Testing

this example is using a sandbox account

Loading Demo, Please Wait

Demo Actions

API Options

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


amountdata-amountstring""Defines transaction amount as attribute to pass to braintree.

Required for 3D Secure, and Google Payment
buttonRemoveddata-button-removedbooleanfalseButton Removed

Enable the button responsible for tokenise, enabled by default can be
set to false to allow for custom tokenise integration.
buttonTextdata-button-textstring"Pay Now"Button Text

The label for the button text when not in spinner state

Default option:
- Pay Now
currencyCodedata-currency-codestring"GBP"ISO4217 Currency code the given amount is defined using.

Required for Google Payment
enabledPaymentMethodsdata-enabled-payment-methodsstring[]Payment methods to display
Defaults options: ["hosted-fields", "paypal"]

<braintree-ui data-enabled-payment-methods="[\"hosted-fields\"]"></braintree-ui>
N.B. The given property must be an valid JSON array string. Double quotes are mandatory in JSON.

Available Options:
- hosted-fields
- paypal
- google-payment
- apple-pay - When enabled will only show on supported devices/browsers. macOS with TouchID (or via iOS device), iOS with TouchID/FaceID.

Note: Apple Pay requires Domain Registration
errorMessagedata-error-messagestring""Display a Braintree related error message, ideal for server side errors when attempting transactions.
googleMerchantIddata-google-merchant-idstring""Google Pay Merchant ID

Required for Google Pay production mode
isLoggedIndata-is-logged-inbooleanfalseBoolean value to let the component know if the user is currently logged in, defaults to false.
isThreeDSecureEnableddata-enable-three-d-securebooleanfalseToggle to Activate or disable 3D Secure. Allows shift of fraud liability to card issuer.

Note: You'll need to use a Client Token instead of a Tokenization Key for token
prefillCardNumberdata-prefill-card-numberstring""Prefill Hosted Field Card Number

Primarily used in Automation tests.
prefillCvvdata-prefill-cvvstring""Prefill Hosted Field CVV

Primarily used in Automation tests.
prefillExpiryDatedata-prefill-expiry-datestring""Prefill Hosted Field Expiry Date

Primarily used in Automation tests.
themeLabelModedata-theme-label-modestring"outside"Label display mode

Available options:
- outside
- edge
tokentokenstring""A Braintree Client tokenization key that authorizes this client to tokenize payment information.

This tokenization key can be shipped with application without the need to generate a new key for each session.

Learn more about tokenization keys

Note: If you're using 3D Secure you'll need to generate a JWT Signed Client Token, learn more about client tokens.


completeDispatch this event to the component when you've successfully completed a transaction or when the transaction has failed from your server.
errorHandle the human readable display of a Server Side error, and allow the user to change payment method. List of all Braintree errors.
payloadDispatched when the payment is payment method has been provided

CSS Custom Properties

--braintree-ui-border-radiusBorder radius of Payment Methods (default: 0.4rem)
--braintree-ui-color-primaryPrimary color for Titles, and Labels (default: #032f61)
--braintree-ui-gap-spacingControls the gap between block elements (default: 1rem)