How to Create a Distraction-Free Stripe Payment Landing Page in WordPress
Last updated on
Do you want to know how to create a WordPress checkout / payment page with Stripe?
WP Simple Pay makes it easy for you to create it without having to hire a developer. In this article, let’s check out how to create a distraction-free payments page for boosting conversions in WordPress (step by step)
Why Create a Stripe Payment Page?
The best way to accept payments on your WordPress site is with a custom payment page. A dedicated payment page ensures high conversions as it removes unnecessary friction on the page, like headers, footers, and more, irrespective of the WordPress theme you use.
For creating a payment page, we highly recommend using WP Simple Pay, the best WordPress Stripe plugin. It lets you accept credit card payments and digital wallet payments and enables you to use Buy Now Pay Later feature on your site.
Here are a few benefits of using a payment page on your site.
- Increase conversions: With a dedicated payment page, you can remove all the unnecessary elements that keep your visitors from making a payment.
- Independent of your theme: None of your theme elements, including your header, footer, and navigation menu, will be used in your custom payment page. This gives you endless opportunities to optimize the page for high conversions without hiring a developer.
- Customizable: With WP Simple Pay, you can easily add your logo, custom header, and more without touching a single line of code.
To create a payment page for this tutorial, we’ll be using the WP Simple Pay plugin. You’ll also need to use SSL/HTTPS encryption on your site because that’s a requirement by Stripe for accepting payments. Don’t worry if you don’t have an SSL certificate yet! All that you need to do is to follow this step-by-step guide on how to add SSL in WordPress.
Step 1: Install WP Simple Pay to Create a Payment Page
To create a payment landing page on your website, the first thing you’ll need to do is to install and activate WP Simple Pay. To install the plugin, navigate to the pricing page and select a plan that suits your need. Then download the plugin and install it.
For more details, see this step-by-step guide on how to install WP Simple Pay.
After activating the plugin, you’ll be shown a setup wizard where you’ll be asked to set up a Stripe account and connect it to your site. In the setup wizard, click Let’s Get Started.
If you’re NOT directed to the setup wizard automatically, you can connect your website to Stripe by going to WP Simple Pay » Settings. Next, click on the Stripe tab where you can find the Connect with Stripe button.
Step 2: Connect Your Website to Stripe
Next up, you’ll need to create a new Stripe account or connect an existing account to start accepting payments. Click Connect with Stripe.
In this step, let’s NOT use “Skip this form” as this will create a Stripe account temporarily that can’t be recovered or moved to Live Mode. Instead, enter your email address and create a Stripe account. If you already own a Stripe account, then go ahead and connect it to your site.
When you successfully complete the Stripe-WordPress integration, you’ll see a message that says Setup Complete. Now you can go ahead and create a payment page. Click on the button Create a Payment Form.
Step 3: Create a Stripe Payment Form
To create a payment page, you’ll first need to create a Stripe payment form. You’ll now see a complete list of custom payment form templates available on WP Simple Pay.
While you can choose any form template based on your needs, in this article, we’ll be selecting the Payment Form template. If you’re not on this page yet, you can navigate to WP Simple Pay » Add New to start creating a payment form.
Next, you’ll be prompted to specify the title, description, and a few other details of your form.
By default, On-site payment form will be chosen as your payment type. On-site payment form is the best choice for embedding a payment form within your WordPress site, not on a hosted Stripe checkout page. Since we want to create a payment page on your site, let’s choose this default option.
For the payment success page, if you don’t want to use the default page configured in the plugin settings, choose Specific Page. Alternatively, if you want to redirect users to an external site, choose Redirect URL.
To configure the payment settings, let’s choose the Payment option on the left. Here, you can add new price options and customize the existing ones. Aside from choosing an amount, you can also change the currency and even choose between one time or subscription payments.
Keep in mind that once the form is published, you no longer would be able to customize it. So, for now, let’s NOT change the payment mode to Live Mode until you preview and test the form.
Feel free to enable as many payment methods as you want under the Payment Methods section.
Next, click on the Form Fields on the left. Here, you can add or edit any existing form fields.
Step 4: Create a Stripe Payment / Checkout Page
To create the Stripe payment page, select Payment Page from the left-hand side. Next, select the checkbox Enable a dedicated payment page.
As soon as you click on the checkbox, you’ll be prompted to specify the URL for your payment page, a color scheme for the background, header image / logo. You can also choose to show or hide your payment form’s name and description on the page.
After previewing your form, you can publish it and see the page on the live site. You might want to make a test payment first. And once it looks fine, you can change the mode to Live.
We hope you learned how to create a custom Stripe payments / checkout page in WordPress.
You might also want to check out our following guides:
- How to accept Google Pay / Apple Pay / Microsoft Pay in WordPress
- How to accept buy now, pay later payment in WordPress
- How to accept recurring payments with WordPress