Skip to main content
Version: Next

OrderCreateContainer

Handles payment for ecommerce orders.

info

OrderCreateContainer requires the order to be set.
If you're using our default flow, the user sets this before moving to payment already.
But if you have your own custom flow, you can use the usePelcro hook to set it before switching to the payment view like in the following example.

Usage#

import React from "react";
import {
OrderCreateContainer,
SelectedPaymentMethod,
CheckoutForm,
CouponCode,
DiscountedPrice,
SubmitPaymentMethod,
Alert,
BankRedirection,
usePelcro,
} from "@pelcro/react-pelcro-js";
import "@pelcro/react-pelcro-js/dist/pelcro.css";
export const CustomOrderCreateView = () => {
const { cartItems, addToCart, set } = usePelcro();
useEffect(() => {
addToCart(123);
set({ order: [...cartItems] });
}, []);
return (
<OrderCreateContainer
onSuccess={(orderObject) => {
console.log(orderObject);
}}
onFailure={(err) => {
console.error(err.message);
}}
>
<BankRedirection />
<Alert />
{/* Payment form */}
<div>
<SelectedPaymentMethod />
<CheckoutForm />
</div>
{/* Coupon section */}
<div>
<CouponCode />
<DiscountedPrice />
</div>
{/* Payment buttons section */}
<div>
<SubmitPaymentMethod />
</div>
</OrderCreateContainer>
);
};

Reference#

OrderCreateContainer#

Props#

onSuccess#

(orderObject) โ‡’ void

Callback function called when the user orders succesfully.

onFailure#

(errorObject) โ‡’ void

Callback function called when the order fails.

Children components#

Alert#

Displays the relevant errors or success messages.


BankRedirection#

When added, if authentication is required, the user will be redirected to the card issuer's website where they will be required to complete the card authentication.
Learn how 3D secure layer works.


CheckoutForm Required#

Contains all stripe's checkout form fields in one component (PelcroCardNumber, PelcroCardExpiry, PelcroCardCVC)
Displayed only if the user hasn't picked a saved payment method.


SelectedPaymentMethod Required#

Displays the selected payment method if the user has selected one.


PelcroCardNumber#

Input field to receive the card's number.


PelcroCardExpiry#

Input field to receive the card's expiration date.


PelcroCardCVC#

Input field to receive the card's CVC.


CouponCode#

The coupon section.


DiscountedPrice#

Shows the discounted price when a coupon is applied.


SubmitPaymentMethod Required#

A button component that submits the payment. Accepts any prop that HTML button element supports.