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

---