Skip to main content
Version: Next

CartContainer

Handles showing the user's cart items and starting the checkout flow, the user can also remove items from the cart.

Usage#

import React from "react";
import {
CartContainer,
CartRemoveItemButton,
CartTotalPrice,
CartSubmit,
usePelcro,
Alert,
} from "@pelcro/react-pelcro-js";
import "@pelcro/react-pelcro-js/dist/pelcro.css";
const formatPrice = (amount, currency) => {
const formatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency,
});
return formatter.format(amount / 100);
};
export const CustomCartView = () => {
const { cartItems } = usePelcro();
return (
<div>
{cartItems.length ? (
<CartContainer
onSuccess={(cartItems) => {
console.log(cartItems);
}}
>
<Alert />
<div>
{cartItems.map((item) => {
return (
<div key={item.id}>
<div>{item.image && <img src={item.image} />}</div>
<p>{item.name}</p>
<div>{formatPrice(item.price, item.currency)}</div>
<CartRemoveItemButton itemId={item.id} />
</div>
);
})}
</div>
<div>
<CartTotalPrice />
</div>
<CartSubmit name="checkout" />
</CartContainer>
) : (
<p>your cart is empty</p>
)}
</div>
);
};

Reference#

CartContainer#

Props#

onSuccess#

(cartItems) โ‡’ void

Callback function called when the user clicks the submit button.

Children components#

Alert#

Displays the relevant errors or success messages.


CartRemoveItemButton#

Instance of Button

A button that reduces the quantity of a certain cart item by 1, and removes it in case the quantity is equal to 1.

Props#

itemId#

number

the id of the item to remove.


CartTotalPrice#

A text that shows the total price of the cart items. shows nothing if the cart is showing any alerts.


CartSubmit Required#

Instance of Button

A button component that starts the checkout flow.

Props#

name#

string?

The title displayed inside the button