> Open a Stripe-backed Plandalf checkout from a Vue 3 component with the browser SDK. No Vue-specific package, with a countdown and component cleanup. Source: https://plandalf.com/apps/stripe/integrations/vue-app Last modified: 2026-10-26 Checkout embed # Stripe + Vue integration A Vue 3 component renders a button, the browser SDK opens the checkout, and your Stripe account takes 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** **Vue** ## Does Stripe integrate with Vue? Plandalf has no Vue plugin. A Vue 3 app uses the same browser SDK as any site: you load it in the root HTML, bind the offer slug to a button, and the checkout it opens takes payment through the Stripe account connected in Plandalf. Vue owns the page; Plandalf owns the checkout. ## What moves between Stripe and Vue Event From and to Through What happens Component renders a button VuePlandalf Checkout embed The SDK watches the DOM, so a button created later by `v-if` or a route component still attaches. The offer slug is bound with `:data-plandalf-present`. Payment PlandalfStripe Payment connection The charge runs in your connected Stripe account. The Vue bundle needs the public SDK URL and slugs only. Promo tier changes PlandalfVue Checkout embed A component can call `sdk.promo()` inside `plandalf('ready', ...)` and read tier-change events from the handle to show the current tier. Checkout completed Plandalf (paid via Stripe)Vue Webhook The app's backend learns of a sale through a sequence that posts to it with Send Webhook. The browser alone should not grant access. ## Add a Stripe checkout button to a Vue 3 component You need a published Plandalf offer with a Stripe price and edit access to your root HTML and a component. 1. ### Connect Stripe and publish Authorize Stripe in Plandalf, attach the price, publish the offer, and copy the slug and your organization's script URL. 2. ### Load the SDK in index.html In a Vite app put the small `plandalf` queue function and the async script tag in the root `index.html`, before your app entry. The queue lets components register a ready callback while the script loads. 3. ### Bind the offer to a button In a component return a `button` with `:data-plandalf-present` bound to a prop, and add `data-plandalf-mode` set to test. Clicking it should open the offer in a modal. 4. ### Key the button on what changes Include the offer slug in the `:key`. The SDK captures attributes when it attaches, so changing an attribute on the same DOM node leaves the old click handler in place. 5. ### Add a countdown in onMounted In `onMounted` call `plandalf('ready', ...)` and mount the promo into a template ref with redirects off. Close the handle in `onUnmounted`. For server-rendered Vue keep all SDK work inside `onMounted`. 6. ### Pay with a test card Confirm the Stripe account in Plandalf is a test account, pay with a Stripe test card, then try a declined card, and match the results with the Plandalf invoice. ## What sellers do with Stripe and Vue ### Vue storefront for digital products A small Vue site sells a template pack. Each product card passes its own offer slug to one reusable button component. ### Dashboard upgrade prompt A Vue dashboard shows an upgrade card that remounts the button when the plan changes, keyed on the offer so it never opens a stale one. ### Webinar signup with a deadline A registration page shows the promo tier in a component and applies the same promo on the buy button, so the price on screen is the price in the Stripe charge. ## Limits and gotchas - The guide needs Vue 3 and the browser SDK. It does not use a Vue-specific package, and the router flows for a different offer or an actual router still need testing in your app. - The local verification was a USD 50 final-tier sandbox purchase matched to a paid invoice and one attributed test sale, plus a declined attempt that took no payment. Earlier tiers, refunds and renewals were not covered. - Do not reference the browser SDK during server rendering. Wait for `onMounted`. - `data-plandalf-no-redirect` on the button skips its automatic promo monitor, which the component starts itself with redirects off. Choose and test your real expiry behavior before launch. - Keep Stripe and Plandalf secrets on your server. A Vue bundle should hold only the public script URL and slugs. ## Stripe and Vue: common questions Does Stripe integrate with Vue? Plandalf adds a Stripe-backed checkout to a Vue 3 app through its browser SDK, not through a Vue plugin. The Vue component renders a button and Stripe processes the payment. How do I add a Stripe checkout to Vue? Connect Stripe to Plandalf, publish an offer, add the Plandalf script to `index.html` and bind the offer slug to a button with `:data-plandalf-present`. Is there a Plandalf package for Vue? No. Plandalf's Vue guide uses the browser SDK directly and says no Vue-specific package is needed. React has its own package, Vue does not. Why does my Vue button open the wrong offer after the slug changes? The SDK reads attributes when it first attaches to the element. Put the slug, and any promo, in the button's `:key` so Vue builds a new element. ## Guides for this pair - [Plandalf with Stripe](https://plandalf.com/platforms/stripe) - [Plandalf with Vue](https://plandalf.com/platforms/vue-app) - [Plandalf in a Vue app](https://plandalf.com/docs/platforms/vue-app) - [Create an offer](https://plandalf.com/docs/offers/create) - [Connect Stripe](https://plandalf.com/docs/platforms/stripe) - [Create a promo](https://plandalf.com/docs/timers/create-promo) [Start your 14-day free trial](https://admin.plandalf.dev/signup) ## More from Stripe and Vue - [**Stripe + Circle**Pay in a Plandalf checkout through Stripe and the buyer lands in the Circle space they paid for. If Stripe refunds the payment, they leave that space.](https://plandalf.com/apps/stripe/integrations/circle) - [**Stripe + Kit (ConvertKit)**Stripe takes the payment, Plandalf runs the checkout, and Kit tags the buyer and starts their emails from the paid order.](https://plandalf.com/apps/stripe/integrations/convertkit) - [**Stripe + HTML**One script tag and a button attribute turn any HTML page into a place to sell, with Stripe taking the payment.](https://plandalf.com/apps/stripe/integrations/custom-html) - [**PayPal + Vue**A Vue 3 button opens your Plandalf checkout, and PayPal shows up there as a payment option beside cards.](https://plandalf.com/apps/paypal/integrations/vue-app) - [**Vue + Kit (ConvertKit)**A Vue 3 component opens the checkout through the browser SDK, and Kit tags and emails the buyer from a paid order.](https://plandalf.com/apps/vue-app/integrations/convertkit) Checked October 26, 2026 against Plandalf's own setup guides.