Checkout & Payment

Complete the purchase flow with payment forms, checkout pages with delivery details, and order confirmation screens using Flowbite Blade block components.

Default Payment Form

Original price
$6,592.00
Savings
-$299.00
Store Pickup
$99
Tax
$799
Total
$7,191.00
PayPal Visa Mastercard

Blade code

<x-fwb.blocks.ecommerce.payment-form />

Custom Payment Form

Secure Payment

Original price
$6,592.00
Savings
-$299.00
Store Pickup
$99
Tax
$799
Total
$7,191.00
PayPal Visa Mastercard

Blade code

<x-fwb.blocks.ecommerce.payment-form
    title="Secure Payment"
    action="/process-payment"
/>

Default Checkout

  1. Cart
  2. Checkout
  3. Order summary

Payment

Pay with your credit card

+$15 payment processing fee

Connect to your account

Delivery Methods

Get it by Tomorrow

Get it by Friday, 13 Dec 2023

Get it today

Subtotal
$8,094.00
Savings
0
Store Pickup
$99
Tax
$199
Total
$8,392.00

One or more items in your cart require an account. Sign in or create an account now.

Blade code

<x-fwb.blocks.ecommerce.checkout />

Custom Checkout

  1. Cart
  2. Checkout
  3. Order summary

Shipping Information

Payment

Pay with your credit card

+$15 payment processing fee

Connect to your account

Delivery Methods

Get it by Tomorrow

Get it by Friday, 13 Dec 2023

Get it today

Subtotal
$8,094.00
Savings
0
Store Pickup
$99
Tax
$199
Total
$8,392.00

One or more items in your cart require an account. Sign in or create an account now.

Blade code

<x-fwb.blocks.ecommerce.checkout
    title="Shipping Information"
    action="/place-order"
/>

Default Order Confirmation

Date
14 May 2024
Payment Method
JPMorgan monthly installments
Name
Flowbite Studios LLC
Address
34 Scott Street, San Francisco, California, USA
Phone
+(123) 456 7890
Track your order Return to shopping

Blade code

<x-fwb.blocks.ecommerce.order-confirmation />

Custom Order Confirmation

Your order is confirmed!

Your order #ORD-20240215 will be shipped within 48 hours. You will receive a tracking email shortly.

Date
14 May 2024
Payment Method
JPMorgan monthly installments
Name
Flowbite Studios LLC
Address
34 Scott Street, San Francisco, California, USA
Phone
+(123) 456 7890
Track your order Return to shopping

Blade code

<x-fwb.blocks.ecommerce.order-confirmation
    title="Your order is confirmed!"
    orderId="#ORD-20240215"
    message="will be shipped within 48 hours. You will receive a tracking email shortly."
/>

Component Properties

Payment Form x-fwb.blocks.ecommerce.payment-form

PropTypeDefaultDescription
title string Payment Section heading for the payment form.
action string # Form action URL for payment submission.
summary slot - Named slot to replace the default order summary sidebar with payment logos.
slot slot - Default slot to replace the credit card form fields.

Checkout x-fwb.blocks.ecommerce.checkout

PropTypeDefaultDescription
title string Delivery Details Heading for the delivery form section.
action string # Form action URL for checkout submission.
steps slot - Named slot to replace the default progress steps indicator.
form slot - Named slot to replace the entire form section (delivery, payment, delivery method, voucher).
summary slot - Named slot to replace the default order summary sidebar.

Order Confirmation x-fwb.blocks.ecommerce.order-confirmation

PropTypeDefaultDescription
title string Thanks for your order! Confirmation page heading.
orderId string #7564804 Order ID displayed prominently.
message string Your order will be processed... Message text displayed after the order ID.
details slot - Named slot to replace the default order details card (date, payment, address, etc.).
actions slot - Named slot to replace the default "Track your order" and "Return to shopping" buttons.
slot slot - Default slot for additional content below the confirmation.