Fedearted Payment in Sitecore Commerce

Most businesses are going online from just being physical, online shopping is the simplest and biggest example. Online businesses mainly involve, selling of services or products. This transformation from physical to online brought the world closer. While sitting in Sydney, I can order something from United States. With many advantages, there are challenges as well of course. I am writing about one of the challenges here, providing multiple payment options to your customers.

Customers around the world have different preferences for making payments. Some might prefer direct credit card(CC) payments while others may like Paypal. And with every passing day, new methods of online payment are being introduced e.g. digital wallets like Google pay or Apple Pay. Venmo is another very famous payment option.

As an online seller, it’s important to realize the fact of having payment options on a website as per the preferences of our customers. Otherwise, bounces are nightmares 🙂 Integration to all those payment methods is, of course, going to be challenging.

But Braintree resolves this issue with ease. Braintree is a federated payment integration method which provides integration to many payment options e.g. CC, Paypal, Venmo, Digital wallets etc.

On a Sitecore Commerce website, we had to integrate Paypal. We had the option to integrate Paypal directly but we choose Braintree.

What is Braintree:
Braintree is Paypal service for integrating Payment options to online business. It provides integration to multiple payment methods e.g. CC, Paypal, Venmo, Digital wallets. So you integrate once and start using as many payment options as you want, by merely changing the configurations

Braintree has certain advantages over other methods:

1. Federated experience: You have to integrate only to Braintree but you can use multiple payment options
2. Centralized Finance management: If you have multiple payment options on the website, the finance team can just use Braintree for reconciliation purposes.
3. PCI Compliant: Fully PCI compliant so you don’t have to worry about compliance for any payment option you expose through Braintree.
4. Maintainability: You write just one piece of code for integrating to different payment options.
5. Safety: It’s considered one of the safest payment options online.

 

Sitecore Commerce and Braintree, Satellite View:

 

SatelliteView

Braintree has sandbox and production environments. Sandbox is used for initial integration and testing while production is used when we go live.

In order to do Integration with Braintree, we need to

  1. Create a storefront API to get client token from Braintree. This will call Commerce Engine API to get token
  2. Call this API from frontend client to get token and generate Paypal button.
  3. Create a storefront API to Settle the payment
  4. Call this API from frontend. This API accepts PaymentNonce which will be passed by the frontend client. This API calls Commerce Engine Settle Payment API.

The details of these steps would follow the below diagram.

Complete Flow

 

Account Setup

  1. Setup Braintree sandbox merchant account. We can create an account here
  2. We will need a Paypal sandbox account as well which will be connected to Braintree. A Paypal sandbox account can be created here.
  3. Link Paypal account to Braintree using Braintree Portal. Once you get the Braintree account, you can Login here
  4. Braintree account comes with private and public API keys which are used to do transactions. Find more details . Once you login to Braintree portal, you can see these keys under the API menu.


Generate Paypal Button

Load Braintree’s Javascript SDK and initialize using a Drop-In UI. We opted to use drop-in UI because it is a complete, ready-made payment UI for secure payments. Just include this script in your page <script src=“https://js.braintreegateway.com/web/dropin/1.19.0/js/dropin.min.js”></script>
After that, we just need to create an object and a callback function which is called when the customer clicks Paypal Button. This is how JS code look like

ClientCode
For more information on drop-in UI visit here.  You will find all the examples

Commerce Engine Setup and APIs

In Sitecore Commerce Engine, we need to install the Braintree .NET library. Install the below package using Package Manager(PM)
https://developers.braintreepayments.com/client_libraries/dotnet/Braintree-4.12.0.zip
PM> Install-Package Braintree

Commerce engine will serve as the middle layer that will directly call the Braintree, such as generating client token and creating a sale transaction request.

Configure the environment and API credentials
ServerConfiguration

Generate Client Token. The server is responsible for generating a client token, which contains all authorization and configuration information your client needs to initialize the client SDK to communicate with Braintree. We can also pass a customer-id when generating the client token to let the returning customers select from previously used payment method options, improving user experience over multiple checkouts.
GenerateClientToken

Processing payments. To create a transaction, we must include an amount and payment method nonce. We can pass an option to settle the payment immediately or do authorization first and then settle. We can also pass the additional information such as customer details, shipping details and cart data.
ProcessPayment

I haven’t covered the Storefront APIs because those APIs would just relay the control to commerce engine.

Happy coding guys!!!

Leave a Reply