Skip to main content
Version: 2.0.0

PaymentMethodUpdateContainer

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