Handles updating the user's payment method.

Usage

import React from "react";

import {

PaymentMethodUpdateContainer,

PelcroCardNumber,

PelcroCardExpiry,

PelcroCardCVC,

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

{/* Payment form */}

<div>

<PelcroCardNumber />

</div>

<div>

<PelcroCardExpiry />

<PelcroCardCVC />

</div>

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

---

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.

---

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

---