• Twitter
  • LinkedIn

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:

Related Blogs

Latest Blogs