Skip to main content
Version: Next

SubscriptionSuspendContainer

Handles suspending for a subscription.

info

SubscriptionSuspendContainer requires the subscriptionToSuspend 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 {
SubscriptionSuspendContainer,
SubscriptionSuspendButton,
SubscriptionSuspendDate,
usePelcro,
} from "@pelcro/react-pelcro-js";
import "@pelcro/react-pelcro-js/dist/pelcro.css";
export const CustomSubscriptionSuspendView = () => {
const { setSubscriptionToSuspend, subscriptionToSuspend } = usePelcro();
useEffect(() => {
setSubscriptionToSuspend(1847427)
}, []);
return (
<SubscriptionSuspendContainer
onSuccess={(userObject) => {
console.log(userObject);
}}
onFailure={(err) => {
console.error(err.message);
}}
>
<SubscriptionSuspendDate subscription={subscriptionToSuspend}/>
<SubscriptionSuspendButton
className="plc-mb-2"
subscription={subscriptionToSuspend}
/>
</SubscriptionSuspendContainer>
);
};

Reference#

SubscriptionSuspendContainer#

Props#

onSuccess#

(userObject) โ‡’ void

Callback function called when the user subscribes succesfully.

onFailure#

(errorObject) โ‡’ void

Callback function called when the subscription creation fails.

Children components#

SubscriptionSuspendDate#

Displays datepicker to pick date.


SubscriptionSuspendButton#

Button to submit the suspending date.