PayPal + Vue integration

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.

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.

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

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.

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