> Add a Stripe-backed Plandalf checkout to any hand-coded or static HTML page with one script tag and a button attribute. No framework, no backend. Source: https://plandalf.com/apps/stripe/integrations/custom-html Last modified: 2026-10-26 Checkout embed # Stripe + HTML integration One script tag and a button attribute turn any HTML page into a place to sell, with Stripe taking the payment. [Start your 14-day free trial](https://admin.plandalf.dev/signup)[Jump to the setup](#setup) No credit card required. No coding required. **Stripe** **HTML** ## Does Stripe integrate with HTML? A plain HTML page does not need a Stripe library or a server. You add the Plandalf script and an element with `data-plandalf-present` or `data-plandalf-mount`, and the checkout it opens takes payment through the Stripe account you connected in Plandalf. Any builder that accepts pasted HTML works the same way. ## What moves between Stripe and HTML Event From and to Through What happens Visitor clicks the button HTML pagePlandalf Checkout embed The script finds elements by attribute. `data-plandalf-present` opens the offer in a modal, slideout, bottom sheet or fullscreen frame, and `data-plandalf-mount` renders it inline. Payment PlandalfStripe Payment connection Stripe processes the card in your own account, and the page itself never handles card details. Countdown rendering PlandalfHTML page Checkout embed An element with `data-plandalf-promo` shows a countdown. The same promo slug on the buy button's `data-plandalf-apply-promo` is what changes the price. Checkout completed Plandalf (paid via Stripe)HTML page By hand A static page has no backend to notify. Set a redirect or a thank-you page on the offer, and use a sequence for the receipt and any follow-up. ## Sell from a static HTML page You need a published Plandalf offer on a Stripe price and a page where you can paste HTML. 1. ### Connect Stripe and publish In Plandalf authorize Stripe, attach a price and publish the offer. Note the offer slug and your organization's SDK URL. 2. ### Add the script Place the Plandalf script tag on every page that has a checkout button, an inline checkout or a promo widget. Load it once per page. 3. ### Add one buying action Put `data-plandalf-present` with the offer slug on a button or link. Keep the default modal frame until the first click works, then try `data-plandalf-frame` or `data-plandalf-size`. 4. ### Try an inline checkout For a checkout that sits in the page, use a div with `data-plandalf-mount` and a `min-height` of around 480 pixels so the page does not jump. 5. ### Add a countdown if you have a promo Mount the widget with `sdk.promo()` after `plandalf('ready', ...)`, or use `data-plandalf-promo` on a div. Reload to confirm the same visitor keeps their start time. 6. ### Pay with a test card Check the Stripe connection is a test account, complete a test purchase, and match the paid invoice in Plandalf to the Stripe payment. Remove `data-plandalf-mode` set to test before launch. ## What sellers do with Stripe and HTML ### Coach with a one-page site A coach whose site is a single hand-built page adds a Book now button and sells a session package without adding a store. ### Static site on a CMS template A site generated from templates adds the script to the shared layout and the button to the pricing partial, so every build includes checkout. ### Link in a builder that allows HTML Where a page builder only lets you paste an embed, the same snippet works, and a hosted checkout link is the fallback for places that block scripts. ## Limits and gotchas - The `data-plandalf-promo` element only draws a countdown. To apply promo pricing, add `data-plandalf-apply-promo` to the button or inline element. A timer on its own changes no price. - An always-active final tier can keep selling at its normal price after the countdown expires. Test the price before and after the deadline. - Use a blocking script, as in the docs' programmatic example, if your own code calls `plandalf.ready()` or `plandalf.present()` directly. The async snippet is for attribute-only buttons. - Test mode is requested by `data-plandalf-mode`, and the Stripe connection decides what actually happens. Verify the account before you pay. - A static page cannot check who paid. If you gate content, verify the purchase on a server you control. ## Stripe and HTML: common questions Does Stripe integrate with HTML? Through Plandalf, yes: paste the Plandalf script and a button with `data-plandalf-present` into your HTML and the checkout charges your connected Stripe account. You do not write Stripe code. How do I add a Stripe checkout to a static HTML website? Connect Stripe to Plandalf, publish an offer, add the script tag and put the offer slug on a button. Publish the page and test it with a Stripe test card. Can I show the checkout inside the page instead of a popup? Yes. Use `data-plandalf-mount` on a div to render the offer inline, and give the div a minimum height. Does the HTML page need a server for Stripe? Not to open checkout or take payment. You only need a server if you want to verify purchases yourself or restrict content after a sale. ## Guides for this pair - [Plandalf with Stripe](https://plandalf.com/platforms/stripe) - [Plandalf with HTML](https://plandalf.com/platforms/custom-html) - [Plandalf on custom HTML](https://plandalf.com/docs/platforms/custom-html) - [Buy buttons](https://plandalf.com/docs/offers/buy-buttons) - [Hosted checkout links](https://plandalf.com/docs/offers/hosted-checkout) - [Connect Stripe](https://plandalf.com/docs/platforms/stripe) [Start your 14-day free trial](https://admin.plandalf.dev/signup) ## More from Stripe and HTML - [**Stripe + Kajabi**Buyers pay in a Plandalf checkout through Stripe and Plandalf grants them the Kajabi offer, then takes it back if the payment is refunded.](https://plandalf.com/apps/stripe/integrations/kajabi) - [**Stripe + Klaviyo**Stripe takes the payment, Plandalf runs the checkout, and a Send Webhook step can hand the purchase to Klaviyo as an event.](https://plandalf.com/apps/stripe/integrations/klaviyo) - [**Stripe + Mailchimp**Stripe takes the payment, and the paid Plandalf checkout adds the buyer to your Mailchimp audience, tags them and starts the right Customer Journey.](https://plandalf.com/apps/stripe/integrations/mailchimp) - [**HTML + Flodesk**One script tag puts the checkout on a plain HTML page, and a webhook step moves the paid buyer into a Flodesk segment.](https://plandalf.com/apps/custom-html/integrations/flodesk) Checked October 26, 2026 against Plandalf's own setup guides.