Skip to main content
Version: 2.0.0

OrderCreateModal

Used to make users pay ecommerce orders.

Loading...
info

OrderCreateModal 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 {
OrderCreateModal,
PelcroModalController,
usePelcro,
} from "@pelcro/react-pelcro-js";
import "@pelcro/react-pelcro-js/dist/pelcro.css";
export const OrderCreateExample = () => {
const { cartItems, addToCart, set, switchToPaymentView } = usePelcro();
useEffect(() => {
addToCart(123);
}, []);
return (
<>
<button
onClick={() => {
set({ order: [...cartItems] });
switchToPaymentView();
}}
>
Pay for ecommerce order
</button>
<PelcroModalController>
<OrderCreateModal />
</PelcroModalController>
</>
);
};

Reference#

Props#

onDisplay#

() โ‡’ void

Callback function called when the modal is first displayed.

onClose#

() โ‡’ void

Callback function called when the modal is closed.

onSuccess#

(orderObject) โ‡’ void

Callback function called when the user orders succesfully.

onFailure#

(errorObject) โ‡’ void

Callback function called when the order fails.