Ever wish you could just reach through the screen and grab people’s money when they’re about to buy something from your website? Okay, maybe not grab, but you know what I mean. Making it super easy for people to pay you is the key to more sales.
That’s where landing pages with payment gateways come in. Instead of sending people to a separate checkout page (and risking losing them along the way), you can let them buy directly from the landing page itself. Boom – instant sale.
Plus, when you have a payment gateway built right in, you can do all sorts of cool stuff like offer bonus products at checkout or make it easy for people to buy more with one click.
This guide will break down how to add a payment gateway to your landing page, step by step. Let’s turn those browsers into buyers.
Why Accept Payments on Your Landing Page?
Landing pages are designed to focus a visitor’s attention on one specific goal, whether it’s signing up for your newsletter or buying a product. Unlike your main website, they don’t have many links or distractions that could lead people away.
By adding a payment gateway to your page, you make it easy for people to purchase your products or services immediately.
What You Need to Set Up Payments on Your Landing Page
For accepting payments on your page, you’ll need a few things:
- A Payment Processor: Think of services like Stripe, PayPal, or Square as secure payment processors. They handle all the technical details of accepting different payment methods (like credit cards).
- SSL Certificate: This is like a digital lock for your page. It scrambles any information customers share while being sent so it can’t be stolen.
- PCI Compliance: This means following a set of rules to protect customer credit card information. It sounds complicated, but your payment service will help you figure out what you need to do.
How to Make a Landing Page with Payment Gateway
So, how do you build a payment gateway landing page? Follow the 2 methods below to learn how.
Method 1. Use a Page Builder to Create a Landing Page with Payment Gateway
First, we’ll show you how to create a landing page and add payment integration with SeedProd.
![seedprod-website-builder - SeedProd SeedProd Drag and Drop WordPress website builder](https://www.seedprod.com/wp-content/uploads/2023/07/seedprod-website-builder.png)
SeedProd is the best website and landing page builder for WordPress. It lets you create any part of your web design without writing code.
You can use SeedProd to build landing pages like:
- High-converting sales pages
- Entire WordPress website designs
- Complete WooCommerce websites with checkout pages, product pages, and more.
- Custom headers, footers, sidebars, and templates
Adding features to your site is easy with its customizable templates, WordPress blocks, and sections.
For instance, you can embed social media follow and share buttons to raise brand awareness and get more followers. Or you can use lead-generating elements like optin-forms, countdown timers, and call-to-action buttons to grow your list and boost sales.
One of the elements we’ll use in this method is SeedProd’s Payment Button block, which has payment gateway integration. It lets you start accepting payments using Stripe. It’s quick and easy to set up and requires zero coding.
So follow the steps below to create a payment gateway landing page with Stripe.
Step 1. Install and Activate SeedProd
The first step is to go to the SeedProd pricing page and choose a plan. For this guide, we’ll be using SeedProd Pro for its advanced features, but you can use the Stripe Payment Button on any plan, including the unlimited free trial of SeedProd.
After choosing a plan, log into your SeedProd account and download the plugin file. You can also copy your license key on the same page if you’re using the premium version.
![copy-seedprod-license-key - SeedProd Find your SeedProd license key](https://www.seedprod.com/wp-content/uploads/2021/03/copy-seedprod-license-key.png)
Now go to your WordPress website and upload the SeedProd plugin. If you need help, follow this guide on installing and activating a WordPress plugin.
Once you’ve done that, navigate to the SeedProd » Settings page and paste your license key.
![seedprod-theme-builder-license-key - SeedProd enter your license key](https://www.seedprod.com/wp-content/uploads/2022/01/seedprod-theme-builder-license-key.png)
Now go ahead and click the Verify Key button to store your license settings.
Step 2. Choose a Landing Page Template
The next step is to choose a template design for your page. To do that, you can go to SeedProd » Landing Pages and click on the Add New Landing Page button.
![add-new-landing-page-seedprod - SeedProd Add new landing page](https://www.seedprod.com/wp-content/uploads/2022/11/add-new-landing-page-seedprod.png)
On the following screen, you’ll see a library of professionally designed landing page templates.
You can click any of the filters at the top to narrow down your search. For example, clicking the Sales filter will only show the sales page designs.
![sales-page-templates - SeedProd sales page templates](https://www.seedprod.com/wp-content/uploads/2020/10/sales-page-templates.jpg)
When you’ve found a design you like, click the checkmark icon.
![choose-landing-page-template - SeedProd Choose a landing page template](https://www.seedprod.com/wp-content/uploads/2022/11/choose-landing-page-template.png)
After, a popup will open asking you to enter your page name and URL. Don’t worry if you can’t think of a good name; we’ll show you how to edit it later.
![landing-page-name-1 - SeedProd Enter your landing page name](https://www.seedprod.com/wp-content/uploads/2022/11/landing-page-name-1-800x530.png)
Now go ahead and click on the Save and Start Editing the Page button.
Step 3. Add the Payment Button Block
On the next screen, you’ll see a layout similar to the example below:
![drag-and-drop-builder - SeedProd SeedProd landing page builder](https://www.seedprod.com/wp-content/uploads/2022/11/drag-and-drop-builder.png)
On the left are WordPress blocks and sections you can add to your landing page design. Then, on the right is a live preview where you can preview the changes you make in real-time.
You can customize any part of your page by clicking anywhere on the live preview. For example, clicking the headline lets you type directly on the design to change the content.
![headline-settings - SeedProd landing page headline settings](https://www.seedprod.com/wp-content/uploads/2022/11/headline-settings.png)
A settings panel will also open on the left, where you can access advanced settings for customizing your fonts, colors, spacing, HTML, and more.
As you can see in this example, you can also edit sections to change the background image easily. Simply click an element and customize it to look exactly like you want.
![section-background-settings - SeedProd Section background settings](https://www.seedprod.com/wp-content/uploads/2022/11/section-background-settings.png)
Adding an online payment gateway to your page is just as easy. Simply search for the Payment Button block and drag it onto your page.
![payment-button-block - SeedProd SeedProd payment button](https://www.seedprod.com/wp-content/uploads/2022/11/payment-button-block.png)
After doing that, the block settings will open, where you can click the Connect with Stripe button to link your Stripe account.
![connect-stripe-payment-button - SeedProd Connect with Stripe](https://www.seedprod.com/wp-content/uploads/2022/11/connect-stripe-payment-button.png)
You’ll automatically head to the Stripe login screen, where you can enter your verification code, but you’ll go straight back to your landing page design once the connection is complete.
![connect-seedprod-to-stripe - SeedProd Verify SeedProd connection to Stripe](https://www.seedprod.com/wp-content/uploads/2022/11/connect-seedprod-to-stripe.png)
Once you’ve authorized the Stripe connection, you can customize the payment button settings.
For instance, you can edit the following settings:
- Payment amount
- Payment description
- Payment currency
- Success URL
![payment-setup-settings - SeedProd Payment button settings](https://www.seedprod.com/wp-content/uploads/2022/11/payment-setup-settings.png)
The Success URL is the page you’d like to redirect shoppers to after they complete their purchase. For example, you can create a thank you page with SeedProd and redirect customers to that page when they check out successfully.
In addition to the above settings, you can customize the button text, sub-text, alignment for mobile and desktop, and button size, and even add Font Awesome icons.
Need more customization options? Simply click the Advanced tab to find button style, color, font, spacing, margin settings, and more.
With payments set up, you can continue customizing your page until you’re happy with how the design looks.
Remember to hit the Save button in the top-right corner to save your changes.
![save-landing-page - SeedProd Save changes to your landing page with payment gateway](https://www.seedprod.com/wp-content/uploads/2022/11/save-landing-page.png)
Step 4. Configure Your Settings
We mentioned earlier that you can change your page settings before publishing your page. To do that, click the Page Settings button at the top of the page builder screen.
In the General settings, you can edit your page name and URL, publish your page and show your SeedProd affiliate link.
![general-settings - SeedProd General landing page settings](https://www.seedprod.com/wp-content/uploads/2022/11/general-settings.png)
If you have a WordPress SEO plugin like All in One SEO installed, you can click the SEO tab to enter your search engine optimization settings.
![seo-settings - SeedProd Landing page SEO settings](https://www.seedprod.com/wp-content/uploads/2022/11/seo-settings.png)
Some other settings you can access include the following:
- Track the performance of your page with MonsterInsights, a powerful Google Analytics plugin for WordPress.
- Add custom scripts to your web page header, body, and footer for tracking and retargeting.
- Give your page a custom domain name separate from your website (Elite plans only).
You can also click the Connect tab at the top of the page to link your page to your email marketing service, Google Analytics, spam protection, and Zapier.
![Optin Form Integrations - SeedProd SeedProd email integrations](https://www.seedprod.com/wp-content/uploads/2021/12/Optin-Form-Connect-800x334.png)
Step 5. Publish Your Landing Page
When you’re ready to make your page live, click the Save button and select the Publish option.
![publish-landing-page-1 - SeedProd Publish your landing page](https://www.seedprod.com/wp-content/uploads/2022/11/publish-landing-page-1.png)
Now, when visitors click your payment button, they’ll be able to check out using Stripe.
![landing-page-with-payment-gateway-example - SeedProd Landing page with payment gateway example](https://www.seedprod.com/wp-content/uploads/2022/11/landing-page-with-payment-gateway-example.jpg)
Method 2. Use a Plugin to Integrate a Payment Gateway with Your Landing Page
Another way to create a landing page with a payment option is to use a WordPress payment plugin.
![wp-simple-pay - SeedProd WP Simple Pay Homepage](https://www.seedprod.com/wp-content/uploads/2022/09/wp-simple-pay.png)
WP Simple Pay is one of the best and easiest-to-use WordPress payment plugins. It lets you add Stripe payments to any post or page on your WordPress site without code.
So, if you don’t want to create a high-converting landing page and need a more straightforward option, WP Simple Pay is a great alternative to page builders.
Note: to accept payments using WP Simple Pay; you’ll need an active SSL certificate. Here’s a guide on adding SSL to WordPress if you need help.
Step 1. Install and Activate WP Simple Pay
The first step is to get your copy of WP Simple Pay from their website. Then, install and activate the plugin on your website.
Once the plugin is active, you’ll automatically see the Setup Wizard, which automates your entire setup process.
![WP-simple-pay-setup-wizard - SeedProd WP Simple Pay setup wizard](https://www.seedprod.com/wp-content/uploads/2022/11/WP-simple-pay-setup-wizard.png)
To start the Setup Wizard, click the Let’s Get Started button.
Step 2. Complete the Setup Wizard
The setup process has four steps. First, you’ll be asked to enter your WP Simple Pay license key, which you’ll find in your account dashboard’s Downloads section.
![activate-wpsimplepay-license - SeedProd Activate WP Simple Pay license key](https://www.seedprod.com/wp-content/uploads/2022/11/activate-wpsimplepay-license.png)
Enter your license key, then click the Activate and Continue button.
On the next screen, you’ll need to connect with your Stripe account, so click the Connect with Stripe button.
![connect-with-stripe - SeedProd Connect to Stripe with WP Simple Pay](https://www.seedprod.com/wp-content/uploads/2022/11/connect-with-stripe.png)
Now, you’ll need to log into your Stripe account and verify the connection.
![connect-wp-simple-pay-to-stripe - SeedProd Connect WP Simple Pay to Stripe](https://www.seedprod.com/wp-content/uploads/2022/11/connect-wp-simple-pay-to-stripe.png)
Once you’ve done that, you’ll go back to the setup wizard, where you can choose which emails customers will receive after completing a payment.
For example, you can send a payment receipt, payment notification, invoice receipt, and upcoming invoice.
![configure-email-settings - SeedProd WP Simple Pay email settings](https://www.seedprod.com/wp-content/uploads/2022/11/configure-email-settings.png)
After choosing your email notifications, click the Save and Continue button.
![create-payment-form - SeedProd Setup wizard complete. Create a Payment form.](https://www.seedprod.com/wp-content/uploads/2022/11/create-payment-form.png)
The setup is now complete. The next step is to create a form for shoppers to enter their payment details. To do that, click the Create a Payment Form button.
Step 3. Create a Payment Form
On the next screen, you’ll see the different payment form templates available with WP Simple Pay. You can choose from different form types, including Fundraising, Products and Services, Registrations, Donations, and more.
For this tutorial, we’ll choose the Payment Button template. To do so, hover over the template and click the Use Template button.
![wp-simple-pay-templates - SeedProd WP Simple Pay templates](https://www.seedprod.com/wp-content/uploads/2022/11/wp-simple-pay-templates.png)
Your payment button settings will now open on the next screen. Here, you can edit general settings, including the button name, description, type, and payment success page.
![payment-button-general-settings - SeedProd General payment button settings](https://www.seedprod.com/wp-content/uploads/2022/11/payment-button-general-settings.png)
In the payment tab, you can set up the default price on your payment button and choose between one-time and recurring payments.
![payment-button-price-options - SeedProd Payment button price options](https://www.seedprod.com/wp-content/uploads/2022/11/payment-button-price-options.png)
You can also choose from multiple payment methods, including credit card, direct debit, Alipay, Klarna, and Clearpay.
Once you’ve finished customizing your payment button settings, click the Publish button.
Step 4. Add Payment Buton to Your Landing Page
The next step is to add the payment button to your page. The WP Simple Pay WordPress block allows you to add it anywhere on your page.
To do this, create or edit a WordPress page, then in the content editor, click the plus button and select the WP Simple Pay block.
![wp-simple-pay-WordPress-block - SeedProd WP Simple Pay WordPress block](https://www.seedprod.com/wp-content/uploads/2022/11/wp-simple-pay-WordPress-block.png)
You can then select your payment button from the dropdown menu.
![select-payment-form - SeedProd Select WP Simple Pay payment form](https://www.seedprod.com/wp-content/uploads/2022/11/select-payment-form.png)
After updating or publishing your payment page, you can preview your payment button and gateway in action.
![landing-page-with-payment-gateway-button - SeedProd landing page with payment gateway example](https://www.seedprod.com/wp-content/uploads/2022/11/landing-page-with-payment-gateway-button-800x681.png)
That’s it!
Frequently Asked Questions
Transaction fees: How much does each gateway charge per transaction?
Supported countries: Does it work in the countries where you do business?
Accepted payment methods: Does it support the cards and payment options your customers use?
Integration: How easily does it work with your website or shopping cart?
Security: How secure is the gateway?
Some popular options include Stripe, PayPal, Square, and Braintree.
You now know how to make a landing page with payment gateway functionality.
If you’re interested in creating an entire eCommerce store, here are some tutorials that may help:
- How to Add a Custom Add-to-Cart Button in WooCommerce
- How to Display Product Categories and Tags in WooCommerce
- How to Easily Customize Your WooCommerce Shop Page
Thanks for reading! We’d love to hear your thoughts, so please feel free to leave a comment with any questions and feedback.
You can also follow us on YouTube, X (formerly Twitter), and Facebook for more helpful content to grow your business.