Webflow Tree Planting and Donations Guide

Webflow is home to a lot of design-led brands, and design-led brands tend to care about what their packaging, their supply chain, and their checkout actually say about them. So the question comes up constantly: can we plant a tree for every order the way the Shopify stores do? Webflow tree planting is absolutely possible, but it works through a webhook and an API call rather than a one-click marketplace install. This guide covers the honest version of that setup, the cases where it does not apply at all, and what it costs.

Why Webflow Brands Want Verified Impact, Not Greenwash

Shoppers have gotten good at spotting a badge with nothing behind it. A leaf icon in the footer and a sentence about “our commitment to the planet” now reads as a warning sign rather than a differentiator, and regulators in the EU and elsewhere have started treating unsubstantiated environmental claims as exactly what they are. The brands that get credit for sustainability are the ones that can name the action, the volume, and the verifier.

That is the appeal of per-order impact. “We plant one verified tree for every order, GPS-tracked through Veritree” is a specific, checkable claim. It has a unit, a trigger, and a third party attached to it. A Webflow store can make that claim exactly as credibly as a Shopify store can, because the underlying planting is the same. What differs is only the plumbing between your checkout and the planting API.

Do You Need a Webflow Sustainability App?

You do not, and it is worth being clear about why. GoodAPI is a REST API first and a packaged app second. The integrations page lists Shopify in depth, plus Squarespace, BigCommerce, Duda, and a custom API path. There is no GoodAPI listing in the Webflow marketplace, and you should be skeptical of anyone promising a native Webflow install for a tool that does not have one.

What you get instead is arguably more flexible. A webhook-driven integration means you decide the trigger, the volume, and the attribution. You can plant one tree per order, scale trees to order value, add plastic removal on specific product collections, or route a donation to a nonprofit that matches your brand. None of that is available through a fixed marketplace toggle.

What Shopify Merchants Get Instead

For contrast: Shopify stores install the GoodAPI app from the Shopify App Store, which currently sits at 5.0 stars across 221 reviews , and configure everything from the app admin with no code at all. If you run both a Webflow marketing site and a Shopify checkout, use the app for the Shopify side and skip the middleware entirely. The comparison below lays out the three realistic paths.

Trees, Plastic, and Donations as One Program

Most teams start with trees because the story is easy to tell, then widen the program once it is running. The same GoodAPI account covers ocean-bound plastic removal at $0.05 per bottle and charity donations to verified US nonprofits, so you are not stitching together three vendors and three invoices.

That matters on Webflow in particular, because every extra integration is another handler to maintain. Once your middleware receives order events and calls one impact endpoint, adding a second impact type is a few lines in a function you have already deployed.

Step by Step: Webflow Tree Planting Through a Webhook

Here is the build, start to finish.

The Worker

The webhook body is an envelope shaped like { triggerType, payload }. You rarely need more than the orderId and the item count.

