Skip to main content
Version: 3.3.0

PaymentMethodSelectContainer

Handles selecting one of the user's payment methods.

Usage#

import React from "react";
import {
PaymentMethodSelectContainer,
PaymentMethodSelectList,
PaymentMethodSelectSubmit,
Alert,
} from "@pelcro/react-pelcro-js";
import "@pelcro/react-pelcro-js/dist/pelcro.css";
export const CustomPaymentMethodSelectView = () => {
return (
<PaymentMethodSelectContainer
onSuccess={(selectedPaymentMethodId) => {
console.log(selectedPaymentMethodId);
}}
onAddNewPaymentMethod={() => {
set({ selectedPaymentMethodId: null });
switchToCheckoutForm();
}}
>
<Alert />
<PaymentMethodSelectList />
<PaymentMethodSelectSubmit />
</PaymentMethodSelectContainer>
);
};

Reference#

PaymentMethodSelectContainer#

Props#

onSuccess#

(selectedPaymentMethodId) โ‡’ void

Callback function called when the PaymentMethod is selected succesfully.

onAddNewPaymentMethod#

() โ‡’ void

Callback function called when adding a new payment method, and swithing to checkout form.

Children components#

Alert#

Displays the relevant errors or success messages.


PaymentMethodSelectList Required#

A selectable list of all the user's payment methods.


PaymentMethodSelectSubmit Required#

Instance of Button

A button component that submits the selected payment method.

Props#

name#

string?

The title displayed inside the button