Used to make users pay for subscription renewals.

Loading...

info

SubscriptionRenewModal 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 switching to the payment view like in the following example.

Usage

import React from "react";

import {

SubscriptionRenewModal,

PelcroModalController,

usePelcro,

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

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

export const SubscriptionRenewExample = () => {

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

useEffect(() => {

setProduct(123);

setPlan(1234);

set({ subscriptionIdToRenew: 11111 });

}, []);

return (

<>

<button onClick={() => switchToPaymentView()}>

Pay for plan 1234 renewal

</button>

<PelcroModalController>

<SubscriptionRenewModal />

</PelcroModalController>

</>

);

};

Reference

Props

onDisplay

() ⇒ void

Callback function called when the modal is first displayed.

onClose

() ⇒ void

Callback function called when the modal is closed.

onSuccess

(userObject) ⇒ void

Callback function called when the user succesfully renews the subscription.

onGiftRenewalSuccess

(userObject) ⇒ void

Callback function called when the user renews a gifted subscription.

onFailure

(errorObject) ⇒ void

Callback function called when the subscription renewal fails.