By Sreeram Vasudevan and Victoria Lo

Photo by Daniel Ruyter on Unsplash

The Braintree SDK offers a comprehensive set of products that make it easy to accept payments in an app or website. We present to you our Braintree demo playground that showcases the capabilities of Braintree and the solutions it provides.

Motivation

Braintree offers two suites of SDKs. The client SDK securely collects the payment information from the customers. The server SDK acts on collected payment information and takes care of all the industry-specific regulations (PCI compliance, etc.,) without the merchant having to do anything.

We built this demo playground to provide a simple tool to exhibit the accept payment scenarios.

Braintree Demo Playground

Our demo playground helps you explore and test Braintree SDKs without having to integrate one on your website. You can use the Braintree playground to:

• Understand how Braintree helps merchants accept payments by interactively seeing what happens in the client side and the merchant’s server end.
• Explore the server SDKs in an API-like fashion to better understand their functionality.
• Try out a demo shopping experience that integrates Braintree’s capabilities to support card payments, PayPal Wallet, and local payment methods. You can also test webhooks for event notifications.

Prerequisites

We built this playground for those who want to understand how Braintree works and showcase its abilities for pre-sales pitching with merchants or for technical workshops. To try out this demo, you need to have:

1. A Braintree sandbox account
2. A PayPal sandbox account that is linked to the Braintree sandbox account
3. Local payment methods enabled in the PayPal sandbox account for certain geographical options like Alipay. This is optional.

How the Demo Works

The Braintree playground displays a landing page where you can get an authorization to initialize your client SDK. This may be a generic authorization, or a specific client token tied to a customer.

This landing page lets you see a simple drop-in payment flow using a credit card to complete one of the following actions:

• Verify the card details for 3DSecure.
• Complete a transaction using the secure string identifier, also called a nonce, from the card details provided by the customer.
• Store a new payment method to the customer vault.

Figure 1: Drop-in Payment experience (Courtesy: BT playground)

The 3DSecure feature gives a two-factor authentication experience, entering a one-time password (OTP). You can verify the details of a transaction in the Braintree control panel under transactions, as shown in figure 2. In the case of storing a new payment method, typically a credit card, the payment method can be used only when a specific token is obtained for a customer.

Figure 2: 3DSecure verification (Courtesy: BT playground)

A successful payment experience can be seen as shown in figure 3:

Figure 3: A sample successful transaction (Courtesy: BT playground)

A similar experience can be seen using hosted fields. Also, a sample PayPal Wallet integration is included in Braintree playground that can be accessed on the left navigation menu.

Figure 4: Hosted fields checkout experience (Courtesy: BT playground)

Demo Shopping Site

A major feature of the Braintree playground is a demo shopping website, Braintree Shopping Playground, that showcases the payment experience in a simulated e-commerce website. This can be accessed on the left navigation menu.

Figure 5: Demo shopping website (Courtesy: BT playground)

To get started, you can configure the demos with their own Braintree sandbox credentials by entering a Merchant ID, public key, and private key.

In addition, there are other configuration settings you can customize on the website. For example, you can choose to enable or disable different payment options like credit card, PayPal Wallet, and local payment methods (depending upon the configured country and currency of purchase). PayPal Pay Later upstream presentment messaging is also supported if it is available in your merchant account’s country.

Figure 6: Configuring the demo (Courtesy: BT playground)

A sample PayPal Wallet payment experience looks like this:

Figure 7: PayPal wallet payment experience (Courtesy: BT playground)

API Portal

To satisfy the developer palate, we added an API playground that can be accessed from the left side menu from the landing page.

This offers a variety of server SDK features that can be used as an API.

Figure 8: API playground (Courtesy: BT playground)

Our Experience

Building this demo was truly a joyful experience, as we got to really dig deep and see how much Braintree has to offer. We enjoyed creating a better experience for users to see and test Braintree’s capabilities.

This demo was built using HTML, CSS, JavaScript, NodeJS and Braintree SDKs.

Next Steps

If you need a fast, secure, and reliable payment solution, refer to Get Started -Braintree Developer Documentation

To check out our Braintree demo, visit BT playground.