A New and Improved Drop-in UI for Web

At Braintree, we want to make it as easy as possible for our merchants to start accepting payments. Our Drop-in UI is the easiest way to hit the ground running with integrating your website or app with Braintree while meeting eligibility for PCI SAQ-A validation.1 With only a few lines of code, our pre-made UI allows you to accept credit cards, PayPal, and more in desktop and mobile browsers. Earlier this year, we announced our remodel of mobile Drop-in, and now we're excited to do the same for the web.

At its core, Drop-in remains the same integration: a clean, pre-made UI for accepting payments. This includes the configuration option to choose between a one-time guest checkout flow or a vaulted checkout that renders saved payment methods associated with a customer. We’ve also learned a lot through user testing, merchant feedback, and multiple iterations since Drop-in’s initial release.

Here are some of the exciting changes you’ll find in the latest version of our Drop-in UI for web:

  • A refreshed UI: Our designers have been hard at work crafting a brand new UI to help give your customers the best experience possible. We've created a more flexible solution, whether you accept multiple payment options or just one.

  • Localization: Drop-in for web is now available in 23 locales, allowing you to more easily accept payments from even more places.

  • Customization: Unlike the previous version of Drop-in for web, this version lives directly on your page. This means you can apply custom CSS to update the UI to perfectly match your site. To learn more about customizing your Drop-in integration, check out the Braintree developer docs.

  • Open source and open development: We work on our Drop-in projects on GitHub, so you can see exactly what we've been working on and even contribute!

    Go ahead and try it out with a test card value (e.g. 4111111111111111):

    To see an example with PayPal enabled, see the demo in our developer docs.

    Ready to explore the new Drop-in UI for web? Check out our developer docs or the braintree-web-drop-in GitHub repo to get started! And if you have any questions, don’t hesitate to reach out to our Support team.

    1. Subject to the merchant (i) integrating the Drop-in UI strictly in accordance with our developer guidelines and (ii) not storing cardholder data in the merchant’s environment. Note that Level 1 merchants are required to have an on-site assessment plus a Report on Compliance completed by a QSA to fulfill PCI SAQ-A validation.

  • ***
    Lila Conlee Lila is part of the Developer Experience team in Chicago. When not writing JavaScript, she likes cats and movie talking. More posts by this author

    You Might Also Like