Prototyping an Ecommerce Application using Braintree and Mailchimp

Previously, we did deep dives into processing payments with the Braintree API and sending transactional email using the Mailchimp API. In this post, we'll leverage both Braintree and Mailchimp Transaction Email to build an ecommerce prototype.

In most ecommerce applications, after you place an order, you receive an email confirmation that lists the items you purchased. We'll build a prototype that implements this flow using Braintree and Mailchimp. We'll also use the Zero secrets manager to simplify the management of the Braintree and Mailchimp API keys.

Overview

This post will focus on just the key pieces of backend code that are needed to connect the Braintree and Mailchimp APIs into a single flow. If you would like a step-by-step guide on integrating with either of these services, please refer to the earlier blog posts that I linked above.

The code samples in this post are for TypeScript / Node.js, but feel free to adapt the code to the backend language you're working in.

Secure your secrets conveniently

Zero is a modern secrets manager built with usability at its core. Reliable and secure, it saves time and effort.

Sign Up Now

Retrieving the API Keys from Zero

As a prerequisite for this step, you should have the following values stored in a Zero project:

1. Your Braintree merchant ID, public key, and private key
2. Your Mailchimp Transactional Email API key.

Then, you can retrieve these values from your Node.js application using the Zero TypeScript SDK :

const secrets = await zero({
  token: process.env.ZERO_TOKEN,
  pick: ['braintree', 'mailchimp'],
}).fetch()

Creating a Transaction in Braintree

To create a transaction in the Braintree Sandbox, install the braintree  npm package and use code similar to the following:

const braintreeGateway = new braintree.BraintreeGateway({
  environment: braintree.Environment.Sandbox,
  merchantId: secrets.braintree!.merchant_id,
  publicKey: secrets.braintree!.public_key,
  privateKey: secrets.braintree!.private_key,
})

const amount = '10.00'

const result = await braintreeGateway.transaction.sale({
  amount,
  paymentMethodNonce: 'fake-valid-nonce',
  options: {
    submitForSettlement: true,
  },
})

Here, fake-valid-nonce is a special value supported by the Braintree Sandbox. Normally, the payment method nonce would come from a Braintree API call that happens on the client side.

Sending a Confirmation Email with Mailchimp

Now that we've processed the payment, we should use Mailchimp Transactional Email to send a confirmation to the user who placed the order. The code for this is very straightforward:

const mailchimpClient = Mailchimp(secrets.mailchimp!.transactional_api_key)

const response = await mailchimpClient.messages.send({
  message: {
    from_email: 'demo@YOUR-DOMAIN.com', // TODO Replace YOUR-DOMAIN.com with your verified sending domain
    subject: `[Demo] Thank you for your €${amount} purchase`,
    text: 'This is a demo email.',
    to: [
      {
        email: 'recipient@YOUR-DOMAIN.com', // TODO Replace this string with your email address
        type: 'to',
      },
    ],
  },
})

For this code to work, you'll need to have created a verified sending domain through the Mailchimp Transactional Email portal.

Closing Thoughts

In this walkthrough, we created a proof of concept for an ecommerce application that both processes payments (using Braintree) and sends confirmation emails (using Mailchimp). Most production applications will need to make use of multiple 3rd party services, so it's important to understand how to leverage multiple services in tandem. This post also showed how using Zero as the single source of truth for your team's secret keys simplifies application development.