React Shared Components

Interactive testing environment for react-shared components

Theme Playground

Current: Default

Summary

Order summary component displaying purchased products with total calculation and confirmation message.

Interactive Playground

user image

Order Complete

Thanks for your purchase!

  • Premium Course:

    $9,900

  • Bonus eBook:

    $2,900

  • Total :

    $12,800

Confirmation sent to your email

Layout Variants

Default

Order Complete

Thanks for your purchase!

  • Premium Course:

    $9,900

  • Bonus eBook:

    $2,900

  • Total :

    $12,800

A purchase confirmation has been sent to your email.

Brim

user image

Order Complete

Thanks for your purchase!

  • Premium Course:

    $9,900

  • Bonus eBook:

    $2,900

  • Total :

    $12,800

A purchase confirmation has been sent to your email.

Ode

user image

Order Complete

Thanks for your purchase!

  • Premium Course:

    $9,900

  • Bonus eBook:

    $2,900

  • Total :

    $12,800

A purchase confirmation has been sent to your email.

Nova

user image

Order Complete

Thanks for your purchase!

  • Premium Course:

    $9,900

  • Bonus eBook:

    $2,900

  • Total :

    $12,800

A purchase confirmation has been sent to your email.

Crest

user image

Order Complete

Thanks for your purchase!

  • Premium Course:

    $9,900

  • Bonus eBook:

    $2,900

  • Total :

    $12,800

A purchase confirmation has been sent to your email.

Rung

user image

Order Complete

Thanks for your purchase!

  • Premium Course:

    $9,900

  • Bonus eBook:

    $2,900

  • Total :

    $12,800

A purchase confirmation has been sent to your email.

Glint

user image

Order Complete

Thanks for your purchase!

  • Premium Course:

    $9,900

  • Bonus eBook:

    $2,900

  • Total :

    $12,800

A purchase confirmation has been sent to your email.

Common Use Cases

Single Product Purchase

Payment Successful

Your order is confirmed

  • Complete Web Development Course:

    $14,900

  • Total :

    $14,900

A purchase confirmation has been sent to your email.

Bundle Purchase

Order Complete

Thank you for your purchase!

  • Starter Course:

    $4,900

  • Advanced Course:

    $9,900

  • Bonus Templates:

    $1,900

  • Total :

    $16,700

A purchase confirmation has been sent to your email.

Sale Price Applied

Order Confirmed

You saved 50%!

  • Premium Membership:

    $4,900

  • Total :

    $4,900

A purchase confirmation has been sent to your email.

Free Product

Download Ready

Your free resource is ready!

  • Free eBook Guide:

    FREE

  • Total :

    $0

A purchase confirmation has been sent to your email.

API Reference

PropTypeDefaultDescription
layout'default' | 'brim' | 'ode' | 'nova' | 'crest' | 'rung' | 'glint''default'Visual layout variant
currencystring'USD'Currency code for price formatting
bannerImagestring''Optional banner image URL
headingstring''Main heading text (defaults to translation)
titlestring''Subtitle text (defaults to translation)
buttonstring''Confirmation message text (defaults to translation)
productsProduct[][]Array of purchased products
themeanyundefinedTheme override
classNamestringundefinedAdditional CSS classes

Product Type

tsx
interface Product {
  title: string;
  price: Price;
}

interface Price {
  amount: number;
  sale_amount: number;
  sale_amount_available: boolean;
}

Features

  • 7 layout variants with different visual styles
  • Automatic total calculation from product prices
  • Sale price support with automatic selection
  • Free product handling (displays "Free" instead of $0.00)
  • Multi-currency support with proper formatting
  • Optional banner image display
  • Internationalization support via useTranslation hook
  • Theme-aware styling with layout-specific variants
  • Responsive design for all screen sizes

Usage Notes

Price Calculation: The component automatically uses sale_amount if sale_amount_available is true and sale_amount is greater than 0, otherwise it uses the regular amount.

Currency Formatting: Uses the formatCurrency utility function to properly format prices based on the currency code.

Layout Variants: Different layouts provide varying levels of visual emphasis and styling. Choose based on your brand and the importance of the summary in your flow.

Banner Images: Some layouts (brim, ode, nova, crest, rung, glint) include special styling for banner images with masks and rounded corners.

Translations: Default text values come from the translation system. You can override them by providing custom heading, title, and button props.