# How to Add a Payment Link to Your Landing Page > Step-by-step guide to adding a payment button to any landing page. Works with HTML, React, Webflow, Framer, or any website builder. No backend code required. - **Author**: Ayush Agarwal - **Published**: 2026-03-26 - **Category**: Payments, How-To, No-Code - **URL**: https://dodopayments.com/blogs/add-payment-link-landing-page --- You have a landing page. You have a product. You need a buy button. Most guides make this absurdly complex with backend APIs, webhook servers, and tax registration. Here is the 5-minute version. The simplest approach to accepting payments on any website is a payment link. A payment link is a single URL that opens a hosted checkout page. It works with any website builder or framework, including HTML, React, WordPress, Webflow, Framer, Carrd, Notion, and literally anything else that allows you to add a link or a button. In this guide, we will walk through the process of creating a payment link and adding it to your landing page. We will also cover more advanced options like overlay checkouts for a more integrated experience. ## Why Use a Payment Link? A payment link is the minimum viable product (MVP) for accepting payments. It removes the need for complex integrations, server-side code, and database management. When a user clicks your buy button, they are redirected to a secure, high-converting checkout page hosted by Dodo Payments. Dodo Payments acts as a [Merchant of Record (MoR)](https://dodopayments.com/blogs/merchant-of-record-for-saas), which means we handle the global sales tax, compliance, and payment processing for you. You don't need to worry about VAT in the EU or sales tax in the US. We take care of it all. Using a payment link is ideal for: - Validating a new product idea - Selling digital products or downloads - Accepting subscriptions for a SaaS - Selling tickets for an event - Collecting payments for services ## Step-by-Step: The 5-Minute Integration This is the simplest way to get started. You can have a working buy button on your landing page in less than five minutes. ### 1. Create Your Product First, log in to your Dodo Payments dashboard. Navigate to the "Products" section and click "Add Product." You can choose between a one-time payment or a subscription. Fill in the product details, including the name, description, and price. You can also upload an image for the product, which will appear on the checkout page. Once you're done, save the product. ### 2. Copy the Payment Link After creating your product, you will see a "Payment Link" associated with it. This is a unique URL that points directly to the checkout page for that specific product. Copy this URL to your clipboard. ### 3. Add the Button to Your Landing Page Now, go to your landing page editor. Whether you're using Webflow, Framer, or writing plain HTML, the process is the same. Add a button or a text link and set the destination URL to the payment link you just copied. For example, in plain HTML, your button might look like this: ```html Buy Now ``` ### 4. You're Done That's it. When a user clicks that button, they will be taken to a secure checkout page. Once they complete the payment, they will be redirected back to your site (if you've configured a redirect URL) or shown a success message. ## How the Payment Link Flow Works To understand what happens behind the scenes, here is a simple diagram of the payment link lifecycle. ```mermaid flowchart LR A[Landing Page] -->|"User clicks Buy"| B[Payment Link Opens] B --> C[Dodo Hosted Checkout] C -->|"Payment Processed"| D[Confirmation Page] D -.->|"Optional"| E[Webhook for Fulfillment] ``` The user starts on your landing page and clicks the buy button. This opens the payment link, which redirects them to the Dodo hosted checkout. After the payment is processed, the user sees a confirmation page. Optionally, Dodo Payments can send a webhook to your server to trigger fulfillment logic, like sending an email or granting access to a dashboard. ## Advanced: The Overlay Checkout If you want a more embedded experience where the user never leaves your site, you can use the [overlay checkout](https://docs.dodopayments.com/developer-resources/overlay-checkout). This opens the checkout in a modal on top of your landing page. ### 1. Install the Dodo SDK To use the overlay checkout, you need to include the Dodo Payments SDK on your page. If you're using a modern framework like React, you can install it via npm: ```bash npm install dodopayments-checkout ``` If you're using a static site, you can include it via a CDN: ```html ``` ### 2. Initialize the SDK You need to initialize the SDK with your configuration. This should happen once when your page loads. ```javascript DodoPayments.Initialize({ mode: "live", // Use 'test' for development displayType: "overlay", onEvent: (event) => { console.log("Checkout event:", event); }, }); ``` ### 3. Trigger the Checkout Instead of a standard link, you will call a function when the user clicks your buy button. ```javascript const handleBuyClick = () => { DodoPayments.Checkout.open({ checkoutUrl: "https://checkout.dodopayments.com/buy/pdt_your_product_id", }); }; ``` This will open the checkout modal directly on your page, providing a seamless experience for your customers. ## Platform-Specific Examples Different website builders have different ways of adding links and scripts. Here is how to add a payment link to the most popular platforms. ### Webflow In Webflow, you can add a payment link in two ways: - **Simple Link**: Add a Button element and paste your payment link into the URL field in the Element Settings. - **Overlay Checkout**: Add an "Embed" element to your page. Paste the CDN script and initialization code into the embed. Then, give your buy button an ID (e.g., `buy-button`) and add a script to trigger the checkout on click. ### Framer Framer makes it easy to add links to any element. - **Simple Link**: Select your button component and add a "Link" interaction. Paste your payment link into the URL field. - **Overlay Checkout**: You can use the "Custom Code" section in Framer settings to add the SDK script. Then, use a code component to trigger the `DodoPayments.Checkout.open()` function. ### WordPress WordPress is highly flexible. - **Simple Link**: Use the Button block in the Gutenberg editor and paste your payment link. - **Overlay Checkout**: Use a plugin like "Insert Headers and Footers" to add the SDK script to your site's header. Then, use a "Custom HTML" block to add your button and the trigger script. ### React If you're building a custom landing page with React or Next.js, you can use the SDK directly. ```tsx import { DodoPayments } from "dodopayments-checkout"; import { useEffect } from "react"; export default function LandingPage() { useEffect(() => { DodoPayments.Initialize({ mode: "live", displayType: "overlay", }); }, []); const openCheckout = () => { DodoPayments.Checkout.open({ checkoutUrl: "https://checkout.dodopayments.com/buy/pdt_your_product_id", }); }; return (

