> Open a Plandalf checkout from a Vue 3 component with PayPal offered as a payment option. No PayPal code in your app, and a sandbox path to rehearse it first. Source: https://plandalf.com/apps/paypal/integrations/vue-app Last modified: 2026-10-26 Checkout embed # PayPal + Vue integration A Vue 3 button opens your Plandalf checkout, and PayPal shows up there as a payment option beside cards. [Start your 14-day free trial](https://admin.plandalf.dev/signup)[Jump to the setup](#setup) No credit card required. No coding required. **PayPal** **Vue** ## Does PayPal integrate with Vue? Plandalf does not add a PayPal package to your Vue app. Vue only renders the button that opens the Plandalf checkout; PayPal is switched on for that offer in Plandalf, where you connect your PayPal Business account. The buyer chooses PayPal inside the checkout, and the same completion path runs as after a card payment. ## What moves between PayPal and Vue Event From and to Through What happens Checkout opened VuePlandalf Checkout embed A button with `data-plandalf-present` set to the offer slug opens the checkout as a modal once the SDK script has loaded. Vue needs no PayPal-specific code for this. Payment method chosen PlandalfPayPal Payment connection The buyer picks PayPal inside the checkout, approves at PayPal and returns to the same checkout. This only appears for offers where you added PayPal as a payment option. Checkout completed Plandalf (paid via PayPal)Vue Checkout embed The same completion path runs as after a card payment, so redirects, events, webhooks and sequences work for PayPal sales. Your Vue app can update its screen from checkout events. Access granted PlandalfYour server Webhook A sequence on Checkout Completed can use Send Webhook to tell your own backend about the paid invoice. Grant durable access from that call, not from the browser event. Refund PayPalPlandalf By hand Invoice Refunded is documented only for refunds that succeed in Stripe. A refund you make in PayPal leaves your Vue app's access rules untouched until you change them yourself. ## Offer PayPal from a Vue 3 checkout button You need a published Plandalf offer, a PayPal Business account with a client ID and secret from the PayPal developer dashboard, and a Vue 3 app where you can edit the root HTML. 1. ### Connect PayPal and add it to the offer Open the PayPal integration in Plandalf, authorize the Business account, then add PayPal as a payment option on the offer. Keep card payment available as a fallback. 2. ### Load the SDK once In a Vite app, put the queue snippet and the `plandalf-sdk.js` script in the root `index.html`, before your app entry. Use your own organization host in place of `acme`. 3. ### Add the button Create a component with a `button` that binds `:data-plandalf-present` to the offer slug and `:key` to the same value. The key makes Vue rebuild the button when the slug changes, because the SDK reads the attributes only once. 4. ### Rehearse with the sandbox Connect the PayPal sandbox environment, open the checkout from the published page and approve a sandbox payment. Then cancel at PayPal, come back to the checkout, and check that no paid invoice was created. 5. ### Check the invoice, then the access rule Match the sandbox payment to a paid invoice in Plandalf. Give access from your server after that check, and repeat the sandbox run once with a card so you know both paths end in the same place. 6. ### Plan for refunds Decide how access is removed after a PayPal refund. Either do it by hand, or start a Plandalf sequence yourself through a Webhook Trigger URL when you refund. ## What sellers do with PayPal and Vue ### In-app upgrade button A Vue dashboard shows an Upgrade button that opens the Pro offer. Buyers outside card-first markets pay with PayPal, and your component refreshes the plan badge when checkout reports completion. ### Pricing route in a single-page app The pricing page is a Vue route with one button per plan. Each button carries its own slug and key, so switching plans in the UI opens the right offer with PayPal listed beside cards. ## Limits and gotchas - The Vue guide's local replays were run against a Stripe sandbox. PayPal's sandbox path is documented separately, so test the PayPal flow in your own app before launch. - `data-plandalf-mode='test'` asks for test mode but is not proof that a sandbox account is connected. Check the provider binding before you submit a payment. - The SDK reads a button's attributes when it attaches. Changing the offer slug on an existing element does nothing unless the `:key` changes or the button is remounted. - In server-rendered Vue, touch the browser SDK only inside `onMounted`. Calling it during server rendering fails because there is no `window`. - Do not treat a browser checkout event as proof of payment for protected content. Verify the paid invoice on your server first. ## PayPal and Vue: common questions Does PayPal integrate with Vue? Not as a Vue package. Your Vue app opens a Plandalf checkout, and PayPal is a payment option inside that checkout once you connect your PayPal Business account in Plandalf. How do I add PayPal to a Vue 3 app? Add PayPal to the offer in Plandalf, load the Plandalf SDK in your root HTML and render a button with `data-plandalf-present`. Nothing PayPal-specific goes in your components. Can I test PayPal payments from my Vue app before going live? Yes. Connect the PayPal sandbox, complete an approved sandbox payment, and also cancel at PayPal and return to the checkout. Check the invoice state each time. Does a PayPal refund remove access in my Vue app? No. Plandalf's refund trigger is documented for refunds that succeed in Stripe, so a PayPal refund needs a manual change or a sequence you start yourself. ## Guides for this pair - [Plandalf with PayPal](https://plandalf.com/platforms/paypal) - [Plandalf with Vue](https://plandalf.com/platforms/vue-app) - [PayPal on Plandalf checkouts](https://plandalf.com/docs/platforms/paypal) - [Vue guide](https://plandalf.com/docs/platforms/vue-app) - [Webhooks and catch URLs](https://plandalf.com/docs/api/webhooks) [Start your 14-day free trial](https://admin.plandalf.dev/signup) ## More from PayPal and Vue - [**PayPal + Kit (ConvertKit)**PayPal buyers on a Plandalf checkout can be tagged in Kit and dropped into an email sequence, using the same steps as card buyers.](https://plandalf.com/apps/paypal/integrations/convertkit) - [**PayPal + Drip**A PayPal order on a Plandalf checkout can add the buyer to Drip, tag them and record a purchase event that starts a Drip workflow.](https://plandalf.com/apps/paypal/integrations/drip) - [**PayPal + HubSpot**A Plandalf sequence posts each PayPal buyer to HubSpot with Send Webhook, and a HubSpot workflow can post back.](https://plandalf.com/apps/paypal/integrations/hubspot) - [**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) - [**Stripe + Vue**A Vue 3 component renders a button, the browser SDK opens the checkout, and your Stripe account takes the payment.](https://plandalf.com/apps/stripe/integrations/vue-app) Checked October 26, 2026 against Plandalf's own setup guides.