@stigg/react-sdk 4.13.1 → 4.13.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.13.1",
+  "version": "4.13.2",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/checkout/steps/payment/stripe/stripe.utils.ts

@@ -6,6 +6,8 @@ type StripeElementsProps = {
   elements: StripeElements | null;
 };
 
+const FAILED_PAYMENT_COLLECTION_STATUSES = [PaymentCollection.Failed, PaymentCollection.Processing];
+
 export async function handleStripeFormValidations({ elements }: Pick<StripeElementsProps, 'elements'>) {
   if (!elements) {
     const errorMessage = 'Stripe elements not initialized';
@@ -30,19 +32,20 @@ export async function handleStripeNextAction({
   applySubscriptionResults: ApplySubscriptionResults;
   stripe: Stripe | null;
 }) {
-  const paymentIntentClientSecret = applySubscriptionResults?.subscription?.latestInvoice?.paymentSecret;
-  if (
-    stripe &&
-    paymentIntentClientSecret &&
-    applySubscriptionResults?.subscription?.paymentCollection === PaymentCollection.ActionRequired
-  ) {
+  const subscription = applySubscriptionResults?.subscription;
+  const paymentIntentClientSecret = subscription?.latestInvoice?.paymentSecret;
+  const paymentCollection = subscription?.paymentCollection;
+
+  if (stripe && paymentIntentClientSecret && paymentCollection === PaymentCollection.ActionRequired) {
     const { error: NextActionError } = await stripe.handleNextAction({ clientSecret: paymentIntentClientSecret });
     if (NextActionError) {
       return { errorMessage: NextActionError.message || '' };
     }
+  } else if (paymentCollection && FAILED_PAYMENT_COLLECTION_STATUSES.includes(paymentCollection)) {
+    return { errorMessage: subscription?.latestInvoice?.errorMessage || 'An error occurred - try again later' };
   }
 
-  return { subscription: applySubscriptionResults?.subscription };
+  return { subscription };
 }
 
 async function handleStripeSetup({

package/src/components/paywall/PlanOfferingButton.tsx

@@ -163,7 +163,7 @@ export function PlanOfferingButton({
       buttonProps.intentionType = SubscribeIntentionType.CHANGE_BILLING_PERIOD;
     }
   } else if (isCustomPrice) {
-    buttonProps.title = custom;
+    buttonProps.title = typeof custom === 'function' ? custom({ plan, selectedBillingPeriod: billingPeriod }) : custom;
     buttonProps.intentionType = SubscribeIntentionType.REQUEST_CUSTOM_PLAN_ACCESS;
   }
 

package/src/components/paywall/index.ts

@@ -1,3 +1,3 @@
 export { PaywallContainer as Paywall, PaywallContainerProps as PaywallProps } from './PaywallContainer';
 export { PaywallPlan, OnPlanSelectedCallbackFn, SubscribeIntentionType } from './types';
-export { PaywallLocalization, PlanPriceText } from './paywallTextOverrides';
+export { PaywallLocalization, PlanPriceText, CurrentPlanParams } from './paywallTextOverrides';

package/src/components/paywall/paywallTextOverrides.ts

@@ -13,6 +13,11 @@ import { PaywallPlan } from './types';
 
 export { PlanPriceText } from '../utils/getPlanPrice';
 
+export type CurrentPlanParams = {
+  plan: Plan;
+  selectedBillingPeriod: BillingPeriod;
+};
+
 export type PaywallLocalization = {
   highlightChip: string;
   entitlementsTitle?: (plan: PaywallPlan) => string;
@@ -20,7 +25,7 @@ export type PaywallLocalization = {
     upgrade: string | ((plan: PaywallPlan) => string);
     downgrade: string | ((plan: PaywallPlan) => string);
     startTrial: (plan: PaywallPlan) => string;
-    custom: string;
+    custom: ((data: CurrentPlanParams) => string) | string;
     currentPlan: string;
     startNew: string;
     switchToBillingPeriod: (billingPeriod: BillingPeriod) => string;
@@ -30,7 +35,7 @@ export type PaywallLocalization = {
     startingAtCaption: string;
     billingPeriod?: (billingPeriod: BillingPeriod) => string;
     pricePeriod: (billingPeriod: BillingPeriod) => string;
-    custom: string;
+    custom: ((data: CurrentPlanParams) => string) | string;
     priceNotSet: string;
     free: PlanPriceText | ((currency?: PaywallCurrency) => PlanPriceText);
     paid?: (priceData: {

package/src/components/utils/getPlanPrice.ts

@@ -26,7 +26,10 @@ export function getPlanPrice(
       return paywallLocale.price.free;
     case PricingType.Custom:
       return {
-        price: paywallLocale.price.custom,
+        price:
+          typeof paywallLocale.price.custom === 'function'
+            ? paywallLocale.price.custom({ plan, selectedBillingPeriod: billingPeriod })
+            : paywallLocale.price.custom,
       };
     case PricingType.Paid: {
       const planPrices = plan.pricePoints.filter((pricePoint) => pricePoint.billingPeriod === billingPeriod);

package/src/index.ts

@@ -9,6 +9,7 @@ export {
   SubscribeIntentionType,
   PaywallLocalization,
   PlanPriceText,
+  CurrentPlanParams,
 } from './components/paywall';
 export {
   CustomerPortalProvider,