export default {
  async fetch(request, env) {
    const body = await request.text();
    const signature = request.headers.get('x-webflow-signature');
    const timestamp = request.headers.get('x-webflow-timestamp');

    if (!(await isValidRequest(body, timestamp, signature, env.WEBFLOW_SECRET))) {
      return new Response('Invalid signature', { status: 401 });
    }

    const { triggerType, payload } = JSON.parse(body);
    if (triggerType !== 'ecomm_new_order') {
      return new Response('Ignored', { status: 200 });
    }

    await fetch('https://app.thegoodapi.com/plant/trees', {
      method: 'POST',
      headers: {
        Authorization: `Bearer ${env.GOODAPI_KEY}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        count: 1,
        attribution: `webflow-order-${payload.orderId}`,
        idempotency_key: payload.orderId,
        metadata: { order_id: payload.orderId, source: 'webflow' },
      }),
    });

    return new Response('OK', { status: 200 });
  },
};

Signature verification is an HMAC-SHA256 over the timestamp and the raw body joined by a colon, compared against the header value:

async function isValidRequest(body, timestamp, signature, secret) {
  if (!signature || !timestamp) return false;
  if (Date.now() - Number(timestamp) > 5 * 60 * 1000) return false;

  const encoder = new TextEncoder();
  const key = await crypto.subtle.importKey(
    'raw',
    encoder.encode(secret),
    { name: 'HMAC', hash: 'SHA-256' },
    false,
    ['sign'],
  );
  const mac = await crypto.subtle.sign('HMAC', key, encoder.encode(`${timestamp}:${body}`));
  const expected = [...new Uint8Array(mac)]
    .map((b) => b.toString(16).padStart(2, '0'))
    .join('');

  return expected === signature;
}

Verify against the raw request text, not a re-serialized object. Parsing and re-stringifying JSON changes the bytes and your HMAC will never match.

Adding a Webflow Donations Integration

Trees are the easy sell, but plenty of brands have a cause that fits them better than reforestation does. GoodAPI donations reach more than 1.3 million verified 501(c)(3) nonprofits, cover commercial co-venture compliance in all 50 US states, and GoodAPI takes a 0% platform fee on the donated amount. The compliance piece is the part teams underestimate. Telling customers that a share of their purchase goes to charity is a regulated claim in many states, and handling the registrations yourself is a genuine project.

For a Webflow donations integration the shape is identical to the planting flow. Your handler already knows the order total, so it can compute a flat per-order contribution, a percentage of order value, or a round-up amount you collected as a line item at checkout, then call the donation endpoint with the same idempotency key. Charity search lets you resolve a nonprofit by name or EIN so customers can pick a cause, and the API paths sit on the Lead plan. If you want the endpoint-level detail before you build, the charity donations API developer guide goes deeper than this post can.

Showing Impact on Your Webflow Site

Webflow gives you custom code in the site head, before the closing body tag, and in per-page Code Embed elements. That is plenty for an impact page, a running tree counter, or a line on the product template that says what this purchase funds.

The rule is simple: display in the browser, plant on the server. Read your totals with a GET against the plant and evidence endpoints from the same middleware that handles orders, cache the response, and serve those numbers to the page from your own endpoint. Never put a GoodAPI key in front-end code, in a Code Embed, or in a Webflow custom attribute. Anything you paste into the Webflow designer is public.

Pricing and Plan Clarity

The Grow plan is free to install and includes your first 50 trees and 100 plastic bottles at no charge. After that, trees are $0.43 each and ocean-bound plastic bottles are $0.05 each, billed on one end-of-month invoice with no monthly fee for trees and plastic. A Webflow store doing 500 orders a month at one tree per order lands around $215 in planting.

Two things sit outside that. Donations run on the Give plan at $15 per month, and checkout round-ups plus API access run on the Lead plan at $49 per month. The “no monthly fee” line applies to trees and plastic on Grow, not to the whole catalog, and it is worth knowing that before you scope the build.

Common Pitfalls

No Ecommerce plan, no webhook. A CMS or Business plan with a Stripe or Shopify Buy Button never fires ecomm_new_order, because Webflow is not processing the order. Hook the cart provider’s webhook instead and call GoodAPI from that handler.

API keys in the browser. A planting key in a Code Embed is a public key. Keep every write call server-side.

No idempotency key. Webflow retries failed deliveries. Without idempotency_key set to the order ID, each retry plants again and inflates your invoice.

Planting before payment settles. If unpaid or cancelled orders are possible, also subscribe to ecomm_order_changed and reconcile before you treat revenue as final.

Getting Started

The Webflow path is not the five-minute install, and pretending otherwise would set you up for a bad afternoon. It is one webhook subscription, one small function, and one API call, and once it is deployed it runs quietly for as long as your store does.

If your stack looks different, the same pattern has been written up for other platforms: the Wix tree planting integration uses backend Velo events, the Squarespace tree planting guide covers the dashboard route, and the headless Next.js and React guide is the closest match if your Webflow site is a marketing front end over a custom commerce backend.

Grab a test key, wire up ecomm_new_order, and put a verified tree behind your next Webflow order.