When you sell products, offer services, collect donations, or simply want to monetize your WordPress blog, you need a reliable payment gateway that offers flexible functionality.
This functionality includes how you want to collect money, which payment methods you want to add to checkout pages, where you want to embed the checkout forms, customization options, and more.
In this article, we’ll review Stripe embedded checkout pages, discuss the differences between hosted and on-site (inline) checkout layout forms, and explain how you can embed Stripe checkout pages on your WordPress site.
So, let’s get started.
Stripe Checkout Pages: overview
What exactly are Stripe Checkout Pages?
Stripe checkout page is a pre-built, hosted payment page provided by Stripe that allows businesses to accept payments securely.
When customers proceed to checkout, they are redirected to this Stripe hosted page to complete their transaction.
The Stripe Checkout Page supports a wide range of payment methods with different plans, including credit cards, debit cards, digital wallets.
Stripe offers different kinds of checkout pages to meet various business needs.
Here’s an overview:
Standard Stripe checkout
Standard Stripe checkout is a pre-built, hosted payment page provided by Stripe. It is a hosted checkout form. This means that when customers proceed to checkout, they are redirected to a secure, Stripe hosted payment page to complete their transaction.
These hosted Stripe checkout pages support one-time and recurring payments, customizable branding, multiple payment methods, and built-in security and compliance features.
Standard Stripe checkout pages are best for businesses that want a quick and secure way to accept payments without extensive development.
Stripe payment links
Stripe payment links are simple way to create a payment page without any code.
With this checkout type, you generate links that direct customers to a Stripe hosted payment page. These links can be shared via email, social media, or embedded in a website.
Stripe payment links are best for businesses that want quick invoicing, social media sales, or any scenario where sharing a payment link is beneficial.
Stripe billing
Stripe billing is designed for businesses that offer subscription services or need to manage recurring billing. Its features include automated billing, invoicing, proration, and support for metered billing. Stripe billing also integrates with the standard Stripe Checkout page for subscription management.
SaaS companies, businesses that accept recurring payments, and businesses needing robust recurring billing management can use the Stripe billing checkout type.
Stripe Elements
Stripe Elements are on-site (inline) checkout forms that is set of pre-built UI components for building your own custom payment form.
It’s highly customizable, flexible checkout forms that allow you to have control over the payment experience you provide to your customers.
Stripe Elements are best for businesses that need a custom checkout experience integrated directly into their website.
Stripe invoicing
Stripe invoicing allows you to create and send invoices with embedded payment options. This is best for the cases where you save customer card details and charge them later.
Stripe invoicing includes customizable invoice templates, automatic reminders, and integration with Stripe’s payment processing. This is best for businesses that need to invoice clients and accept payments online.
Hosted vs on-site checkout pages: what are the differences?
When you integrate Stripe payment solutions on your WordPress site, you can choose between hosted checkout pages and on-site (inline) checkout pages. Each form layout has its own advantages and use cases.
Hosted and on site checkout forms not only differ visually, but also have some functional differences.
The choice between hosted vs on-site checkout pages depends on the design preferences, available screen space, and the desired user experience for handling payments on your WordPress site. You should evaluate your specific needs, technical capabilities, and the level of user experience you want to provide to decide which type of checkout page is best for adding payment buttons.
Additionally, using Stripe hosted pages can simplify PCI compliance and reduce the burden on your server infrastructure.
Hosted checkout pages
Hosted checkout pages are payment pages hosted by a third-party payment gateway, such as Stripe. When your customer initiates the checkout process, they are redirected to this external page – checkout.stripe.com to complete their payment.
Hosted checkout pages offer a high level of security and PCI compliance, as the payment gateway handles all sensitive payment information. Using Stripe hosted pages makes the payment process easy and provide a consistent, reliable checkout experience for your customers.
When to use hosted checkout forms?
It’s best to use hosted checkout forms when you don’t want to display the full payment form on your site. This is ideal for ‘Buy Now’ CTA buttons, pricing tables, or situations where space is limited. Hosted checkout pages are best when you prefer a more compact or embedded form and the payment process involves redirection to a dedicated checkout page (checkout.stripe.com).
Example: A blogger that accept donations adding a “Donate Now” button at the end of their posts that redirects to a Stripe hosted checkout page for secure payment processing. Or, a merchant creating a product page to sell on WordPress without WooCommerce.
Hosted checkout forms redirect customers to a checkout page hosted by the third-party payment gateway you use for accepting payments.
On-site checkout pages (inline checkout)
On-site checkout pages, also known as inline checkout forms, are embedded directly within your website. When you create and add inline checkout forms to your WordPress pages or posts, your customers complete their payment without leaving your site.
On-site checkout forms have high level of customization and allows you to fully match the checkout form with your site’s design and branding. With this type of form layout, you have greater control over the user interface and checkout flow.
Inline checkout form layout type keeps the customer on your website throughout the payment process.
When to use on-site checkout forms?
If you have enough space on the page to display the entire form at once, then inline checkout form layout suits the best.
On the on-site checkout forms, all the fields of order form are displayed at once.
Example: An e-commerce site integrating a fully customized checkout form directly on their product pages to maintain a consistent user experience.
On-site checkout forms are embedded to a website page or post, where customers initiate and complete the transaction without leaving your website.
| Features | On-site checkout forms | Hosted Checkout forms |
|---|
| Visuals | The entire form is visible on the page | Only the (optional) product selector, and the button to open a form are on the page |
| Payment location | On your website | On stripe.com’s hosted page |
| Stripe customer behavior | Existing customer used on repeat purchase | New customer created on every purchase |
| SCA / 3DS compliant | Yes | Yes |
| PCI compliant | Yes | Yes |
| Display languages | Danish, English, French, German, Italian, Japanese, Spanish | 34 languages |
| Currency format | Configurable | Auto-detected |
| Translate/change labels | Yes | No |
| Product images shown | No | Yes |
| Discounts | Coupons and promotional codes | Promotional codes |
| Billing address | Supported | Supported |
| Shipping address | Supported | Supported |
| Custom fields | Supported | Supported
(Displayed on the website, not on Stripe’s hosted page) |
| Simple button layout | Not applicable | Yes |
| Billing anchor day | Yes | No |
| Email receipts | WP Full Pay plugin and Stripe | WP Full Pay plugin and Stripe |
| Google reCAPTCHA | Supported | Supported |
| Customer portal | Supported | Support with side effects, due to Stripe customer behavior |
| Tax behavior | No tax, fixed, and dynamic via Stripe tax rates | No tax, fixed, and dynamic via Stripe tax rates |
| Thank you page | Supported | Supported |
How to embed Stripe checkout to your WordPress site pages?
Assuming you’ve installed WP Full Pay integrated Stripe to your WordPress site, embedding a payment form to your WordPress posts or pages is easy.
Since WP Full Pay v7.0, you no longer need to manually add Stripe API keys, unless you have customized your code or are using the WP Full Pay Members Add-on. Learn how to set up Stripe on WP Full Pay v7.0.
Once you created a payment form, you just need to copy the shortcode of the payment form you want to add, and paste the code to the desired section of a post or page on the WordPress editor page.
With WP Full Pay, you can create the following payment forms:
You can download WP Full Pay plugin for free, create Stripe payment forms, and test Stripe transactions on your WordPress site.