> A ready-to-clone Plandalf checkout template designed for Webflow sites paying via Stripe.

Source: https://plandalf.com/templates/webflow-stripe-checkout

[← Templates](https://plandalf.com/templates)

Template · checkout

# Webflow + Stripe Checkout

A ready-to-clone Plandalf [checkout](https://plandalf.com/products/checkouts/hosted-checkout) template designed for [Webflow](https://plandalf.com/platforms/webflow) sites paying via [Stripe](https://plandalf.com/platforms/stripe).

[Use this template](https://admin.plandalf.dev/register)

Built by [Plandalf Team](https://plandalf.com/creators/plandalf-team)

Builder path

## Use the template as the page, not the whole commerce system.

[Webflow](https://plandalf.com/platforms/webflow) handles the page and Plandalf handles the offer, [checkout](https://plandalf.com/products/checkouts/hosted-checkout), [Stripe](https://plandalf.com/platforms/stripe) [payment](https://plandalf.com/products/checkouts/payment-options) handoff, [invoice](https://plandalf.com/products/checkouts/invoices), and [fulfillment sequence](https://plandalf.com/products/automations).

## Create the offer record

Start in [Plandalf Offers](https://plandalf.com/products/checkouts), then configure the [product](https://plandalf.com/products/checkouts), [price](https://plandalf.com/products/checkouts/payment-options), [checkout](https://plandalf.com/products/checkouts/hosted-checkout) mode, [invoice](https://plandalf.com/products/checkouts/invoices), and [fulfillment](https://plandalf.com/products/automations) behavior before touching [Webflow](https://plandalf.com/platforms/webflow).

[Offers](https://plandalf.com/products/checkouts)[Products](https://plandalf.com/products/checkouts)[Prices](https://plandalf.com/products/checkouts/payment-options)[Offer products docs](https://plandalf.com/docs/offers/products)

## Connect the Webflow buying moment

Use [Webflow](https://plandalf.com/platforms/webflow) for the sales page and Plandalf for the buying surface. Link to [hosted checkout](https://plandalf.com/products/checkouts/hosted-checkout) or embed a [buy button](https://plandalf.com/products/checkouts/hosted-checkout) from the page section that creates intent.

[Webflow integration](https://plandalf.com/platforms/webflow)[Hosted checkout](https://plandalf.com/products/checkouts/hosted-checkout)[Buy button](https://plandalf.com/products/checkouts/hosted-checkout)[Buy button docs](https://plandalf.com/docs/offers/buy-buttons)

## Keep payment and fulfillment connected

[Stripe](https://plandalf.com/platforms/stripe) handles the charge. Plandalf keeps [payment options](https://plandalf.com/products/checkouts/payment-options), [invoices](https://plandalf.com/products/checkouts/invoices), and [purchase automations](https://plandalf.com/products/automations/purchase-automations) tied to the same [checkout](https://plandalf.com/products/checkouts/hosted-checkout) event.

[Stripe integration](https://plandalf.com/platforms/stripe)[Payment options](https://plandalf.com/products/checkouts/payment-options)[Invoices](https://plandalf.com/products/checkouts/invoices)[Fulfillment sequence](https://plandalf.com/products/automations)

Product surfaces

## The Plandalf screens behind the template.

These are real app screenshots showing where the template connects to [checkout](https://plandalf.com/products/checkouts/hosted-checkout), [payment](https://plandalf.com/products/checkouts/payment-options), [invoices](https://plandalf.com/products/checkouts/invoices), [products](https://plandalf.com/products/checkouts), [API docs](https://plandalf.com/docs/api/reference), [webhooks](https://plandalf.com/docs/api/webhooks), and automation.

![The Numi offer editor with product, theme, automation, invoice, and checkout controls.](https://plandalf.com/images/stacks/api-first/numi-offer-editor.png)

Build the offer before you paste a link into [Webflow](https://plandalf.com/platforms/webflow): [products](https://plandalf.com/products/checkouts), [prices](https://plandalf.com/products/checkouts/payment-options), [checkout](https://plandalf.com/products/checkouts/hosted-checkout) mode, automation, and [invoices](https://plandalf.com/products/checkouts/invoices) live here.

![The Numi offer editor showing hosted checkout mode controls.](https://plandalf.com/images/features/hosted-checkout/offer-editor-hosted-mode-product.png)

[Hosted checkout](https://plandalf.com/products/checkouts/hosted-checkout) lets a [Webflow](https://plandalf.com/platforms/webflow) page hand buyers to a branded Plandalf buying surface.

![The Numi editor top bar showing preview and share controls for a buying surface.](https://plandalf.com/images/features/buy-button/editor-topbar-preview-share-product.png)

Use [buy buttons](https://plandalf.com/products/checkouts/hosted-checkout) when the [checkout](https://plandalf.com/products/checkouts/hosted-checkout) action should stay close to the [Webflow](https://plandalf.com/platforms/webflow) section that sells the [product](https://plandalf.com/products/checkouts).

![The Numi integrations settings page showing Stripe, PayPal, TaxJar, and Avalara connection options.](https://plandalf.com/images/stacks/api-first/numi-payment-processors.png)

[Stripe](https://plandalf.com/platforms/stripe) stays the processor while Plandalf keeps the offer, [invoice](https://plandalf.com/products/checkouts/invoices), [checkout](https://plandalf.com/products/checkouts/hosted-checkout), and post-purchase context together.

![The Numi offer editor automation tab showing sequence controls beside the checkout canvas.](https://plandalf.com/images/features/automation/offer-editor-automation-tab-product.png)

Attach the [fulfillment sequence](https://plandalf.com/products/automations) to the offer so the buyer gets the next step after [payment](https://plandalf.com/products/checkouts/payment-options).

![The Numi products panel showing products attached to an offer.](https://plandalf.com/images/features/products/offer-products-panel-focused-product.png)

[Products](https://plandalf.com/products/checkouts) and [prices](https://plandalf.com/products/checkouts/payment-options) should be configured in the offer before the [Webflow](https://plandalf.com/platforms/webflow) page sends traffic.

![The Numi offer invoices page showing invoice status, customer, amount, and line item information.](https://plandalf.com/images/stacks/api-first/numi-offer-invoices.png)

[Invoices](https://plandalf.com/products/checkouts/invoices) keep buyer, [product](https://plandalf.com/products/checkouts), [payment](https://plandalf.com/products/checkouts/payment-options), and [fulfillment](https://plandalf.com/products/automations) [records](https://plandalf.com/products/checkouts/invoices) visible after [checkout](https://plandalf.com/products/checkouts/hosted-checkout).

![The Numi API docs page showing endpoint documentation and developer navigation.](https://plandalf.com/images/stacks/api-first/numi-api-docs.png)

[API docs](https://plandalf.com/docs/api/reference), [SDK events](https://plandalf.com/docs/sdk/events), and [webhooks](https://plandalf.com/docs/api/webhooks) give builders a path when the template needs custom [fulfillment](https://plandalf.com/products/automations).

Reference links

## Everything this template should point to.

Use these pages when moving from a [Webflow](https://plandalf.com/platforms/webflow) [checkout](https://plandalf.com/products/checkouts/hosted-checkout) template into [Offers](https://plandalf.com/products/checkouts), [Stripe](https://plandalf.com/platforms/stripe), automation, docs, and comparison work.

Integration

[Webflow](https://plandalf.com/platforms/webflow)

website

Integration

[Stripe](https://plandalf.com/platforms/stripe)

Take cards, wallets and subscriptions through your own [Stripe](https://plandalf.com/platforms/stripe) account on every Plandalf [checkout](https://plandalf.com/products/checkouts/hosted-checkout).

Workflow

[Sell a Webflow product with Stripe Checkout](https://plandalf.com/workflows/sell-webflow-product-with-stripe-checkout)

The full implementation recipe for this template.

Comparison

[Plandalf vs Stripe Checkout](https://plandalf.com/vs/plandalf/stripe-checkout)

Use this when deciding whether processor-only [checkout](https://plandalf.com/products/checkouts/hosted-checkout) is enough.

Stack

[Checkout Optimization Lab](https://plandalf.com/stacks/checkout-optimization-lab)

Improve [checkout templates](https://plandalf.com/templates), [coupons](https://plandalf.com/products/checkouts/coupons), [order bumps](https://plandalf.com/products/checkouts/order-bumps), and [upsells](https://plandalf.com/products/checkouts/upsells) after launch.

Stack

[API-first stack](https://plandalf.com/stacks/api-first)

Move from [checkout](https://plandalf.com/products/checkouts/hosted-checkout) template to [SDK checkout](https://plandalf.com/docs/api/sdk-checkout), [API](https://plandalf.com/docs/api/reference) keys, [webhooks](https://plandalf.com/docs/api/webhooks), and custom app [fulfillment](https://plandalf.com/products/automations).

Docs

[Hosted checkout docs](https://plandalf.com/docs/offers/hosted-checkout)

Set up [hosted checkout](https://plandalf.com/products/checkouts/hosted-checkout), preview sessions, and test sessions.

Docs

[Offer pricing docs](https://plandalf.com/docs/offers/pricing)

Map [product](https://plandalf.com/products/checkouts) [prices](https://plandalf.com/products/checkouts/payment-options) before the [Webflow](https://plandalf.com/platforms/webflow) page sends traffic.

Docs

[Offer products docs](https://plandalf.com/docs/offers/products)

Define the [products](https://plandalf.com/products/checkouts) that the [Webflow](https://plandalf.com/platforms/webflow) template sells before [checkout](https://plandalf.com/products/checkouts/hosted-checkout) goes live.

Docs

[Webhook docs](https://plandalf.com/docs/api/webhooks)

Route [checkout events](https://plandalf.com/docs/api/webhooks) and [purchase events](https://plandalf.com/docs/api/webhooks) to custom [fulfillment](https://plandalf.com/products/automations), [CRM](https://plandalf.com/platforms/crm), support, or internal tools.

Feature

[Purchase automations](https://plandalf.com/products/automations/purchase-automations)

Route work after [checkout](https://plandalf.com/products/checkouts/hosted-checkout) without a manual handoff.

Stack

[The Affiliate Tax Launch](https://plandalf.com/stacks/affiliate-tax-launch)

Connect affiliate sales, [payment options](https://plandalf.com/products/checkouts/payment-options), live tax calculation, and post-purchase reconciliation.

Stack

[The API-First Product](https://plandalf.com/stacks/api-first)

Split transactional email from lifecycle email so each tool does what it's good at.

Stack

[The Checkout Optimization Lab](https://plandalf.com/stacks/checkout-optimization-lab)

Test [checkout](https://plandalf.com/products/checkouts/hosted-checkout) layouts, sessions, mobile flow, and recovery without turning the sales page into a custom app.

Stack

[The Coach](https://plandalf.com/stacks/coach-consultant)

Take deposits and recurring retainers without re-platforming your existing site.

## Workflows using this template

Workflow · beginner

[Sell a Webflow product with Stripe Checkout](https://plandalf.com/workflows/sell-webflow-product-with-stripe-checkout)

Wire a Plandalf [hosted checkout](https://plandalf.com/products/checkouts/hosted-checkout) into a [Webflow](https://plandalf.com/platforms/webflow) site, accept [Stripe](https://plandalf.com/platforms/stripe) payments, and fulfill on completion.