The Express Checkout Button feature in ShopLentor Pro lets you display Stripe-powered express payment buttons on WooCommerce cart and checkout pages using Elementor or Gutenberg. Customers can use supported payment methods, including Apple Pay, Google Pay, and Link, to complete purchases without manually entering their payment details.
You can position the payment buttons within your cart or checkout layout, customize the surrounding container, and display an optional OR separator below the buttons.
The feature is available in ShopLentor Pro version 3.4.4 or later.
Why use Express Checkout?
Express checkout provides a convenient payment option for customers who prefer digital wallets.
Use this feature to:
- Display Apple Pay, Google Pay, and Link through Stripe.
- Add express payment buttons using Elementor or Gutenberg.
- Position payment options above checkout forms or near cart totals.
- Customize the payment container and separator.
- Offer a faster alternative to the standard checkout process.
- Avoid duplicate Stripe express payment buttons in supported ShopLentor templates.
Note: Stripe determines which payment methods are available based on the customer’s device, browser, wallet configuration, and payment settings.
Before you begin
Make sure WordPress, WooCommerce, and ShopLentor Pro are installed and active. Elementor is also required if you plan to use the Elementor widget.
Configure the following requirements before adding express payment buttons.
| Requirement | Description |
|---|---|
| ShopLentor Pro | Version 3.4.4 or later. |
| WooCommerce Stripe Payment Gateway | Install and activate the official WooCommerce Stripe plugin. |
| Stripe Connection | Connect your Stripe account through WooCommerce payment settings. |
| Express Checkout | Enable Express Checkout under WooCommerce → Settings → Payments → Stripe. |
| HTTPS | Use a secure HTTPS connection. |
| Digital Wallet | Customers need a supported browser, device, and configured payment method. |
| Apple Pay Domain Verification | Your domain must be verified for Apple Pay in Stripe. The Stripe plugin usually handles this process. |
Important: Apple Pay, Google Pay, and Link may not all appear for every customer. Their availability is controlled by Stripe.
1. Enable Express Checkout in ShopLentor
Express Checkout is available as both an Elementor widget and a Gutenberg block.
You can enable them separately.
| Editor | How to enable |
|---|---|
| Elementor | Go to ShopLentor → Settings → Elements → Cart, find Express Checkout Button, turn it ON, and save. |
| Gutenberg | Go to ShopLentor → Settings → Blocks and enable Express Checkout Button under the Cart and Checkout sections as needed. |
Both options are enabled by default and appear with a New badge.
Widget and block information
| Information | Elementor Widget | Gutenberg Block |
|---|---|---|
| Editor Name | WL: Express Checkout | WL: Express Checkout |
| Admin Name | Express Checkout Button | Express Checkout Button |
| Category | ShopLentor Pro | WooLentor Checkout |
| Available Templates | Cart and Checkout | Cart and Checkout |
| Search Keyword | express checkout | express checkout |
2. Add Express Checkout using Elementor
- Go to ShopLentor → Template Builder.
- Create or edit a Cart or Checkout template.
- Click Edit with Elementor.
- Search for
express checkout,apple pay, orstripe. - Find WL: Express Checkout under ShopLentor Pro.
- Drag the widget into your preferred location.
- Configure its settings and publish or update the template.
- Make sure the template is assigned as the active Cart or Checkout template.
Important: The Elementor widget is available only when editing a ShopLentor Cart or Checkout template. It does not appear in other template types or regular Elementor pages.
Elementor editor preview
The editor displays demonstration buttons for:
- Apple Pay
- Google Pay
- Link
An Editor Preview Only notice explains that the actual payment buttons are rendered by Stripe on the frontend.
You can use the Configure Stripe Settings link to access the Stripe configuration.
3. Configure Elementor Content settings
Open Content → Settings.
| Setting | Description | Default |
|---|---|---|
| Show ‘OR’ Separator | Displays a separator below the express payment buttons. | Show |
| Separator Text | Sets the separator label. | OR |
| Editor Preview Only | Displays information about the demo buttons and Stripe configuration. | Informational notice |
You can replace OR with another label, such as Or pay with card.
The separator appears on the frontend only when Stripe successfully displays express payment buttons.
4. Customize Elementor Style settings
Open the Style tab to customize the widget container and separator.
| Style Section | Available Controls | Description |
|---|---|---|
| Container | Padding, Margin, Background Color, Border Type, Border Width, Border Color, Border Radius, Box Shadow | Customize the spacing, background, border, and overall appearance of the payment area. |
| Separator | Typography, Text Color, Line Color, Spacing (Top), Alignment | Customize the separator text, lines, spacing, and position. |
Additional settings:
- Padding, margin, border radius, and separator spacing support responsive adjustments.
- The default separator line color is
#d0d0d0. - Separator alignment supports Left, Center, and Right.
- The default separator alignment is Center.
Tip: Keep the container styling simple and maintain enough spacing between express payment buttons and the standard checkout form.
5. Add Express Checkout using Gutenberg
ShopLentor Pro also includes an Express Checkout Gutenberg block.
- Go to ShopLentor → Template Builder.
- Create or edit a Cart or Checkout template.
- Open the template in the WordPress block editor.
- Click the + button to add a block.
- Search for
Express Checkout. - Select WL: Express Checkout from the WooLentor Checkout category.
- Position the block within your layout.
- Configure its settings in the block sidebar.
- Save the template.
The block editor displays demonstration payment buttons. Actual Stripe buttons appear on the frontend when the payment requirements are met.
6. Configure Gutenberg block settings
Select the WL: Express Checkout block to access its settings.
The block includes General, Styles, and Advanced tabs.
General settings
| Setting | Description | Default |
|---|---|---|
| Show ‘OR’ Separator | Shows or hides the separator below the payment buttons. | Enabled |
| Separator Text | Changes the separator label. | OR |
| Stripe Configuration Notice | Explains that the editor buttons are a preview and provides a Stripe settings link. | Informational notice |
Styles settings
Use the following controls to customize the Gutenberg block.
| Section | Available Controls | Description |
|---|---|---|
| Container | Background Color, Border Type, Border Width, Border Color, Border Radius, Padding | Customize the appearance and spacing of the express payment container. |
| Separator | Typography, Text Color, Line Color, Spacing Top, Alignment | Customize the separator displayed below the buttons. |
| Area | Padding, Background Image, Background Position, Attachment, Repeat, Size | Customize the outer block wrapper. |
| Alignment | Wide Width, Full Width | Adjust the block’s overall width within the supported layout. |
The separator alignment options include Left, Center, and Right, along with the additional alignment option shown in the block editor.
Note: The Gutenberg block provides separate styling options from the Elementor widget. Some settings, such as the Area background controls, are specific to Gutenberg.
7. How Express Checkout works
The Elementor widget and Gutenberg block both integrate with Stripe to display available express payment buttons.
| Behavior | Description |
|---|---|
| Editor Preview | Shows demonstration Apple Pay, Google Pay, and Link buttons. |
| Frontend Display | Stripe renders actual payment buttons based on its configuration. |
| Loading Placeholder | Displays two gray skeleton buttons while Stripe initializes. |
| Loading Timeout | Removes the placeholder after approximately five seconds if no buttons appear. |
| Separator Visibility | Shows the separator only when express payment buttons are available. |
| Duplicate Prevention | Prevents Stripe’s default express payment buttons from appearing alongside the ShopLentor placement in supported templates. |
| Payment Availability | Depends on the customer’s browser, device, wallet setup, and Stripe configuration. |
Important differences between Elementor and Gutenberg
Elementor: The widget checks whether it is being rendered on a Cart or Checkout page. Its Stripe integration and duplicate-button handling operate within supported ShopLentor templates.
Gutenberg: The block can render outside those template contexts and does not perform the same Cart or Checkout page check. Its duplicate-button handling also differs.
For normal use, place either option in a supported Cart or Checkout template.
8. Recommended placement and responsive tips
Express payment buttons should be easy to find without interrupting the standard checkout process.
| Placement | Recommendation |
|---|---|
| Top of Checkout Form | Recommended for giving customers an immediate express payment option. |
| Above Billing Details | Helps customers choose a digital wallet before entering their information. |
| Near Cart Totals | Suitable for customers ready to complete their purchase from the cart page. |
| Above Standard Checkout Fields | Creates a clear distinction between express and traditional checkout. |
Before publishing:
- Review the layout on desktop, tablet, and mobile.
- Keep payment buttons clearly visible.
- Use consistent spacing between buttons and other elements.
- Keep the separator short and readable.
- Test payment methods on supported devices.
- Verify actual Stripe payment functionality on the frontend.
Recommendation: Place express payment buttons above the standard checkout form and use the OR separator to distinguish the two payment options.
9. Troubleshooting
| Problem | Possible Cause and Solution |
|---|---|
| Express Checkout is missing in Elementor | Confirm that the widget is enabled in ShopLentor → Settings → Elements and that you are editing a Cart or Checkout template. |
| Buttons appear in the editor but not on the frontend | Check that Stripe is installed, connected, and configured. Confirm HTTPS and supported wallet availability. |
| Skeleton loader disappears without displaying buttons | The browser or device may not have a supported wallet, or the Stripe configuration may be incomplete. |
| Only some payment methods appear | Stripe determines available payment methods based on the customer’s browser, device, and wallet configuration. |
| Buttons appear twice | Check whether your theme or another plugin is adding Stripe buttons outside the ShopLentor template. |
| The ‘OR’ separator is missing | Enable the separator in settings. It only appears when express payment buttons are displayed. |
Common error messages
| Error Message | Solution |
|---|---|
| Express Checkout requires the WooCommerce Stripe Gateway plugin to be installed and active. | Install and activate WooCommerce Stripe Payment Gateway. |
| Express Checkout is not initialized. Ensure Stripe Express Checkout is enabled in Stripe → Settings. | Enable Express Checkout and complete the Stripe configuration. |
| Express Checkout only renders on the cart or checkout page. | Place the Elementor widget in a supported Cart or Checkout template. |
Frequently asked questions
Is Express Checkout available in the free version of ShopLentor?
No. Both the Elementor widget and Gutenberg block require ShopLentor Pro version 3.4.4 or later.
Can I use Express Checkout with both Elementor and Gutenberg?
Yes. ShopLentor Pro provides an Elementor widget named WL: Express Checkout and a Gutenberg block with the same display name.
Why are Apple Pay or Google Pay buttons not appearing?
Stripe displays payment methods based on browser compatibility, device support, wallet configuration, and payment settings. Ensure the website uses HTTPS and the required payment methods are configured.
Can I change or hide the ‘OR’ separator?
Yes. You can disable the separator or customize its text in the Elementor Content settings or Gutenberg General settings.
Does Express Checkout work without Stripe?
No. The feature requires the WooCommerce Stripe Payment Gateway plugin with Express Checkout enabled.