My Awesome Product

); } ``` ## Customizing the Checkout Experience A generic checkout page can hurt conversions. Dodo Payments allows you to customize the checkout experience to match your brand. ### Branding and Colors In the dashboard, you can set your brand colors and upload your logo. These will be applied to both the hosted checkout page and the overlay checkout modal. This ensures that the transition from your landing page to the checkout feels natural. ### Passing Customer Information If you already know the customer's email address (e.g., they just signed up for your newsletter), you can pass it to the checkout page to save them time. Just add the `customer_email` parameter to your payment link: `https://checkout.dodopayments.com/buy/pdt_id?customer_email=user@example.com` ### Handling Redirects After a successful payment, you probably want to send the user to a "Thank You" page or a dashboard. You can configure the redirect URL in the product settings or pass it as a parameter in the payment link. `https://checkout.dodopayments.com/buy/pdt_id?redirect_url=https://dodopayments.com/success` ## Handling Post-Payment Logic with Webhooks While a payment link is great for the frontend, you often need to do something on the backend after a payment is successful. This is where [webhooks](https://docs.dodopayments.com/developer-resources/webhooks) come in. A webhook is a notification sent from Dodo Payments to your server when an event occurs, such as `payment.succeeded`. You can use this to: - Send a fulfillment email with a download link - Create a user account in your database - Grant access to a private Discord or Slack channel - Update your internal sales dashboard Even if you're using a no-code stack, you can use tools like Zapier or Make to receive webhooks and trigger actions in other apps. ## Best Practices for Landing Page Payments To maximize your conversion rate, follow these best practices when adding a payment link to your landing page. ### 1. Use Clear Call-to-Action (CTA) Buttons Your buy button should be prominent and use clear language. Instead of "Submit," use "Buy Now," "Get Started," or "Join the Community." Make sure the button stands out from the rest of the page using a contrasting color. ### 2. Place Buttons Strategically Don't just put one button at the bottom of the page. Place your CTA buttons at multiple points: - In the hero section (above the fold) - After the features or benefits section - In the pricing table - At the very bottom of the page ### 3. Show Trust Signals People are hesitant to enter their credit card details on an unfamiliar site. Show trust signals near your buy button, such as: - "Secure checkout powered by Dodo Payments" - Icons of accepted payment methods (Visa, Mastercard, Apple Pay) - A 30-day money-back guarantee badge - Customer testimonials ### 4. Optimize for Mobile A large percentage of your traffic will come from mobile devices. Dodo Payments' checkout pages are fully responsive and optimized for mobile. Make sure your landing page is also mobile-friendly so the entire flow is seamless. ## Moving Beyond the MVP Once you've validated your product with a simple payment link, you might want to explore more advanced integration options. - **[Embedded Payments](https://dodopayments.com/blogs/embedded-payments-saas)**: For a truly native feel, you can use our [inline checkout](https://docs.dodopayments.com/developer-resources/inline-checkout) to embed the payment form directly into your page layout. - **Usage-Based Billing**: If you're building a SaaS with metered pricing, Dodo Payments supports native usage-based billing. - **License Keys**: If you're selling software, you can use our built-in [license key management](https://docs.dodopayments.com/features/license-keys) to automatically generate and validate keys for your customers. ## Conclusion Adding a payment link to your landing page is the fastest way to start [accepting online payments](https://dodopayments.com/blogs/how-to-accept-online-payments). It requires zero backend code and works with every website builder on the market. By using Dodo Payments as your [Merchant of Record](https://dodopayments.com/blogs/merchant-of-record-for-saas), you also offload the burden of global tax compliance and regulatory hurdles. Whether you are [selling digital products](https://dodopayments.com/blogs/how-to-sell-digital-products-online), [selling software](https://dodopayments.com/blogs/how-to-sell-software-online), or launching a new SaaS, the payment link approach allows you to focus on what matters most: building a great product and finding customers. Ready to get started? [Sign up for Dodo Payments](https://app.dodopayments.com/signup) today and create your first payment link in minutes. ## FAQ ### What is a payment link? A payment link is a unique URL that redirects a customer to a secure, hosted checkout page. It allows businesses to accept payments without needing to build a custom checkout flow or manage a backend server. You can share these links via email, social media, or add them as buttons on your landing page. ### Can I add a payment button to a static website? Yes. Since a payment link is just a standard URL, you can add it to any static website built with HTML, CSS, or site builders like Jekyll, Hugo, or Carrd. You simply create a button or link and set its destination to your Dodo Payments link. ### Do I need a backend server to accept payments on my landing page? No. One of the main advantages of using a payment link is that it requires no backend code. Dodo Payments handles the entire checkout process, payment processing, and tax calculation on our secure servers. You only need a backend if you want to automate post-payment fulfillment via webhooks. ### Does Dodo Payments handle sales tax on payment links? Yes. Dodo Payments acts as a Merchant of Record, which means we are legally responsible for calculating, collecting, and remitting sales tax and VAT globally. This includes US sales tax, EU VAT, and taxes in over 220+ countries and regions. You don't need to register for tax in multiple jurisdictions. ### Can I customize what happens after payment? Yes. You can configure a redirect URL in your Dodo Payments dashboard. After a successful transaction, the customer will be automatically redirected to the URL you specified, such as a thank-you page, a download area, or your application's dashboard. --- For more information on how to scale your business, check out our guides on the [best platform to sell digital products](https://dodopayments.com/blogs/best-platform-sell-digital-products) and our [no-code stack for SaaS](https://dodopayments.com/blogs/no-code-stack-saas-10k-mrr). You can also view our [pricing](https://dodopayments.com/pricing) to see how we help you grow without hidden fees. --- - [More Payments articles](https://dodopayments.com/blogs/category/payments) - [All articles](https://dodopayments.com/blogs)