Handles payment for ecommerce orders.

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 {

OrderCreateContainer,

PelcroCardNumber,

PelcroCardExpiry,

PelcroCardCVC,

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>

<PelcroCardNumber />

</div>

<div>

<PelcroCardExpiry />

<PelcroCardCVC />

</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.

---

PelcroCardNumber Required

Input field to receive the card's number.

---

PelcroCardExpiry Required

Input field to receive the card's expiration date.

---

PelcroCardCVC Required

Input field to receive the card's CVC.

---

CouponCode

The coupon section.

---

DiscountedPrice

Shows the discounted price when a coupon is applied.

---

SubmitPaymentMethod Required

Instance of Button

A button component that submits the payment.

Props

name

string?

The title displayed inside the button

---