[naor-gal]

Summary

PayPal checkout can now be created on click, so the buyer clicks once.

Today a page has to create the checkout before it can mount PayPal's button, because the button needs the checkout's PayPal details. So the buyer clicks the app's own button, waits 1-3 seconds for PayPal's button to appear, and clicks again.

mountCheckout() now also accepts a checkout to create on click:

const mount = await base44.payments.mountCheckout(element, {
  provider: "paypal",
  currency: "usd",
  intent: "capture", // or "subscription"
  createCheckout: async () => (await base44.functions.invoke("createCheckout", { productId })).data,
}, { onComplete, onError });

mount.setDisabled(!formIsValid);

• PayPal's button renders as soon as the page loads, from the new paypal.button details in GET /payments/config.
• createCheckout() runs inside the buyer's click. PayPal's session.start() takes the order as a promise, so its window opens right away and continues once the order exists. Page views create no orders.
• The created checkout must match the button (PayPal, same intent, currency and merchant) or the click fails with onError. A rejection from createCheckout(), for example an empty required field, closes PayPal's window and reaches onError.
• New CheckoutMount.setDisabled() greys out the button until a form is valid. Stripe ignores it.
• Passing an existing checkout works exactly as before. Stripe is unchanged, since its embedded checkout needs its session to render.
• Mounting on click rejects when the backend has no paypal.button details yet, which also covers backends that don't send them.

Testing

• vitest: 434 passed, including four new on-click tests: the button shows before the order exists and the order is created on click, a mismatched checkout is refused, mounting waits until PayPal is ready, and a disabled button ignores clicks.
• test:types: passes, with new checks for the on-click form, setDisabled(), and refusing it for Stripe.
• eslint is clean.

🤖 Generated with Claude Code

[github-actions]

🚀 Package Preview Available!

---

Install this PR's preview build with npm:

npm i @base44-preview/sdk@0.8.58-beta.0-pr.366.dccfb00

Prefer not to change any import paths? Install using npm alias so your code still imports @base44/sdk:

npm i "@base44/sdk@npm:@base44-preview/sdk@0.8.58-beta.0-pr.366.dccfb00"

Or add it to your package.json dependencies:

{
  "dependencies": {
    "@base44/sdk": "npm:@base44-preview/sdk@0.8.58-beta.0-pr.366.dccfb00"
  }
}

• 📦 Preview Package: @base44-preview/sdk@0.8.58-beta.0-pr.366.dccfb00
• 🔗 View this commit on GitHub

---

_{Preview published to npm registry — try new features instantly!}