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.
Stripe checkout is a no-code solution for your website’s payment. Without coding, you can create a frictionless payment experience for your customers. Basically, you can use the Stripe dashboard to create product items and other Stripe components. Then, integrate your website with Stripe using a plugin, for example, WP Full Pay. What comes next is easily setting up Stripe payment forms with your product and Stripe checkout options, then adding it to your website.
There are two kinds of Stripe checkout: a Hosted Checkout Page and the other one is elements or on-site check out forms like payment form elements.
Let’s discuss the features of each and show you a simple solution to start accepting payments on your WordPress site using WP Full Pay plugin.
Understanding Stripe Checkout Options
Hosted Stripe Checkout
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 your customer initiates the checkout process, they are redirected to this external page – checkout.stripe.com to complete their payment.
The Stripe Checkout Page supports a wide range of payment methods with different plans, including credit cards, debit cards, and digital wallets.
Standard Stripe checkout pages are best for businesses that want a quick and secure way to accept payments without extensive development.
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.
📖 You might also like to read: How to Add a Payment Gateway to Your WordPress Blog.
Hosted checkout forms redirect customers to a checkout page hosted by the third-party payment gateway you use for accepting payments.
On-Site Checkout with Stripe Elements
Stripe Elements are on-site (inline) checkout forms that provide pre-built UI components for building your own custom payment form.
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.
Stripe Elements are best for businesses that need a custom checkout experience integrated directly into their website.
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.
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.
Hosted vs On-Site Checkout Pages: What Are the Differences?
Each payment 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.
Ease of Setup
- Hosted Checkout Pages: Stripe manages everything for you, making setup quick and easy, even without technical expertise.
- On-Site Checkout Forms: These require more development effort, as you need to integrate Stripe Elements into your website.
Branding Control
- Hosted Checkout Pages: Limited customization options for design (logo, colors, fonts).
- On-Site Checkout Forms: Complete control over the design and branding to ensure seamless integration with your website.
PCI Compliance and Security
- Hosted Checkout Pages: Stripe ensures PCI compliance, handling all sensitive customer data.
- On-Site Checkout Forms: You’ll need to ensure PCI compliance, depending on the level of customization.
Features and Payment Methods
- Hosted Checkout Pages: Supports multiple payment methods, including credit cards, wallets, and Buy Now Pay Later options.
- On-Site Checkout Forms: Customizable to include only the payment methods you prefer, with a tailored checkout flow.
| 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.
FAQ on Stripe Checkout Pages
What is Checkout Stripe?
Checkout Stripe is a prebuilt, customizable payment page provided by Stripe that securely handles the checkout process for online businesses.
What is the difference between Stripe and Stripe checkout?
Stripe is a payment processing platform, while Stripe Checkout is a specific feature that offers a prebuilt, hosted payment page for accepting payments.
What is the difference between Stripe checkout and elements?
Stripe Checkout is a complete hosted payment page, whereas Elements is a set of customizable UI components to build your own payment form.
How to use Stripe Checkout in WordPress?
You can use a plugin like WP Full Pay to add Stripe Checkout to your WordPress site.
Is Stripe free for WordPress?
Stripe itself does not charge any setup or subscription fees, but it applies transaction fees (e.g., 2.9% + $0.30).
📖 You might also like to read Invoice vs Payment Forms: What’s the Difference?