# Framer Payment Integration

> To integrate payments in Framer, create and style a purchase button, connect navigation links to your checkout page, paste your Stripe payment link, and preview the checkout flow to start accepting payments.

Canonical: https://livedemo.ai/tutorials/framer-payment-integration/
Apps: Framer
Updated: 2026-10-05
Interactive demo: https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/6929ffeb243f01ed60a4d5d9/preview?step=1

## Steps

1. Open your Framer project where you want to add payment functionality.
2. Create a payment button with clear text like "Buy Now" or "Complete Purchase".
3. Add a payment button to your page—this is where the Stripe magic happens!
4. Style your payment button to stand out while matching your site's design language.
5. Connect your checkout page to your product pages by setting up appropriate navigation links.
6. Copy and paste your Stripe payment link from your Stripe dashboard.
7. Preview your changes to ensure the payment flow works smoothly.
8. Set the button to link directly to your Stripe checkout URL.
9. That's it! Your Framer site is now ready to accept payments through Stripe.