Yasen Deyanov · Follow
Published in · 16 min read · Apr 5, 2019
--
April 5, 2019
Do you have an eCommerce business? Do you offer complex FinTech services? Do you want to be ahead of your competitors and provide your customers with seamless, secure and different payment methods? Do you want to accept Web and Mobile payments? Do you want to drive higher conversions and boost your revenue?
If your answer is YES, you need to read this guide and get to know, how to implement a simple but yet powerful solution like the Braintree’s payment processing solutions.
Braintree is a payment processing system that allows you to install it on your website or eCommerce platform and receive payments, online. With Braintree, you can accept payment methods like credit cards, debit cards, PayPal, Apple Pay, Bitcoin, and more. The company provides global commerce tools people need to build businesses, accept payments, and enable commerce for their users. Merchants from more than 40 countries worldwide can accept, split, and enable payments in more than 130 currencies using Braintree. You can use the system and implement it to Android, iOS or other WEB Apps. Braintree will support merchants like you to accept payments across any device and through almost any payment method. They offer stellar support, innovative concepts, and simple processes — from your first dollar up past your billionth.
The merchants benefit from a set of features. Some of them are Fraud Protection, Reporting, In-store Payments, Data Security, Global Scale, Different Payment Methods, Payouts, and more.
It helps to detect and prevent fraudulent transactions while approving more orders. The Fraud Tools are a set of customizable rules that allow you to protect your account against carding attacks or other fraudulent activity. They are available at no extra cost to all merchants, regardless of size or processing volume, and do not require any developer work to set up.
Maybe most of you already sell or planning to sell something online. And maybe you already are familiar with PayPal and its services. You can easily install and use PayPal for your payment gateway to receive online payments, but you will have some limitations. Typically, the maximum amount you can receive through PayPal payments per year is limited up to $2500 USD.
On the other hand, if you decide to choose other payment service provider like the American BMT Micro to have additional restrictions and does not allow you to cash out less than $50 USD. Using such kind of services will lead you to huge losses because bank transfers will cost you $20 or more USD. To cash out your money from your PayPal account will cost you about $5 to $10 USD. Which is pretty the same. More about how much it will cost you to cash out the money from your PayPal account for offering products or services online, you can find here.
Contrary, Braintree will charge you only a percentage from every transaction you received through the time you were using their service. This percentage will vary between 2% and 5%, depends on what you will negotiate with the company’s sales specialists. Before you proceed and start using the services, you need to register and negotiate this services fee with Braintree representative. Then they will register you and you will be able to receive money online.
I have used Braintree for a personal online project. Back then, I have tested their service and bought a product from my website for 2 euro. The money that I paid, came back to my bank account in the next 2 to 3 days.
You need to know that Braintree does not cover local legislation and it is your duty to pay all your taxes. You have to do that at the end of every fiscal year, no matter if you are business or private merchant. The company offers only online payment methods to merchants like you who want to receive online payments through credit, debit cards, and other payment methods. Braintree helps you to create a seamless payments experience.
The service offers the most popular payment methods. It will reduce integration costs, meet industry standards for PCI (Payment Card Industry) compliance and lets you focus on your core business. Provides the technology, expertise, and insights you need to sell to more people — and in more ways. Braintree is payments partner that can help you fight fraudulent transactions, keep payment data secure, and take the pain out of PCI compliance.
There are many integration options that you can choose from. The company provides client and server SDKs to complete your integration. From the client-side SDKs, you can choose between Android, iOS, JavaScript. From the Server-side SDKs, you can choose between Java, .Net, Node.js, PHP, Python, or Ruby.
The client SDKs enable you to securely collect payment information from your customers. The server SDKs enable you to act on the collected payment information. The client SDKs require authorization.
To interact with the Braintree gateway, client SDKs require a form of authorization. You can define what clients can do by the types of authorization you provide to them.
Authorization types
There are two forms of client authorization available:
- A tokenization key — a lightweight, reusable value that authorizes payment method tokenization.
- A client token — a single use value that authorizes payment method tokenization, payment method retrieval, and client-side vaulting.
Capabilities
When to use tokenization keys?
The keys do not require any interaction with your server until after payment information is tokenized. Tokenization keys are ideal to be used if you want to collect payment information to hand off to your server.
They are also useful for situations where you want to tokenize payment information.
When to use client tokens?
If you want to use the full range of Drop-in functionality, you need to use client tokens. If you want customers to save their payment methods directly from your client or want to present returning customers with a list of their saved payment methods, then you have to use client tokens.
If you want to use both methods
If you want to allow both registered users and guests to make purchases, you may wish to use both, tokenization keys and client tokens. To do this, you have to instantiate a new Braintree instance with your authentication method of choice.
More about tokenization keys, you can find here. More about client tokens, you can find here.
For the purposes of this article, we are going to use PHP and JavaScript v3 options and use them for our testing environment. Tokenization keys will do everything you need if you don’t manage customers in the Vault.
From the image above, you will find out our client application. The first step using this implementation method is to connect this application with the back end of your server. This way you will receive one token. See steps 1 and 2 from the picture above. In a nutshell — your app or website request a client token from your server in order to initialize the client SDK.
Then the client application will create the widget that you are going to use for the payments. Your server will generate and send a client token back to your client with the server SDK.
Creating the widget and having the token created by your server allows you to connect the Braintree’s server and to receive a new object called payment nonce. In other words, once the client SDK is initialized and the customer you have submitted payment information, the SDK communicates that information and returns a payment method nonce.
What is a payment nonce? A payment nonce is a payload object that is having the whole payment required information.
Then, you send back the payment method nonce to your server. Step number four. And when your server receives this Nonce, it sends it to the Braintree’s Server. This is the fifth and final step.
Once the Braintree server responds with success in the response of sending that Nonce to it, the payment is complete, and you can deliver the product(s) to your customer. Additionally, you may decide to save that payment information to your own database for future usage or send a “Thanks for your order” email to the customer.
There are no differences between the Sandbox and the Production environments. You can log in to sandbox from the main website URL — www.braintreepayments.com. Find the Log In button. It is in the upper right corner. Click on it and from the drop-down menu choose the login to sandbox option.
There you go. You have entered to the sandbox control panel. There you will find many options and settings and reports. If everything in sandbox works well, you will need to change the main keys and implement all these settings to your real production environment.
Sandbox is perfect for integration and testing. There are no differences between the Sandbox and Production environments. You can do some tests from here: https://developers.braintreepayments.com/guides/credit-cards/testing-go-live/php#valid-card-numbers. Once your project is fully tested, you can change your sandbox credentials with your production credentials in your backend SDK configuration, and you will be ready to go live.
In order to process payments, you need a production account. The sign-up process is easy, and you don’t have to be a company to process real payments.
Setting up a simple project using JavaScript and PHP requires setting up the JS SDK on the front end and the PHP SDK on the backend. Setting up the JS v3 SDK lets you use the beautiful Braintree Drop-In widget to collect payment information for processing. Below is the schema of the Drop-In widget and its operation with your server.
Before explaining the steps in this schema let’s create a simple HTML that will render the Drop-In widget.
To add Drop-in to your page, you need to copy and paste the following HTML code:
<head>
<meta charset=”utf-8″>
<script src=”https://js.braintreegateway.com/web/dropin/1.17.0/js/dropin.min.js”></script>
</head>
<body>
<div id=”dropin-container”></div>
<button id=”submit-button”>Request payment method</button>
<script>
var button = document.querySelector(‘#submit-button’);
braintree.dropin.create({
authorization: ‘CLIENT_TOKEN_FROM_SERVER’,
container: ‘#dropin-container’
}, function (createErr, instance) {
button.addEventListener(‘click’, function () {
instance.requestPaymentMethod(function (err, payload) {
// Submit payload.nonce to your server
});
});
});
</script>
</body>
In order to initialize the Drop-In widget, you need a valid client token.
How to get client token?
To get the client token, JavaScript SDK needs a client token to be generated by your Braintree server SDK (Steps 1 and 2 from the schema above).
The Braintree PHP SDK is available and can be downloaded from Braintree — https://developers.braintreepayments.com/start/hello-server/php
The client code generation is up to your app architecture as it can be generated in various ways. The easiest is to make and an endpoint which will return a response containing that token. This can be an AJAX call made prior to calling Braintree.dropin.create
Later in the server part code section, we will give PHP example code for the client code generation.
Once you have the client token you can pass it to the initialization object in the Braintree.dropin.create function:
authorization: ‘PUT HERE YOUR CLIENT_TOKEN_FROM_SERVER’,
Callbacks:
The callback function is triggered and if no error occurs the Drop-In instance is returned. You can save a reference to it in your frontend code for future operations like tearing down the Drop-In instance on your page if you need to do so (For example rendering it into a dialog, which you want to close and therefore you need to destroy the Drop-In instance).
braintree.dropin.create({
authorization: CLIENT_TOKEN_FROM_SERVER,
container: ‘#dropin-container’
}, function (err, instance) {
/* Put a reference in the global scope of the DropIn instance if you need it for future operations */
window.myDropIn = instance;
});
Promises:
braintree.dropin.create({
authorization: CLIENT_TOKEN_FROM_SERVER,
container: ‘#dropin-container’
}).then(function (instance) {
/* Same as above callback example */
window.myDropIn = instance;
});
Once your Drop-In Widget is initialized you can collect payment information from the customer like credit card detail and get the payload object containing the payment Nonce from Braintree, which you need to pass to your backend in order to finalize the transaction sale (steps 3 and 4 from the schema above).
This is achieved by a function called requestPaymentMethod:
window.myDropIn.requestPaymentMethod(function (requestPaymentMethodErr, payload) {
if(!requestPaymentMethodErr){
$.ajax({
type: ‘POST’,
url: ‘/checkout’, // Your backend endpoint responsible for making the sale transaction
data: {‘paymentMethodNonce’: payload.nonce,
‘selectedProducts’ : “Your products”,
‘amount’ : “your products price amount ”}
}).done(function(data) {
// You can pass that data from your backend. It can contain success or error message.
});
} else{
// Something went wrong.
}
});
Your server side code is responsible for generating your client token and making the sale transaction. It is also responsible for performing actions after payment is complete as delivering the product(s) to the customer.
One important step before implementing the backend code is to have at least a sandbox account. It contains the credentials needed to initialize the Braintree gateway. If you don’t have one, find out how from the previous paragraphs. If you have a sandbox account, log in to it and obtain your sandbox API credentials.
You will need your:
- Sandbox merchant ID
- Public Key
- Private Key
For testing and development purposes you need to use these credentials.
It is important to know that, when you go live, you will need to replace your sandbox API credentials with your production API credentials in order to process payments with real card data.
The first step of setting up the server code is to import the Braintree Server SDK and create the gateway.
Below is an example controller class used to wrap up the business logic:
class BrainTreeController extends Controller
{
public function __construct()
{
// Setup Braintree
$this->gateway = new \Braintree_Gateway([
‘environment’ => “sandbox”, //or “production”
‘merchantId’ => “Your_merchantId”,
‘publicKey’ => “Your_publicKey”,
‘privateKey’ => “Your_privateKey”
]);
}
}
Once you do that you can access gateway’s methods like generation the client token and making the transaction sale:
// Gets a client token for the dropIn UI
public function getclienttoken()
{
$braintreeClientToken = $this->gateway->clientToken()->generate([
//”customerId” => $aCustomerId
]);
if($braintreeClientToken){
echo $braintreeClientToken;
} else {
// A problem occurred. Process the error the way you prefer
}
}
The client token once generated from the server is used to feed up the client-side Drop-In widget as described in above. Now your Drop-In widget has been initialized and it can process payments. Once you collect data from the user and obtain the payload Nonce you can direct it to your backend to finalize the payment.
Below is an example function which makes the transaction sale:
// Makes the sale transaction
public function checkout(Request $request){
$error = false;
// Finally we want to make sure we have the paymentMethodNonce in the request
if(!$request->has(‘paymentMethodNonce’)){
array_push($this->ret[‘error’], ‘paymentMethodNonce missing! Aborting…’);
$error = true;
}
if(!$error){
$paymentMethodNonce = trim($request->input(‘paymentMethodNonce’));
$amount = trim($request->input(‘amount’));
$result = $this->gateway->transaction()->sale([
‘amount’ => $amount,
‘merchantAccountId’ => “Your_merchantAccountId”,
//If you do not specify a merchant Account Id the default will be used
‘paymentMethodNonce’ => $paymentMethodNonce,
‘customer’ => [
‘firstName’ => ‘customer_first_name’,
‘lastName’ => ‘customer_last_name’,
‘company’ => “customer_company”,
‘phone’ => ‘customer_phone’,
‘fax’ => ‘customer_fax’,
‘website’ => “customer_web”,
’email’ => “customer_email”
],
‘billing’ => [
‘firstName’ => ‘customer_first_name’,
‘lastName’ => ‘customer_last_name’,
‘company’ => ‘customer_company’,
‘streetAddress’ => ‘customer_address’,
‘locality’ => ‘customer_city’,
‘region’ => ‘customer_state’,
‘postalCode’ => ‘customer_post_code’,
‘countryCodeAlpha2’ => “customer_country_code_alpha_2”
],
‘shipping’ => [
‘firstName’ => ‘customer_first_name’,
‘lastName’ => ‘customer_last_name’,
‘company’ => ‘customer_company’,
‘streetAddress’ => ‘customer_address’,
‘locality’ => ‘customer_city’,
‘region’ => ‘customer_state’,
‘postalCode’ => ‘customer_post_code’,
‘countryCodeAlpha2’ => “customer_country_code_alpha_2”
],
‘options’ => [
‘submitForSettlement’ => True
]
]);
if ($result->success) {
echo (‘Payment processed successfully!’);
// your logic here to deliver the product or to send a “Thanks for your order” email
} else {
// Error
}
}
}
That’s it. Payment is processed, and you can deliver the product(s) to your customer.
Testing values
Be sure you use Braintree’s testing card numbers and nonces! If you use real payment method date in a sandbox environment, it will not work! More about that topic you can find here.
Braintree offers multiple types of payment methods. You can use their service and offer your customers the following set of payment methods:
- Credit Card
- PayPal Account
- Apple Pay Card
- Android Pay Card
- Venmo Account
- Visa Checkout Card
- Masterpass Card
- Samsung Pay Card
To learn more about how to include objects in other responses, such as Customer, read the following article.
Braintree’s Drop-In instance comes as beautifully styled widget. If the default colors may not merge well with your overall site color theme, you can easily customize the Braintree Drop-In widget by inserting custom CSS into your site. That way you can overwrite its default stylings and modify it in order to match your site colors and experience.
When accepting and storing payments, merchants must follow a set of requirements. This is a must requirement because you need to keep payment processing safe and secure. These regulations are created from card issuers, governing bodies, payment processors and private organizations. If you are not compliant you will be fined, you will experience account holds, seizure of funds and other legal actions. Braintree wants you to be safe and successful. They will do their best to make sure you understand these requirements.
What are the industry-mandated requirements?
This is a set of industry-mandated requirements for any business that handles, processes, or stores credit cards — regardless of the business’s size or location. The PCI Security Standards Council was founded by 5 of the major card brands. Each one of them shares equal responsibilities in the council’s work.
The PCI compliance process
You must fill out a Self-Assessment Questionnaire (SAQ) annually to help you determine if your payment processing setup is PCI compliant. The SAQ includes a series of yes-or-no questions for each applicable PCI DSS requirement.
Although Braintree securely stores and process card data for you, integrating with Braintree does not automatically fulfill your PCI compliance requirements. You are still required to complete the annual SAQ in order to be PCI compliant.
There are four levels of PCI compliance that indicate your level of risk and exposure. In their role as part of the PCI Security Standards Council, Visa determines how to classify your business by looking at your Visa transaction volume over a 12-month period. This transaction volume is based on the aggregate number of Visa transactions (inclusive of credit, debit, and prepaid cards) from your registered Doing Business As (DBA) name. Merchants with the highest transaction volumes are classified as level 1, while those with the lowest transaction volumes are level 4.
More about PCI security standards you can find here.
Braintree can help you to meet PCI compliance policies. Qualified Security Assessors (QSAs) are independent security individuals and organizations that have been qualified by the PCI Security Standards Council to validate an entity’s adherence to the PCI DSS. The QSA can help choose the right SAQ for your business. They can also support you through the process.
Braintree is partners with SecurityMetrics, a QSA company, to offer PCI compliance assistance to their merchants. Once your application with Braintree has been approved, you’ll receive an email explaining how to create your account with SecurityMetrics.
If you are using Braintree Direct and your business falls into level 3 or 4 of PCI compliance, they will set you up with SecurityMetrics at no cost to you. Level 1 and level 2 merchants who choose to partner with SecurityMetrics are subject to any enterprise-level account fees assessed by SecurityMetrics. This is due to the increased scope of compliance.
For more information and best answers to your specific questions, you can contact SecurityMetrics from here. There are some specifics that you need to know before taking advantage of SecurityMetrics services. You will need to wait to enroll until Braintree email you with your Merchant Account Number (MAN). The MAN needed to enroll with SecurityMetrics is different from your merchant account ID and merchant ID. Its value is not displayed in the Braintree’s Control Panel, so if you no longer have the email with this information, you have to email Braintree.
As a part of the enrolment process, you must answer a brief set of questions that will help SecurityMetrics to determine which SAQ you need to complete.
Following are the steps that you need to complete:
- Navigate to the SecurityMetrics Braintree page
- Click Sign Up and enter the email address associated with your Braintree account
- Verify your email address
- Accept the Terms of Use
- Continue through the wizard and complete the questionnaire about your credit card processing
That’s it!
The General Data Protection Regulation was created to standardize the handling of personal data across the European Union and European Economic Area. It is active since May 25, 2018, and is intended to give individuals more control over their data. Plus, to protect their right to privacy. Maybe you know that all companies that handle the personal data of EU residents — regardless of whether the actual data processing takes place in Europe or not, must comply with the GDPR requirements. Being non-compliant could result in significant fines.
To be GDPR compliant, make sure your website has:
- Cookies privacy message (a clear statement shown on all site pages until accepted that your site uses cookies).
- Privacy policy statements (general explanation of what data you collect).
- Personal data information collection statement (detailed information about user-specific data you collect — why you collect it, how you process it).
- Site terms of use (Terms and Conditions, Warranty, Liability, etc.).
It is not that hard to integrate different type of payment methods with Braintree. In this article, I provided you with a detailed guide on how to implement the Braintree’s payment gateway. Moreover, you have been introduced to some additional information about JavaScript and PHP SDKs, PCI and GDPR Compliance, and how to test your integration with different payment methods in Sandbox and Production environments.
If you are looking for more complex FinTech or eCommerce related payment processing solutions, you can give us a call, right now. ScaleFocus’ experienced engineers will provide you with custom software development solutions. This way you will be in sure hands and will be able to focus on other important business objectives.
Now, it’s your turn! Request a quote from the form below or let’s discuss your plans and assist you with the best software development solutions.
Originally published at www.scalefocus.com on April 5, 2019.
