Headless E-Commerce Tree Planting: Integrating GoodAPI With Next.js and React

If you have moved your store off a monolithic platform and onto a headless stack, you have probably noticed that most sustainability tools assume you have not. The tree-planting and carbon apps in the Shopify ecosystem are built as themes and embedded widgets, which is great until your frontend is a custom Next.js app talking to a commerce backend over an API. At that point you do not want a plugin. You want a sustainability API for ecommerce that you can call from your own code.

This guide walks through exactly that: how to add verified tree planting to a headless storefront using GoodAPI, Next.js, and React. It is written for developers, so it gets into endpoints, server-side patterns, and the retry-safety details that matter when real orders are flowing.

Why Headless Stores Need an API, Not a Plugin

Headless commerce stopped being a niche a while ago. Research going into 2026 puts roughly 73% of businesses on some form of headless architecture, and the MACH Alliance reports that around 92% of US brands have adopted some form of composable commerce. The headless commerce market is estimated at about $2.13 billion in 2026 and projected to reach $7.24 billion by 2033. The reason teams take on the extra complexity is performance and control: faster page loads from static and edge rendering, and a fully custom checkout and customer experience.

That same control is exactly why an embedded sustainability widget does not fit. When your frontend is decoupled from your commerce backend, the place to trigger an environmental action is not a theme block. It is your server, right at the moment an order is confirmed. An API-first tool lets you put tree planting wherever your business logic already lives.

What “API-first” actually buys you

A REST sustainability API gives you three things a plugin cannot. You decide the trigger, so a tree can be planted on an order, a subscription renewal, a referral, or any custom milestone. You control the data, so you can attribute trees to specific orders and pull verification evidence back into your own dashboard. And you stay portable, because the same integration survives a frontend rewrite or even a backend migration.

What You Will Build

The pattern in this guide is deliberately simple and production-shaped: a customer completes an order, your commerce backend fires an “order paid” webhook, a Next.js Route Handler receives it, and that handler calls GoodAPI to plant a tree attributed to the order. Planting on the paid event rather than at checkout means you never plant a tree for an order that fails payment.

Step-by-Step: Integrating GoodAPI With Next.js

The Route Handler

Here is the core of the integration. It is a Next.js App Router Route Handler that plants one tree per order and is safe to call more than once for the same order.

export async function POST(request: Request) {
  const { orderId, customerEmail } = await request.json();

  const res = await fetch("https://app.thegoodapi.com/plant/trees", {
    method: "POST",
    headers: {
      "Authorization": process.env.GOODAPI_KEY as string,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      count: 1,
      attribution: customerEmail,
      idempotency_key: orderId,
      metadata: { order_id: orderId, source: "headless-storefront" },
    }),
  });

  if (!res.ok) {
    return Response.json({ ok: false }, { status: 502 });
  }

  const data = await res.json();
  return Response.json({ ok: true, planted: data.total_planted_trees });
}

The attribution field tags the tree with a non-unique lookup key, so later you can fetch every tree tied to a customer or campaign. The metadata object takes arbitrary key/value pairs, which is useful for storing your internal order ID or the storefront a tree came from. And the idempotency_key is what makes the call safe to retry.

Reading impact back into your React frontend

A headless store should show off its impact, and GoodAPI gives you two reads for that. GET https://app.thegoodapi.com/plant/trees returns your totals and can be filtered by attribution_key, date range, or metadata. GET https://app.thegoodapi.com/evidence returns aggregated verification evidence including photos and impact metrics like total trees, carbon offset, and hectares restored across countries such as Kenya, Madagascar, Brazil, and Indonesia.

A simple React server component can fetch the totals and render a counter:

async function getTotal() {
  const res = await fetch("https://app.thegoodapi.com/plant/trees", {
    headers: { "Authorization": process.env.GOODAPI_KEY as string },
    next: { revalidate: 3600 }, // cache for an hour
  });
  const data = await res.json();
  return data.total_planted_trees as number;
}

export default async function ImpactPage() {
  const total = await getTotal();
  return <h2>{total.toLocaleString()} trees planted with every order</h2>;
}

Verification: Why This Matters Beyond the Code

Wiring up an endpoint is the easy part. The reason GoodAPI is worth integrating instead of writing a check to a planting charity is that every tree is verifiable down to the GPS coordinate. GoodAPI’s reforestation partner is Veritree, a verified reforestation organization with global projects, so each tree is tracked, geolocated, and supported through its critical first years of growth.

For developers, that verification is itself an API. The beta GET /evidence/tree/<treeid> endpoint returns a full timeline for a single tree: when it was registered, when funds were distributed, when it was allocated to a specific planting site and crew, and when it was physically planted, with geotagged photo evidence at the planting coordinate. That means your headless store can show a customer not just “we planted a tree” but the verified status of their specific tree.

Cost and Operational Notes for Headless Teams

Pricing is simple in a way that suits a composable stack, where you are usually trying to avoid yet another per-seat SaaS bill. GoodAPI charges $0.43 per tree with no monthly fee, and trees accrue to a single end-of-month invoice. There is no separate cost for using it headless versus using the Shopify app, because it is the same underlying API.

Two practical tips. First, do all of your development against the test key so you can hammer the endpoint without generating real charges or real trees. Second, treat the plant call like any other external dependency in your order pipeline: wrap it in error handling, log failures with the order ID, and rely on the idempotency_key so a replay after a failure is always safe.

Bringing It Together

Adding environmental impact to a headless store does not require bending your architecture around someone else’s plugin. With a REST sustainability API for ecommerce, you plant from your own server, attribute every tree to an order, stay retry-safe with idempotency keys, and read verified impact back into your React frontend. The same integration keeps working whether your frontend is Next.js today and something else in two years.

If you are building on Shopify’s headless setup specifically, the GoodAPI app also gives you a managed path: it holds a 5.0★ rating across 200+ merchant reviews and is Built for Shopify. You can install GoodAPI from the Shopify App Store for the managed route, or read the full GoodAPI developer documentation and start planting from your own code. For a broader look at the API, see our plant a tree API developer guide and our overview of what a sustainability API is.