Simplifying Braintree Integration with Mendix: A Step-by-Step Guide by EvonSys

In today's digital age, online payments have become the lifeblood of businesses, enabling seamless transactions with customers around the world. But have you ever wondered how these payments are processed securely? That's where payment gateways come into play, safeguarding both businesses and customers from potential risks.

What is Payment Gateway? 

Businesses need payment gateways to securely process and accept online payments from customers. Payment gateways provide a secure way for businesses to collect payments electronically, including credit card and debit card transactions, as well as other forms of digital payments such as e-wallets, mobile payments, and bank transfers.

Without a payment gateway, businesses would have to process payments, which can be time-consuming and error-prone manually. Moreover, without a secure payment gateway, there is a risk of fraud and data breaches, which can damage the business's reputation and put customers' sensitive information at risk. 

Businesses can benefit from secure payment processing, fraud detection and prevention, multiple payment options, and seamless integration with their website or mobile app by using a payment gateway. This enables businesses to provide a better customer experience, increase sales, and grow their revenue while ensuring the security and privacy of their customer's data. 

What is Braintree? 

Braintree is a payment gateway that enables businesses to accept online payments securely and efficiently. It was founded in 2007 and is now a subsidiary of PayPal. Braintree's platform provides a simple and secure way to accept payments from customers worldwide in multiple currencies and payment methods. 

Braintree offers a range of payment options, including credit and debit card payments, PayPal, Venmo, Apple Pay, Google Pay, and more. It also supports recurring billing, which is helpful for businesses that offer subscription-based services. 

Steps to Integrate Braintree with Mendix

This blog will explain the steps of integrating Braintree with the Mendix app to achieve Braintree payments. These simple steps help you to achieve easier.

Step 1: Create Braintree Sandbox Account 

Create a new Braintree sandbox account using the link below to sign in with your credentials. 

https://www.braintreepayments.com/sandbox. 

Step 2:  

Visit the dashboard for your account and click on the settings icon >click on API. 

Click on View 

 The Public key, Private key, and Merchant ID will be visible in the dashboard. 

**Copy those values and Make a note for future reference. ** 

How can this be tested with POSTMAN? 

Step 3: 

 Let’s test with Postman first. 

1. a) Location: https://payments.sandbox.braintree-api.com/graphql (sandbox URL)z
2. b) Username: ‘Braintree Api Public key’.

      c)Password: ‘Braintree Api Private Key’. 

      d)Content-Type: ‘application/json’. 

      e)Braintree-Version: ‘2023-01-01'. 

Get the Request body and Response Body using the below link: 

https://drive.google.com/file/d/1sfAAuUQP5gp5Yzjq_GyZk_vIEbKAAdcl/view?usp=drivesdk 

**Make a note for future reference. ** 

Create Customer: 

Create Payment Method Id: 

In Request Body: 

PaymentMethodID value as ‘fake-valid-nonce'. 

customerId value as ‘id value’. (Response Of Create Customer)  

Follow the link below to choose PaymentMethodId. 

Testing | Java - Braintree Developer Documentation (paypal.com).

Create Transaction 

In Request Body: 

PaymentMethodId value as ‘id value’ (response of Create Payment Method Id). 

Transaction Status: 

In Request Body: 

in value as ‘id value’ (response of Make Transaction). 

How can this be implemented in Mendix? 

Step 4: Create a Customer 

Create another call rest-activity with the POST method. 

General: 

**Note: Use the same Location for Create Payment Method Id, Create Transaction, and Transaction Status APIs.** 

HTTP Headers: 

 
**Note: Use the same HTTP Headers For Create Payment Method Id, Create Transaction, and Transaction Status API’s. ** 

Request Body: 

Choose “Custom Request Template” from the request tab, then enter the request body as shown. In order to take the snip, I inserted some static values. Variables may be used however you choose. 

You can Get the Request Body from the link mentioned above. 

Note: Choose the above image as the Custom Request template for other REST service activities.

Then, as usual, using the Postman response from "create customer," construct a new import mapping using the JSON returned. In the Response tab, make use of the newly established import mapping (apply import mapping)

Response 

Step 5: Create Payment-Method Id 

Create another call rest-activity with the POST method 

Request Body: 

You can Get Request Body from Above Mentioned link 

Follow the link below to choose PaymentMethodId. 

Testing | Java - Braintree Developer Documentation (paypal.com). 

Then, as usual, using the Postman response from “create Payment-Method Id,” construct a new import mapping using the JSON returned. In the Response tab, make use of the newly established import mapping (apply import mapping). 

Response 

Step 6: Create a Transaction 

Create another call rest-activity with the POST method 

Request Body: 

You can Get Request Body from Above Mentioned link.

Then, as usual, using the Postman response from “create Transaction,” construct a new import mapping using the JSON returned. In the Response tab, make use of the newly established import mapping (apply import mapping). 

Response Body: 

Step 7: Transaction Status 

Create another call rest-activity with the POST method 

Request Body: 

You can Get Request Body from Above Mentioned link. 

Then, as usual, using the Postman response from “create Transaction,” construct a new import mapping using the JSON returned. In the Response tab, make use of the newly established import mapping (apply import mapping). 

Response Body: 

Step 8: Create a page in your Mendix Project. 

 Page: Payment Status Page like below. 

**Note: Images you need to add. ** 

Set visibility condition for a container of Payment Successful as  

Set visibility condition for a container of Transaction Failed as  

Finally, the microflow should be like this 

Step 9: Configure the Navigation 

Connect this microflow to Navigation. 

Step 10:  Run the Application 

Click On Demo   

If Payment Success, it shows like this.

If Payment Failed, it shows like this.

Step 10: 

Go to the Braintree sandbox dashboard > Transactions > Search and the Payments tab to view your payments and their status. 

Visit our Marketplace Module at https://marketplace.mendix.com/link/component/210320 to explore the seamless integration of Braintree into your application, empowering you to offer secure and convenient payment options to your customers. Don't miss out on enhancing your payment processing capabilities and elevating your business to new heights.