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

---