XCentium Launches Braintree Plugin for Sitecore OrderCloud

Reach more buyers and drive higher conversion

With Sitecore's acquisition of OrderCloud B2B e-commerce platform comes a host of opportunities to create great customer experiences in new business domains. As its name suggests, Sitecore OrderCloud® is a cloud-based offering. It's API-first, headless architecture and extensibility focused design make it an idea candidate for integration with the Sitecore® XP. Being extensibility-focused also means plugins (or integrations in OrderCloud’s terminology) will need to be written to fully leverage the platform. To this end, XCentium has developed an integration for Sitecore OrderCloud platform with Braintree®, a best-in-class payment gateway from PayPal® that should be familiar to developers that have worked with Sitecore Experience Commerce™. Braintree's wide range of payment types (credit cards, digital wallets, ACH, etc.), extensive documentation, and easy sandbox account creation make it a perfect choice for integrating with Sitecore OrderCloud.

Braintree Integration Highlights:

• Supports Braintree's web client-based payment method nonces for no-hassle PCI compliance
• Maps OrderCloud buyers, credit cards, and payment entities to Braintree vault/payment methods and transactions
• Uses OrderCloud webhooks to enable customer-specific requirements for settlement

To develop this integration I had to take care of some prerequisites

• Get a free Braintree Sandbox Account
• Get an OrderCloud Account + populate it with commerce data.
• Create a free ngrok Account
• Fork the OrderCloud headstart SDK

Then I performed the following steps,

• First, I installed the Braintree server SDK on the headstart middleware application
• Created an endpoint to generate a Braintree client token on the headstart middleware application
• Installed the npm Braintree drop-in UI in the headstart angular application with types courtesy of @types/braintree-web-dropin

• Added an angular component to call the Braintree drop-in UI with hooks to pass the payment method nonce back to the headstart middleware application

• Added a Braintree integration project modeled and built out the required functionality
  • Create Customer
  • Add Payment Method
  • Authorize Sale
  • Settle Transaction
• Configured ngrok to route webhook requests to my local machine for testing purposes
• Create a webhook in the Sitecore OrderCloud portal that calls my middleware service after the order is submitted and then settles the payment with Braintree.
  • This can also be done before submitting the order using a pre-hook or after the order is shipped based on business requirements.

 References: 

• Sitecore Order Cloud Documentation
• Braintree Documentation