Whenever you add a ‘Buy Now‘ button for a product you have created using the Stripe Payments Plugin to your WordPress website, when a customer clicks on it they will be displayed the popup Stripe checkout window. In this short documentation, we look at how you can add an order summary to the popup window which gives the customer a break down of the total amount due to purchase the item/service.
Default Fields for Stripe Popup Window
From the popup window your customer will always see the following fields:
- Name Field
- Email Field
- Billing Information Fields (for tangible items)
- Credit/Debit Card Field
If your product is somewhat more complex and includes a customer-specified quantity, the ability to apply coupons, a custom question field or variations the following may also be included:
- Enter Quantity Field (Read More About Customer Specified Quantity Here)
- Custom Field (Or Multiple Custom Fields when Using the Following Addon)
- Variation Drop-Down/Checkbox Fields (Read more About Variations Here)
- Coupon Code Field
How Can I Display an Order Summary on the Stripe Popup?
For simple products, displaying an order summary may not make much sense although for those products that have variations, or a shipping or tax amount attached, showing an order summary may better outline the total cost to a customer and therefore ensure they proceed with the purchase. You can enable the order summary feature on a per-product basis when using the Stripe Payments Plugin.
To enable this feature for a product, complete the following:
- Click on the ‘Stripe Payments‘ menu and then on ‘Products‘.
- From here, click the ‘Edit‘ button for the product you wish to add order summary details to within the popup checkout window.
- Scroll down within the ‘Edit Product‘ page to the ‘Appearance‘ section.
- Under ‘Payment Popup Options‘ mark the checkbox to enable ‘Show Order Total on Payment Popup‘.
- Ensure you ‘Update‘ your product to implement this change.
- View the product from the front end of your website and click the ‘Buy Now‘ button to see the summary that will be shown to your customers.
The order summary shown within the popup window dynamically changes as the customer makes different variation selections.
What Does the Order Summary on the Popup Look Like?
When you enable the ‘Show Order Total on Payment Popup‘ feature for a product when a customer clicks the ‘Buy Now‘ button they will be shown additional details relating to a break-down of the payment.
Enabling the ‘Order Summary‘ feature makes the most sense for those products that:
- Have Multiple Variations
- Include a Percentage of Tax
- Include a Shipping Cost
The order summary gives the customers a break down of the final cost of the item. This way they can ensure they are happy with the total before they proceed to click the ‘Payment’ button.
Stripe Popup Checkout ‘With’ an Order Summary
Stripe Popup Checkout ‘Without’ an Order Summary
