Handles payment for a new subscription.

info

SubscriptionRenewContainer requires the product, plan, and subscriptionIdToRenew to be set.
If you're using our default flow, the user selects those before moving to payment already.
But if you have your own custom flow, you can use the usePelcro hook to set them before rendering the payment view like in the following example.

Usage

import React from "react";

import {

SubscriptionRenewContainer,

SelectedPaymentMethod,

CheckoutForm,

CouponCode,

DiscountedPrice,

TaxAmount,

SubmitPaymentMethod,

PelcroPaymentRequestButton,

PaypalSubscribeButton,

Alert,

BankRedirection,

usePelcro,

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

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

export const CustomSubscriptionRenewView = () => {

const { setProduct, setPlan, set } = usePelcro();

useEffect(() => {

setProduct(123);

setPlan(1234);

set({ subscriptionIdToRenew: 11111 });

}, []);

return (

<SubscriptionRenewContainer

onSuccess={(userObject) => {

console.log(userObject);

}}

onFailure={(err) => {

console.error(err.message);

}}

>

<BankRedirection />

<Alert />

{/* Payment form */}

<div>

<SelectedPaymentMethod />

<CheckoutForm />

</div>

{/* Coupon section */}

<div>

<CouponCode />

<DiscountedPrice />

</div>

<TaxAmount />

{/* Payment buttons section */}

<div>

<SubmitPaymentMethod />

<PelcroPaymentRequestButton />

<PaypalSubscribeButton />

</div>

</SubscriptionRenewContainer>

);

};

Reference

SubscriptionRenewContainer

Props

onSuccess

(userObject) ⇒ void

Callback function called when the user renews a subscription succesfully.

onGiftRenewalSuccess

(userObject) ⇒ void

Callback function called when the user renews a gifted subscription succesfully.

onFailure

(errorObject) ⇒ void

Callback function called when the subscription renewal fails.

Children components

Alert

Displays the relevant errors or success messages.

---

BankRedirection

When added, if authentication is required, the user will be redirected to the card issuer's website where they will be required to complete the card authentication.
Learn how 3D secure layer works.

---

CheckoutForm Required

Contains all stripe's checkout form fields in one component (PelcroCardNumber, PelcroCardExpiry, PelcroCardCVC)
Displayed only if the user hasn't picked a saved payment method.

---

SelectedPaymentMethod Required

Displays the selected payment method if the user has selected one.

---

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.

---

CouponCode

The coupon section.

---

DiscountedPrice

Displays the discounted price when a coupon is applied.

---

TaxAmount

Displays the total tax amount based on user location if taxes are enabled.

---

SubmitPaymentMethod Required

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

---

PelcroPaymentRequestButton

A button that opens Google Pay/Apple Pay flow for supported customers.
Learn how to configure Google Pay/Apple Pay with your app.

---

PaypalSubscribeButton

Pay with PayPal button.
Learn how to configure PayPal with your app.

---