Skip to main content
Version: 1.0.0

SubscriptionCreateContainer

Handles payment for a new subscription.

info

SubscriptionCreateContainer requires the product and plan 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 {
SubscriptionCreateContainer,
PelcroCardNumber,
PelcroCardExpiry,
PelcroCardCVC,
CouponCode,
DiscountedPrice,
SubmitPaymentMethod,
PelcroPaymentRequestButton,
PaypalSubscribeButton,
Alert,
BankRedirection,
usePelcro,
} from "@pelcro/react-pelcro-js";
import "@pelcro/react-pelcro-js/dist/pelcro.css";
export const CustomSubscriptionCreateView = () => {
const { setProduct, setPlan } = usePelcro();
useEffect(() => {
setProduct(123);
setPlan(1234);
}, []);
return (
<SubscriptionCreateContainer
onSuccess={(userObject) => {
console.log(userObject);
}}
onFailure={(err) => {
console.error(err.message);
}}
>
<BankRedirection />
<Alert />
{/* Payment form */}
<div>
<PelcroCardNumber />
</div>
<div>
<PelcroCardExpiry />
<PelcroCardCVC />
</div>
{/* Coupon section */}
<div>
<CouponCode />
<DiscountedPrice />
</div>
{/* Payment buttons section */}
<div>
<SubmitPaymentMethod />
<PelcroPaymentRequestButton />
<PaypalSubscribeButton />
</div>
</SubscriptionCreateContainer>
);
};

Reference#

SubscriptionCreateContainer#

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#

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.


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.


CouponCode#

The coupon section.


DiscountedPrice#

Shows the discounted price when a coupon is applied.


SubmitPaymentMethod Required#

Instance of Button

A button component that submits the payment.

Props#

name#

string?

The title displayed inside the button


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.