Handles updating the user's payment method.

Usage

import React from "react";

import {

PaymentMethodUpdateContainer,

CheckoutForm,

SubmitPaymentMethod,

Alert,

} from "@pelcro/react-pelcro-js";

import "@pelcro/react-pelcro-js/dist/pelcro.css";

export const CustomPaymentMethodUpdateView = () => {

return (

<PaymentMethodUpdateContainer

onSuccess={(userObject) => {

console.log(userObject);

}}

onFailure={(err) => {

console.error(err.message);

}}

>

<Alert />

<CheckoutForm />

<SubmitPaymentMethod />

</PaymentMethodUpdateContainer>

);

};

Reference

PaymentMethodUpdateContainer

Props

onSuccess

(userObject) ⇒ void

Callback function called when the user updates payment method succesfully.

onFailure

(errorObject) ⇒ void

Callback function called when the payment update fails.

Children components

Alert

Displays the relevant errors or success messages.

---

CheckoutForm Required

Contains all stripe's checkout form fields in one component (PelcroCardNumber, PelcroCardExpiry, PelcroCardCVC)

---

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.

---

SubmitPaymentMethod Required

Instance of Button

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

Props

name

string?

The title displayed inside the button

---