Stripe + Vue integration

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.

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.

• 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.

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.

Checked October 26, 2026 against Plandalf's own setup guides.