@bunnyapp/components 1.7.0-beta.12 → 1.7.0-beta.15

package/dist/cjs/index.js

@@ -1280,7 +1280,7 @@ const DEFAULT_CONFIG = {
 };
 
 // This will be replaced at build time by rollup-plugin-replace
-const PACKAGE_VERSION = '1.7.0-beta.11';
+const PACKAGE_VERSION = '1.7.0-beta.14';
 const createRequestHeaders = (token) => {
     const headers = createClientDevHeaders({ token });
     // Add the components version header
@@ -19759,6 +19759,9 @@ const PaymentForm_PaymentMethodsFragment = t(`
     fragment PaymentForm_PaymentMethodsFragment on PaymentMethod {
       ...MiniCreditCard_PaymentMethodFragment
       id
+      plugin {
+        id
+      }
     }
   `, [MiniCreditCard_PaymentMethodFragment]);
 
@@ -21139,7 +21142,7 @@ function useRemovePaymentMethod(onRemovePaymentMethod, onError) {
     const token = useToken();
     const { apiHost } = react.useContext(BunnyContext);
     const removePaymentMethod = react.useCallback(async (data) => {
-        const plugin = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.find(paymentPlugin => { var _a; return String(paymentPlugin.id) === ((_a = data === null || data === void 0 ? void 0 : data.plugin) === null || _a === void 0 ? void 0 : _a.id); });
+        const plugin = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.find(paymentPlugin => { var _a; return String(paymentPlugin.id) === String((_a = data === null || data === void 0 ? void 0 : data.plugin) === null || _a === void 0 ? void 0 : _a.id); });
         if (data && plugin) {
             await invokePlugin({
                 plugin: plugin, // TODO: type the plugin
@@ -21159,17 +21162,21 @@ function useRemovePaymentMethod(onRemovePaymentMethod, onError) {
                         accountId,
                     }),
                 });
-                onRemovePaymentMethod === null || onRemovePaymentMethod === void 0 ? void 0 : onRemovePaymentMethod();
+                onRemovePaymentMethod === null || onRemovePaymentMethod === void 0 ? void 0 : onRemovePaymentMethod(data);
             })
                 .catch((error) => {
                 showErrorNotification(error.message, 'Error removing payment method');
             });
         }
         else {
-            const availablePlugins = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.map((plugin) => { var _a, _b, _c; return (_c = (_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.name; });
+            const availablePlugins = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.map(plugin => {
+                var _a, _b;
+                const components = plugin.components;
+                return (_b = (_a = components === null || components === void 0 ? void 0 : components.frontend) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name;
+            });
             onError === null || onError === void 0 ? void 0 : onError(`Either the payment method was not found or the plugin was not present. Available plugins: ${availablePlugins === null || availablePlugins === void 0 ? void 0 : availablePlugins.join(', ')}`);
         }
-    }, [paymentPlugins, token, apiHost, queryClient]);
+    }, [paymentPlugins, token, apiHost, queryClient, onRemovePaymentMethod, accountId, onError]);
     return removePaymentMethod;
 }
 
@@ -21504,7 +21511,7 @@ const InvoiceQuoteView = ({ children, formattedInvoice, html, backButtonName, on
                 }, children: [targetUrl ? (jsxRuntime.jsx(DocumentTemplatePreview, { targetUrl: targetUrl })) : (jsxRuntime.jsx(interweave.Markup, { content: html })), children] }))] }));
 };
 
-function Invoice({ id, invoiceQuoteViewComponent, backButtonName, onBackButtonClick, onInvoiceDownloadError, onPaymentSuccess, shadow = 'shadow-md', className, hideDownloadButton = false, hidePaymentForm = false, onInvoiceLoaded, }) {
+function Invoice({ id, invoiceQuoteViewComponent, backButtonName, onBackButtonClick, onInvoiceDownloadError, onPaymentSuccess, shadow = 'shadow-md', className, hideDownloadButton = false, hidePaymentForm = false, onInvoiceLoaded, onPaymentMethodSaved, onPaymentMethodRemoved, }) {
     return (jsxRuntime.jsx(InvoiceQuoteContext.Provider, { value: {
             id,
             invoiceQuoteViewComponent,
@@ -21516,9 +21523,9 @@ function Invoice({ id, invoiceQuoteViewComponent, backButtonName, onBackButtonCl
             className,
             hideDownloadButton,
             onInvoiceLoaded,
-        }, children: jsxRuntime.jsx(ActualInvoice, { hidePaymentForm: hidePaymentForm }) }));
+        }, children: jsxRuntime.jsx(ActualInvoice, { hidePaymentForm: hidePaymentForm, onSavePaymentMethod: onPaymentMethodSaved, onRemovePaymentMethod: onPaymentMethodRemoved }) }));
 }
-function ActualInvoice({ hidePaymentForm }) {
+function ActualInvoice({ hidePaymentForm, onSavePaymentMethod, onRemovePaymentMethod }) {
     // Context
     const queryClient = reactQuery.useQueryClient();
     const { id, invoiceQuoteViewComponent, backButtonName, onBackButtonClick, onPaymentSuccess, className, } = react.useContext(InvoiceQuoteContext);
@@ -21556,7 +21563,11 @@ function ActualInvoice({ hidePaymentForm }) {
     }, [formattedInvoice]);
     if (!formattedInvoice)
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
-    return (jsxRuntime.jsx("div", { className: "bunny-invoice-container", children: jsxRuntime.jsxs("div", { className: `bunny-flex bunny-gap-6 ${isMobile ? 'bunny-flex-col bunny-w-full' : ''} ${className}`, children: [formattedInvoice.isLegacy ? (jsxRuntime.jsx("div", { className: "bunny-flex bunny-justify-center bunny-w-full", children: jsxRuntime.jsx(LegacyDocument, { documentUuid: formattedInvoice.uuid, documentType: "invoice" }) })) : (invoiceQuoteViewComponent || (jsxRuntime.jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && !hidePaymentForm && (jsxRuntime.jsx("div", { className: `bunny-w-full ${hideDownloadButton || formattedInvoice.isLegacy ? '' : 'pt-12'}`, children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: handlePaymentSuccess, invoice: formattedInvoice }) }))] }) }));
+    return (jsxRuntime.jsx("div", { className: "bunny-invoice-container", children: jsxRuntime.jsxs("div", { className: `bunny-flex bunny-gap-6 ${isMobile ? 'bunny-flex-col bunny-w-full' : ''} ${className}`, children: [formattedInvoice.isLegacy ? (jsxRuntime.jsx("div", { className: "bunny-flex bunny-justify-center bunny-w-full", children: jsxRuntime.jsx(LegacyDocument, { documentUuid: formattedInvoice.uuid, documentType: "invoice" }) })) : (invoiceQuoteViewComponent || (jsxRuntime.jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && !hidePaymentForm && (jsxRuntime.jsx("div", { className: `bunny-w-full ${hideDownloadButton || formattedInvoice.isLegacy ? '' : 'pt-12'}`, children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: handlePaymentSuccess, invoice: formattedInvoice, onSavePaymentMethod: (paymentMethodId) => {
+                            onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod(paymentMethodId);
+                        }, onRemovePaymentMethod: (paymentMethod) => {
+                            onRemovePaymentMethod === null || onRemovePaymentMethod === void 0 ? void 0 : onRemovePaymentMethod(paymentMethod.id);
+                        } }) }))] }) }));
 }
 
 const useFocusFirstInput = ({ firstInputRef, isVisible, }) => {
@@ -23468,6 +23479,12 @@ const FormBillingState = () => {
     return (jsxRuntime.jsx(antd.Form.Item, { label: "Billing state", name: "billingState", rules: [{ required: billingStateRequired }], children: jsxRuntime.jsx(antd.Input, { placeholder: "State" }) }));
 };
 
+const [OnPaymentMethodSavedProvider, useOnPaymentMethodSaved] = createValueContext();
+// This provider is used in all components that may save a payment method
+
+const [OnPaymentMethodRemovedProvider, useOnPaymentMethodRemoved] = createValueContext();
+// This provider is used in all components that may remove a payment method
+
 const { Text: Text$o } = antd.Typography;
 // HACK: I have imported QuoteFields_QuoteFragment here as a hack to ensure I have all of the quote data needed for
 // the eventual children of this component.
@@ -23511,6 +23528,9 @@ const QuoteCheckout = ({ account, onSuccess, onFail, quote: maskedQuote, taxatio
     // Read fragments
     const quote = readFragment(QuoteCheckout_QuoteFragment, maskedQuote);
     const upgradingSubscription = readFragment(QuoteCheckout_SubscriptionFragment, maskedUpgradingSubscription);
+    // Context
+    const onPaymentMethodSaved = useOnPaymentMethodSaved();
+    const onPaymentMethodRemoved = useOnPaymentMethodRemoved();
     const { apiHost } = react.useContext(BunnyContext);
     const token = useToken();
     const isMobile = useIsMobile();
@@ -23569,7 +23589,7 @@ const QuoteCheckout = ({ account, onSuccess, onFail, quote: maskedQuote, taxatio
     }
     if (taxationRequiredAccountFields)
         return (jsxRuntime.jsx(PaymentFormWrapper, { setMaxHeight: false, children: jsxRuntime.jsx(TaxationForm, { account: account, accountId: quote.accountId }) }));
-    return (jsxRuntime.jsx(PaymentFormWrapper, { setMaxHeight: false, children: paymentRequired ? (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-w-full", children: [jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, quote: quote }), (couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.length) === 0 ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: upgradingSubscription &&
+    return (jsxRuntime.jsx(PaymentFormWrapper, { setMaxHeight: false, children: paymentRequired ? (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-w-full", children: [jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, quote: quote, onSavePaymentMethod: (paymentMethod) => onPaymentMethodSaved === null || onPaymentMethodSaved === void 0 ? void 0 : onPaymentMethodSaved(paymentMethod.savedPaymentMethodResponse.paymentMethodId), onRemovePaymentMethod: (paymentMethod) => onPaymentMethodRemoved === null || onPaymentMethodRemoved === void 0 ? void 0 : onPaymentMethodRemoved(paymentMethod.id) }), (couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.length) === 0 ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: upgradingSubscription &&
                         shouldShowCouponEditor(quote, activeCouponsExist, upgradingSubscription) && (jsxRuntime.jsx(CouponEditor, { className: "bunny-px-4 bunny-pt-1", onAddCoupon: addCoupon, isAddingCoupon: isAddingCoupon, couponCode: couponCode, setCouponCode: setCouponCode })) })) : (jsxRuntime.jsx(antd.Button, { type: "link", loading: isRemovingCoupon, onClick: () => {
                         couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.forEach(couponCharge => {
                             var _a;
@@ -23609,6 +23629,9 @@ const Checkout = ({ onCancel, onSuccess, onFail, onRecalculateTaxes, invoice, op
     const { apiHost } = react.useContext(BunnyContext);
     const isMobile = useIsMobile();
     const token = useToken();
+    // Context
+    const onPaymentMethodSaved = useOnPaymentMethodSaved();
+    const onPaymentMethodRemoved = useOnPaymentMethodRemoved();
     // Read fragments
     const quote = readFragment(Checkout_QuoteFragment, maskedQuote);
     const hasTaxPlugin = useHasTaxPlugin({
@@ -23657,13 +23680,13 @@ const Checkout = ({ onCancel, onSuccess, onFail, onRecalculateTaxes, invoice, op
     return (jsxRuntime.jsx("div", { className: `bunny-flex bunny-flex-col bunny-fixed bunny-top-0 bunny-left-0 bunny-right-0 bunny-bottom-0 bunny-bg-slate-50
       bunny-overflow-auto bunny-height-full`, style: {
             zIndex: 1001,
-        }, children: jsxRuntime.jsxs("div", { className: `bunny-flex bunny-flex-col bunny-grow bunny-pt-4 ${isMobile ? 'bunny-pb-4' : 'bunny-pb-8'} bunny-content-container`, children: [jsxRuntime.jsx("div", { className: "bunny-flex bunny-justify-end bunny-w-full bunny-pr-4", children: jsxRuntime.jsx(icons.CloseOutlined, { className: "bunny-text-base bunny-shadow-padding-xb", onClick: onCancel }) }), jsxRuntime.jsxs("div", { className: `bunny-flex bunny-justify-end bunny-pt-4 bunny-gap-4 ${isMobile ? 'bunny-flex-col' : 'bunny-shadow-padding-xb'}`, children: [((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_b = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _b === void 0 ? void 0 : _b.html)) && (jsxRuntime.jsx(InvoiceQuoteView, { html: invoice ? invoice.html : (_d = (_c = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _c === void 0 ? void 0 : _c.html) !== null && _d !== void 0 ? _d : '' })), !isMobile && ((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_e = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _e === void 0 ? void 0 : _e.html)) && (jsxRuntime.jsx(antd.Divider, { className: "bunny-h-full", type: "vertical" })), invoice ? (jsxRuntime.jsx("div", { className: "bunny-w-full bunny-pt-12", children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, invoice: invoice }) })) : quote ? (jsxRuntime.jsx(QuoteCheckout, { account: account, onFail: error => {
+        }, children: jsxRuntime.jsxs("div", { className: `bunny-flex bunny-flex-col bunny-grow bunny-pt-4 ${isMobile ? 'bunny-pb-4' : 'bunny-pb-8'} bunny-content-container`, children: [jsxRuntime.jsx("div", { className: "bunny-flex bunny-justify-end bunny-w-full bunny-pr-4", children: jsxRuntime.jsx(icons.CloseOutlined, { className: "bunny-text-base bunny-shadow-padding-xb", onClick: onCancel }) }), jsxRuntime.jsxs("div", { className: `bunny-flex bunny-justify-end bunny-pt-4 bunny-gap-4 ${isMobile ? 'bunny-flex-col' : 'bunny-shadow-padding-xb'}`, children: [((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_b = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _b === void 0 ? void 0 : _b.html)) && (jsxRuntime.jsx(InvoiceQuoteView, { html: invoice ? invoice.html : (_d = (_c = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _c === void 0 ? void 0 : _c.html) !== null && _d !== void 0 ? _d : '' })), !isMobile && ((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_e = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _e === void 0 ? void 0 : _e.html)) && (jsxRuntime.jsx(antd.Divider, { className: "bunny-h-full", type: "vertical" })), invoice ? (jsxRuntime.jsx("div", { className: "bunny-w-full bunny-pt-12", children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, invoice: invoice, onSavePaymentMethod: (paymentMethod) => onPaymentMethodSaved === null || onPaymentMethodSaved === void 0 ? void 0 : onPaymentMethodSaved(paymentMethod.savedPaymentMethodResponse.paymentMethodId), onRemovePaymentMethod: (paymentMethod) => onPaymentMethodRemoved === null || onPaymentMethodRemoved === void 0 ? void 0 : onPaymentMethodRemoved(paymentMethod.id) }) })) : quote ? (jsxRuntime.jsx(QuoteCheckout, { account: account, onFail: error => {
                                 onFail(error);
                             }, onSuccess: onSuccess, quote: quote, taxationRequiredAccountFields: taxationRequiredAccountFields, token: token, onRecalculateTaxes: async () => {
                                 if (recalculateTaxesEnabled) {
                                     await recalculateTaxes();
                                 }
-                            } })) : (jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess }))] }), jsxRuntime.jsx(Footer, { className: "bunny-px-12" })] }) }));
+                            } })) : (jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, onSavePaymentMethod: (paymentMethod) => onPaymentMethodSaved === null || onPaymentMethodSaved === void 0 ? void 0 : onPaymentMethodSaved(paymentMethod.savedPaymentMethodResponse.paymentMethodId), onRemovePaymentMethod: (paymentMethod) => onPaymentMethodRemoved === null || onPaymentMethodRemoved === void 0 ? void 0 : onPaymentMethodRemoved(paymentMethod.id) }))] }), jsxRuntime.jsx(Footer, { className: "bunny-px-12" })] }) }));
 };
 
 function canEditChargeQuantity(charge) {
@@ -26300,9 +26323,7 @@ const FeatureAddonsList_PriceListFragment = t(`
 function FeatureAddonsList({ priceList: maskedPriceList, }) {
     var _a;
     const priceList = readFragment(FeatureAddonsList_PriceListFragment, maskedPriceList);
-    console.log('pricelist charges', priceList === null || priceList === void 0 ? void 0 : priceList.charges);
     const featureAddons = (_a = priceList === null || priceList === void 0 ? void 0 : priceList.charges) === null || _a === void 0 ? void 0 : _a.filter(charge => filterDeprecatedCharges(undefined, charge)).filter(charge => charge.featureAddon === true);
-    console.log('featureAddons', featureAddons);
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: featureAddons === null || featureAddons === void 0 ? void 0 : featureAddons.map((featureAddon, featureAddonIndex) => {
             return (jsxRuntime.jsx(FeatureAddonRow, { featureAddon: featureAddon, priceList: priceList }, featureAddonIndex));
         }) }));
@@ -28787,7 +28808,7 @@ const getSubscriptions = async ({ apiHost, isInPreviewMode, token, }) => {
 };
 
 const showInfoNotification = useInfoNotification();
-const UpgradeWrapper = ({ onChangePlanCancel, handlePortalErrors, upgradingSubscriptionId, isInPreviewMode, productId, className, shadow = 'md', }) => {
+const UpgradeWrapper = ({ onChangePlanCancel, handlePortalErrors, upgradingSubscriptionId, isInPreviewMode, productId, className, shadow = 'md', onPaymentMethodSaved, onPaymentMethodRemoved, }) => {
     var _a, _b, _c;
     // Context
     const token = useToken();
@@ -28813,7 +28834,7 @@ const UpgradeWrapper = ({ onChangePlanCancel, handlePortalErrors, upgradingSubsc
             productId,
             className,
             shadow,
-        }, children: jsxRuntime.jsx(UpgradingSubscriptionIdProvider, { initialValue: upgradingSubscriptionId, children: jsxRuntime.jsx(UpgradingSubscriptionProvider, { value: upgradingSubscription, children: jsxRuntime.jsx(QuoteProvider, { children: jsxRuntime.jsx(UpgradeContent, { onChangePlanCancel: onChangePlanCancel, handlePortalErrors: handlePortalErrors, subscriptions: (_c = subscriptionsData === null || subscriptionsData === void 0 ? void 0 : subscriptionsData.subscriptions) === null || _c === void 0 ? void 0 : _c.nodes, subscriptionsAreLoading: subscriptionsAreLoading }) }) }) }) }));
+        }, children: jsxRuntime.jsx(UpgradingSubscriptionIdProvider, { initialValue: upgradingSubscriptionId, children: jsxRuntime.jsx(UpgradingSubscriptionProvider, { value: upgradingSubscription, children: jsxRuntime.jsx(OnPaymentMethodSavedProvider, { value: onPaymentMethodSaved, children: jsxRuntime.jsx(OnPaymentMethodRemovedProvider, { value: onPaymentMethodRemoved, children: jsxRuntime.jsx(QuoteProvider, { children: jsxRuntime.jsx(UpgradeContent, { onChangePlanCancel: onChangePlanCancel, handlePortalErrors: handlePortalErrors, subscriptions: (_c = subscriptionsData === null || subscriptionsData === void 0 ? void 0 : subscriptionsData.subscriptions) === null || _c === void 0 ? void 0 : _c.nodes, subscriptionsAreLoading: subscriptionsAreLoading }) }) }) }) }) }) }));
 };
 const UpgradeContent = ({ onChangePlanCancel, handlePortalErrors, subscriptions, subscriptionsAreLoading, }) => {
     // Context
@@ -28850,7 +28871,7 @@ const UpgradeContent = ({ onChangePlanCancel, handlePortalErrors, subscriptions,
                 } }), jsxRuntime.jsx("div", { ref: stickyRef }), jsxRuntime.jsx("div", { className: `bunny-sticky bunny-bottom-4 bunny-transition-[margin] bunny-duration-300 ${isSticky ? 'bunny-mx-4' : 'bunny-mx-0'}`, children: selectedPriceList && (jsxRuntime.jsx(PlanPickerCheckoutBar, { selectedPriceList: selectedPriceList, handlePortalErrors: handlePortalErrors, onCheckoutSuccess: () => onChangePlanCancel() })) })] }));
 };
 
-const SubscriptionsWrapper = ({ handlePortalErrors, companyName, isInPreviewMode = false, productId, className, styles: userStyles = {}, noSubscriptionsComponent, showInactiveSubscriptions, showInactiveSubscriptionsToggle = true, }) => {
+const SubscriptionsWrapper = ({ handlePortalErrors, companyName, isInPreviewMode = false, productId, className, styles: userStyles = {}, noSubscriptionsComponent, showInactiveSubscriptions, showInactiveSubscriptionsToggle = true, onPaymentMethodSaved, onPaymentMethodRemoved, }) => {
     var _a, _b;
     // Context
     const token = useToken();
@@ -28881,15 +28902,17 @@ const SubscriptionsWrapper = ({ handlePortalErrors, companyName, isInPreviewMode
             productId,
             isInPreviewMode,
             showInactiveSubscriptions,
-        }, children: jsxRuntime.jsx(UpgradingSubscriptionIdProvider, { children: jsxRuntime.jsx(Subscriptions, { subscriptions: subscriptions, subscriptionsAreLoading: subscriptionsAreLoading, handlePortalErrors: handlePortalErrors, companyName: companyName, noSubscriptionsComponent: noSubscriptionsComponent, showInactiveSubscriptionsToggle: showInactiveSubscriptionsToggle }) }) }));
+        }, children: jsxRuntime.jsx(UpgradingSubscriptionIdProvider, { children: jsxRuntime.jsx(OnPaymentMethodSavedProvider, { value: onPaymentMethodSaved, children: jsxRuntime.jsx(OnPaymentMethodRemovedProvider, { value: onPaymentMethodRemoved, children: jsxRuntime.jsx(Subscriptions, { subscriptions: subscriptions, subscriptionsAreLoading: subscriptionsAreLoading, handlePortalErrors: handlePortalErrors, companyName: companyName, noSubscriptionsComponent: noSubscriptionsComponent, showInactiveSubscriptionsToggle: showInactiveSubscriptionsToggle }) }) }) }) }));
 };
 const Subscriptions = ({ subscriptions: maskedSubscriptions, subscriptionsAreLoading, handlePortalErrors, companyName, noSubscriptionsComponent, showInactiveSubscriptionsToggle, }) => {
     // Context
     const token = useToken();
     const { apiHost } = react.useContext(BunnyContext);
     const { className, isInPreviewMode, showInactiveSubscriptions: showInactiveSubscriptionsOverride, productId, shadow, } = useSubscriptionProps();
-    const [upgradingSubscriptionId, setUpgradingSubscriptionId] = useUpgradingSubscriptionId();
+    const onPaymentMethodSaved = useOnPaymentMethodSaved();
+    const onPaymentMethodRemoved = useOnPaymentMethodRemoved();
     // Local state
+    const [upgradingSubscriptionId, setUpgradingSubscriptionId] = useUpgradingSubscriptionId();
     const [showInactiveSubscriptionsState, setShowInactiveSubscriptionsState] = react.useState(false);
     const [isChangingPlan, setIsChangingPlan] = react.useState(false);
     const [quantityDrawerOpen, setQuantityDrawerOpen] = react.useState(false);
@@ -28948,7 +28971,7 @@ const Subscriptions = ({ subscriptions: maskedSubscriptions, subscriptionsAreLoa
     if (isChangingPlan || isInPreviewMode) {
         return (jsxRuntime.jsx(UpgradeWrapper, { isInPreviewMode: isInPreviewMode, productId: productId, onChangePlanCancel: () => {
                 setIsChangingPlan(false);
-            }, handlePortalErrors: handlePortalErrors, upgradingSubscriptionId: upgradingSubscriptionId, className: className, shadow: shadow }));
+            }, handlePortalErrors: handlePortalErrors, upgradingSubscriptionId: upgradingSubscriptionId, className: className, shadow: shadow, onPaymentMethodSaved: onPaymentMethodSaved, onPaymentMethodRemoved: onPaymentMethodRemoved }));
     }
     if (!subscriptions)
         return null;
@@ -29319,10 +29342,10 @@ function BillingDetailsSection({ hidePaymentMethodForm, countryListFilter, }) {
                 }, accountId: accountId, onContactCreated: handleContactCreated })] }));
 }
 
-const BillingDetails = ({ className, countryListFilter, hideBillingDetailsForm = false, hidePaymentMethodForm = false, isCardEnabled = true, isUpgradeFromTrial = false, shadow = 'shadow-md', onSavePaymentMethod, }) => {
+const BillingDetails = ({ className, countryListFilter, hideBillingDetailsForm = false, hidePaymentMethodForm = false, isCardEnabled = true, isUpgradeFromTrial = false, shadow = 'shadow-md', onSavePaymentMethod, onPaymentMethodRemoved, }) => {
     // Hooks
     const isMobile = useIsMobile();
-    return (jsxRuntime.jsx(WrapperComponent, { isCardEnabled: isCardEnabled, shadow: shadow, className: className, children: jsxRuntime.jsxs("div", { className: `bunny-flex bunny-py-2 bunny-my-2 ${isMobile ? 'bunny-flex-col bunny-space-y-4' : 'bunny-flex-row'} bunny-gap-4`, children: [!hideBillingDetailsForm ? (jsxRuntime.jsx(BillingDetailsSection, { hidePaymentMethodForm: hidePaymentMethodForm, countryListFilter: countryListFilter })) : null, !hideBillingDetailsForm && !hidePaymentMethodForm ? jsxRuntime.jsx(ResponsiveDivider, {}) : null, !hidePaymentMethodForm ? (jsxRuntime.jsx(PaymentFormSection, { hideBillingDetailsForm: hideBillingDetailsForm, isUpgradeFromTrial: isUpgradeFromTrial, onSavePaymentMethod: onSavePaymentMethod })) : null] }) }));
+    return (jsxRuntime.jsx(WrapperComponent, { isCardEnabled: isCardEnabled, shadow: shadow, className: className, children: jsxRuntime.jsxs("div", { className: `bunny-flex bunny-py-2 bunny-my-2 ${isMobile ? 'bunny-flex-col bunny-space-y-4' : 'bunny-flex-row'} bunny-gap-4`, children: [!hideBillingDetailsForm ? (jsxRuntime.jsx(BillingDetailsSection, { hidePaymentMethodForm: hidePaymentMethodForm, countryListFilter: countryListFilter })) : null, !hideBillingDetailsForm && !hidePaymentMethodForm ? jsxRuntime.jsx(ResponsiveDivider, {}) : null, !hidePaymentMethodForm ? (jsxRuntime.jsx(PaymentFormSection, { hideBillingDetailsForm: hideBillingDetailsForm, isUpgradeFromTrial: isUpgradeFromTrial, onSavePaymentMethod: onSavePaymentMethod, onPaymentMethodRemoved: onPaymentMethodRemoved })) : null] }) }));
 };
 const WrapperComponent = ({ children, isCardEnabled, shadow, className, }) => {
     return (jsxRuntime.jsx("div", { className: `${className}`, children: isCardEnabled ? jsxRuntime.jsx(Card, { className: `${shadow}`, children: children }) : jsxRuntime.jsx("div", { children: children }) }));
@@ -29331,7 +29354,7 @@ const ResponsiveDivider = () => {
     const isMobile = useIsMobile();
     return isMobile ? (jsxRuntime.jsx("div", { className: "bunny-mx-4", children: jsxRuntime.jsx(antd.Divider, {}) })) : (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(antd.Divider, { className: "bunny-h-full", type: "vertical" }) }));
 };
-const PaymentFormSection = ({ hideBillingDetailsForm, isUpgradeFromTrial, onSavePaymentMethod, }) => {
+const PaymentFormSection = ({ hideBillingDetailsForm, isUpgradeFromTrial, onSavePaymentMethod, onPaymentMethodRemoved, }) => {
     const isMobile = useIsMobile();
     const showSuccessNotification = useSuccessNotification();
     return (jsxRuntime.jsx("div", { className: `${isMobile || hideBillingDetailsForm ? 'bunny-w-full' : 'bunny-w-1/2 bunny-pt-4'} bunny-flex bunny-justify-center`, children: jsxRuntime.jsx(PaymentForm, { onSavePaymentMethod: (response) => {
@@ -29340,7 +29363,9 @@ const PaymentFormSection = ({ hideBillingDetailsForm, isUpgradeFromTrial, onSave
                     : 'Payment method saved successfully!');
                 // TODO: onSavePaymentMethod(response: any) should be cleaned up to have a response type (not any)
                 // and work with both stripe and demo pay requests
-                onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod(response);
+                onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod(response.savedPaymentMethodResponse.paymentMethodId);
+            }, onRemovePaymentMethod: (response) => {
+                onPaymentMethodRemoved === null || onPaymentMethodRemoved === void 0 ? void 0 : onPaymentMethodRemoved(response.id);
             } }) }));
 };
 

package/dist/cjs/types/src/components/BillingDetails/BillingDetails.d.ts

@@ -1,6 +1,6 @@
 import '../../styles/index.less';
 import { ShadowType } from '../../types/shadowType';
-declare const BillingDetails: ({ className, countryListFilter, hideBillingDetailsForm, hidePaymentMethodForm, isCardEnabled, isUpgradeFromTrial, shadow, onSavePaymentMethod, }: {
+declare const BillingDetails: ({ className, countryListFilter, hideBillingDetailsForm, hidePaymentMethodForm, isCardEnabled, isUpgradeFromTrial, shadow, onSavePaymentMethod, onPaymentMethodRemoved, }: {
     className?: string;
     countryListFilter?: (country: {
         value: string;
@@ -11,6 +11,7 @@ declare const BillingDetails: ({ className, countryListFilter, hideBillingDetail
     isCardEnabled?: boolean;
     isUpgradeFromTrial?: boolean;
     shadow?: ShadowType;
-    onSavePaymentMethod?: (paymentMethodData?: any) => void;
+    onSavePaymentMethod?: (paymentMethodId: string) => void;
+    onPaymentMethodRemoved?: (paymentMethodId: string) => void;
 }) => import("react/jsx-runtime").JSX.Element;
 export default BillingDetails;

package/dist/cjs/types/src/components/Invoice/Invoice.d.ts

@@ -1,5 +1,7 @@
 import { InvoiceQuoteContextProps } from '../../contexts/InvoiceQuoteContext';
 export type InvoiceProps = InvoiceQuoteContextProps & {
     hidePaymentForm?: boolean;
+    onPaymentMethodSaved?: (paymentMethodId: string) => void;
+    onPaymentMethodRemoved?: (paymentMethodId: string) => void;
 };
-export default function Invoice({ id, invoiceQuoteViewComponent, backButtonName, onBackButtonClick, onInvoiceDownloadError, onPaymentSuccess, shadow, className, hideDownloadButton, hidePaymentForm, onInvoiceLoaded, }: InvoiceProps): import("react/jsx-runtime").JSX.Element;
+export default function Invoice({ id, invoiceQuoteViewComponent, backButtonName, onBackButtonClick, onInvoiceDownloadError, onPaymentSuccess, shadow, className, hideDownloadButton, hidePaymentForm, onInvoiceLoaded, onPaymentMethodSaved, onPaymentMethodRemoved, }: InvoiceProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/src/components/PaymentForm/PaymentForm.d.ts

@@ -1,6 +1,8 @@
 import FormattedInvoice from '@/types/FormattedInvoice';
 import Invoice from '@/types/Invoice';
-import { FragmentOf } from 'gql.tada';
+import { FragmentOf, ResultOf } from 'gql.tada';
+import { PaymentForm_PaymentMethodsFragment } from './fragments/PaymentForm_PaymentMethodsFragment';
+type PaymentMethodFragment = ResultOf<typeof PaymentForm_PaymentMethodsFragment>;
 export declare const PaymentForm_QuoteFragment: import("gql.tada").TadaDocumentNode<{
     id: string | null;
     currencyId: string;
@@ -18,7 +20,7 @@ export declare function PaymentForm({ invoice, quote: maskedQuote, onPaymentSucc
     onPaymentSuccess?: (response: any) => void;
     onPaymentHoldSuccess?: (response: any) => void;
     onSavePaymentMethod?: (response: any) => void;
-    onRemovePaymentMethod?: () => void;
+    onRemovePaymentMethod?: (paymentMethod: PaymentMethodFragment) => void;
     onSetDefaultPaymentMethod?: () => void;
     accountId?: string;
     overrideToken?: string;
@@ -28,3 +30,4 @@ export declare function PaymentForm({ invoice, quote: maskedQuote, onPaymentSucc
         amountToHold?: number;
     };
 }): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/cjs/types/src/components/PaymentForm/fragments/PaymentForm_PaymentMethodsFragment.d.ts

@@ -3,6 +3,9 @@ export declare const PaymentForm_PaymentMethodsFragment: import("gql.tada").Tada
         MiniCreditCard_PaymentMethodFragment: "PaymentMethod";
     };
     id: string;
+    plugin: {
+        id: string;
+    } | null;
 }, {}, {
     fragment: "PaymentForm_PaymentMethodsFragment";
     on: "PaymentMethod";

package/dist/cjs/types/src/components/PaymentForm/hooks/useRemovePaymentMethod.d.ts

@@ -1,2 +1,5 @@
-declare function useRemovePaymentMethod(onRemovePaymentMethod?: () => void, onError?: (message: string) => void): (data: any) => Promise<void>;
+import { ResultOf } from 'gql.tada';
+import { PaymentForm_PaymentMethodsFragment } from '../fragments/PaymentForm_PaymentMethodsFragment';
+type PaymentMethodFragment = ResultOf<typeof PaymentForm_PaymentMethodsFragment>;
+declare function useRemovePaymentMethod(onRemovePaymentMethod?: (paymentMethod: PaymentMethodFragment) => void, onError?: (message: string) => void): (data: PaymentMethodFragment) => Promise<void>;
 export default useRemovePaymentMethod;

package/dist/cjs/types/src/components/Subscriptions/Subscriptions.d.ts

@@ -1,4 +1,4 @@
-declare const SubscriptionsWrapper: ({ handlePortalErrors, companyName, isInPreviewMode, productId, className, styles: userStyles, noSubscriptionsComponent, showInactiveSubscriptions, showInactiveSubscriptionsToggle, }: {
+declare const SubscriptionsWrapper: ({ handlePortalErrors, companyName, isInPreviewMode, productId, className, styles: userStyles, noSubscriptionsComponent, showInactiveSubscriptions, showInactiveSubscriptionsToggle, onPaymentMethodSaved, onPaymentMethodRemoved, }: {
     handlePortalErrors?: (errors: any) => void;
     companyName: string;
     isInPreviewMode?: boolean;
@@ -12,5 +12,7 @@ declare const SubscriptionsWrapper: ({ handlePortalErrors, companyName, isInPrev
     noSubscriptionsComponent?: React.ReactNode;
     showInactiveSubscriptions?: boolean;
     showInactiveSubscriptionsToggle?: boolean;
+    onPaymentMethodSaved?: (paymentMethodId: string) => void;
+    onPaymentMethodRemoved?: (paymentMethodId: string) => void;
 }) => import("react/jsx-runtime").JSX.Element;
 export default SubscriptionsWrapper;

package/dist/cjs/types/src/components/Subscriptions/Upgrade/Upgrade.d.ts

@@ -1,4 +1,4 @@
-declare const UpgradeWrapper: ({ onChangePlanCancel, handlePortalErrors, upgradingSubscriptionId, isInPreviewMode, productId, className, shadow, }: {
+declare const UpgradeWrapper: ({ onChangePlanCancel, handlePortalErrors, upgradingSubscriptionId, isInPreviewMode, productId, className, shadow, onPaymentMethodSaved, onPaymentMethodRemoved, }: {
     onChangePlanCancel: () => void;
     handlePortalErrors?: (error: any) => void;
     upgradingSubscriptionId?: string;
@@ -6,5 +6,7 @@ declare const UpgradeWrapper: ({ onChangePlanCancel, handlePortalErrors, upgradi
     productId: string | undefined;
     className?: string;
     shadow?: "none" | "sm" | "md" | "lg";
+    onPaymentMethodSaved?: (paymentMethodId: string) => void;
+    onPaymentMethodRemoved?: (paymentMethodId: string) => void;
 }) => import("react/jsx-runtime").JSX.Element | null;
 export default UpgradeWrapper;

package/dist/cjs/types/src/contexts/onPaymentMethodRemoved.d.ts

@@ -0,0 +1,5 @@
+declare const OnPaymentMethodRemovedProvider: ({ value, children }: {
+    value: ((paymentMethodId: string) => void) | undefined;
+    children?: import("react").ReactNode;
+}) => import("react/jsx-runtime").JSX.Element, useOnPaymentMethodRemoved: () => ((paymentMethodId: string) => void) | undefined;
+export { OnPaymentMethodRemovedProvider, useOnPaymentMethodRemoved };

package/dist/cjs/types/src/contexts/onPaymentMethodSaved.d.ts

@@ -0,0 +1,5 @@
+declare const OnPaymentMethodSavedProvider: ({ value, children }: {
+    value: ((paymentMethodId: string) => void) | undefined;
+    children?: import("react").ReactNode;
+}) => import("react/jsx-runtime").JSX.Element, useOnPaymentMethodSaved: () => ((paymentMethodId: string) => void) | undefined;
+export { OnPaymentMethodSavedProvider, useOnPaymentMethodSaved };

package/dist/esm/index.js

@@ -1278,7 +1278,7 @@ const DEFAULT_CONFIG = {
 };
 
 // This will be replaced at build time by rollup-plugin-replace
-const PACKAGE_VERSION = '1.7.0-beta.11';
+const PACKAGE_VERSION = '1.7.0-beta.14';
 const createRequestHeaders = (token) => {
     const headers = createClientDevHeaders({ token });
     // Add the components version header
@@ -19757,6 +19757,9 @@ const PaymentForm_PaymentMethodsFragment = t(`
     fragment PaymentForm_PaymentMethodsFragment on PaymentMethod {
       ...MiniCreditCard_PaymentMethodFragment
       id
+      plugin {
+        id
+      }
     }
   `, [MiniCreditCard_PaymentMethodFragment]);
 
@@ -21137,7 +21140,7 @@ function useRemovePaymentMethod(onRemovePaymentMethod, onError) {
     const token = useToken();
     const { apiHost } = useContext(BunnyContext);
     const removePaymentMethod = useCallback(async (data) => {
-        const plugin = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.find(paymentPlugin => { var _a; return String(paymentPlugin.id) === ((_a = data === null || data === void 0 ? void 0 : data.plugin) === null || _a === void 0 ? void 0 : _a.id); });
+        const plugin = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.find(paymentPlugin => { var _a; return String(paymentPlugin.id) === String((_a = data === null || data === void 0 ? void 0 : data.plugin) === null || _a === void 0 ? void 0 : _a.id); });
         if (data && plugin) {
             await invokePlugin({
                 plugin: plugin, // TODO: type the plugin
@@ -21157,17 +21160,21 @@ function useRemovePaymentMethod(onRemovePaymentMethod, onError) {
                         accountId,
                     }),
                 });
-                onRemovePaymentMethod === null || onRemovePaymentMethod === void 0 ? void 0 : onRemovePaymentMethod();
+                onRemovePaymentMethod === null || onRemovePaymentMethod === void 0 ? void 0 : onRemovePaymentMethod(data);
             })
                 .catch((error) => {
                 showErrorNotification(error.message, 'Error removing payment method');
             });
         }
         else {
-            const availablePlugins = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.map((plugin) => { var _a, _b, _c; return (_c = (_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.name; });
+            const availablePlugins = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.map(plugin => {
+                var _a, _b;
+                const components = plugin.components;
+                return (_b = (_a = components === null || components === void 0 ? void 0 : components.frontend) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name;
+            });
             onError === null || onError === void 0 ? void 0 : onError(`Either the payment method was not found or the plugin was not present. Available plugins: ${availablePlugins === null || availablePlugins === void 0 ? void 0 : availablePlugins.join(', ')}`);
         }
-    }, [paymentPlugins, token, apiHost, queryClient]);
+    }, [paymentPlugins, token, apiHost, queryClient, onRemovePaymentMethod, accountId, onError]);
     return removePaymentMethod;
 }
 
@@ -21502,7 +21509,7 @@ const InvoiceQuoteView = ({ children, formattedInvoice, html, backButtonName, on
                 }, children: [targetUrl ? (jsx(DocumentTemplatePreview, { targetUrl: targetUrl })) : (jsx(Markup, { content: html })), children] }))] }));
 };
 
-function Invoice({ id, invoiceQuoteViewComponent, backButtonName, onBackButtonClick, onInvoiceDownloadError, onPaymentSuccess, shadow = 'shadow-md', className, hideDownloadButton = false, hidePaymentForm = false, onInvoiceLoaded, }) {
+function Invoice({ id, invoiceQuoteViewComponent, backButtonName, onBackButtonClick, onInvoiceDownloadError, onPaymentSuccess, shadow = 'shadow-md', className, hideDownloadButton = false, hidePaymentForm = false, onInvoiceLoaded, onPaymentMethodSaved, onPaymentMethodRemoved, }) {
     return (jsx(InvoiceQuoteContext.Provider, { value: {
             id,
             invoiceQuoteViewComponent,
@@ -21514,9 +21521,9 @@ function Invoice({ id, invoiceQuoteViewComponent, backButtonName, onBackButtonCl
             className,
             hideDownloadButton,
             onInvoiceLoaded,
-        }, children: jsx(ActualInvoice, { hidePaymentForm: hidePaymentForm }) }));
+        }, children: jsx(ActualInvoice, { hidePaymentForm: hidePaymentForm, onSavePaymentMethod: onPaymentMethodSaved, onRemovePaymentMethod: onPaymentMethodRemoved }) }));
 }
-function ActualInvoice({ hidePaymentForm }) {
+function ActualInvoice({ hidePaymentForm, onSavePaymentMethod, onRemovePaymentMethod }) {
     // Context
     const queryClient = useQueryClient();
     const { id, invoiceQuoteViewComponent, backButtonName, onBackButtonClick, onPaymentSuccess, className, } = useContext(InvoiceQuoteContext);
@@ -21554,7 +21561,11 @@ function ActualInvoice({ hidePaymentForm }) {
     }, [formattedInvoice]);
     if (!formattedInvoice)
         return jsx(Fragment, {});
-    return (jsx("div", { className: "bunny-invoice-container", children: jsxs("div", { className: `bunny-flex bunny-gap-6 ${isMobile ? 'bunny-flex-col bunny-w-full' : ''} ${className}`, children: [formattedInvoice.isLegacy ? (jsx("div", { className: "bunny-flex bunny-justify-center bunny-w-full", children: jsx(LegacyDocument, { documentUuid: formattedInvoice.uuid, documentType: "invoice" }) })) : (invoiceQuoteViewComponent || (jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && !hidePaymentForm && (jsx("div", { className: `bunny-w-full ${hideDownloadButton || formattedInvoice.isLegacy ? '' : 'pt-12'}`, children: jsx(PaymentForm, { onPaymentSuccess: handlePaymentSuccess, invoice: formattedInvoice }) }))] }) }));
+    return (jsx("div", { className: "bunny-invoice-container", children: jsxs("div", { className: `bunny-flex bunny-gap-6 ${isMobile ? 'bunny-flex-col bunny-w-full' : ''} ${className}`, children: [formattedInvoice.isLegacy ? (jsx("div", { className: "bunny-flex bunny-justify-center bunny-w-full", children: jsx(LegacyDocument, { documentUuid: formattedInvoice.uuid, documentType: "invoice" }) })) : (invoiceQuoteViewComponent || (jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && !hidePaymentForm && (jsx("div", { className: `bunny-w-full ${hideDownloadButton || formattedInvoice.isLegacy ? '' : 'pt-12'}`, children: jsx(PaymentForm, { onPaymentSuccess: handlePaymentSuccess, invoice: formattedInvoice, onSavePaymentMethod: (paymentMethodId) => {
+                            onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod(paymentMethodId);
+                        }, onRemovePaymentMethod: (paymentMethod) => {
+                            onRemovePaymentMethod === null || onRemovePaymentMethod === void 0 ? void 0 : onRemovePaymentMethod(paymentMethod.id);
+                        } }) }))] }) }));
 }
 
 const useFocusFirstInput = ({ firstInputRef, isVisible, }) => {
@@ -23466,6 +23477,12 @@ const FormBillingState = () => {
     return (jsx(Form.Item, { label: "Billing state", name: "billingState", rules: [{ required: billingStateRequired }], children: jsx(Input, { placeholder: "State" }) }));
 };
 
+const [OnPaymentMethodSavedProvider, useOnPaymentMethodSaved] = createValueContext();
+// This provider is used in all components that may save a payment method
+
+const [OnPaymentMethodRemovedProvider, useOnPaymentMethodRemoved] = createValueContext();
+// This provider is used in all components that may remove a payment method
+
 const { Text: Text$o } = Typography;
 // HACK: I have imported QuoteFields_QuoteFragment here as a hack to ensure I have all of the quote data needed for
 // the eventual children of this component.
@@ -23509,6 +23526,9 @@ const QuoteCheckout = ({ account, onSuccess, onFail, quote: maskedQuote, taxatio
     // Read fragments
     const quote = readFragment(QuoteCheckout_QuoteFragment, maskedQuote);
     const upgradingSubscription = readFragment(QuoteCheckout_SubscriptionFragment, maskedUpgradingSubscription);
+    // Context
+    const onPaymentMethodSaved = useOnPaymentMethodSaved();
+    const onPaymentMethodRemoved = useOnPaymentMethodRemoved();
     const { apiHost } = useContext(BunnyContext);
     const token = useToken();
     const isMobile = useIsMobile();
@@ -23567,7 +23587,7 @@ const QuoteCheckout = ({ account, onSuccess, onFail, quote: maskedQuote, taxatio
     }
     if (taxationRequiredAccountFields)
         return (jsx(PaymentFormWrapper, { setMaxHeight: false, children: jsx(TaxationForm, { account: account, accountId: quote.accountId }) }));
-    return (jsx(PaymentFormWrapper, { setMaxHeight: false, children: paymentRequired ? (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-w-full", children: [jsx(PaymentForm, { onPaymentSuccess: onSuccess, quote: quote }), (couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.length) === 0 ? (jsx(Fragment, { children: upgradingSubscription &&
+    return (jsx(PaymentFormWrapper, { setMaxHeight: false, children: paymentRequired ? (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-w-full", children: [jsx(PaymentForm, { onPaymentSuccess: onSuccess, quote: quote, onSavePaymentMethod: (paymentMethod) => onPaymentMethodSaved === null || onPaymentMethodSaved === void 0 ? void 0 : onPaymentMethodSaved(paymentMethod.savedPaymentMethodResponse.paymentMethodId), onRemovePaymentMethod: (paymentMethod) => onPaymentMethodRemoved === null || onPaymentMethodRemoved === void 0 ? void 0 : onPaymentMethodRemoved(paymentMethod.id) }), (couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.length) === 0 ? (jsx(Fragment, { children: upgradingSubscription &&
                         shouldShowCouponEditor(quote, activeCouponsExist, upgradingSubscription) && (jsx(CouponEditor, { className: "bunny-px-4 bunny-pt-1", onAddCoupon: addCoupon, isAddingCoupon: isAddingCoupon, couponCode: couponCode, setCouponCode: setCouponCode })) })) : (jsx(Button, { type: "link", loading: isRemovingCoupon, onClick: () => {
                         couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.forEach(couponCharge => {
                             var _a;
@@ -23607,6 +23627,9 @@ const Checkout = ({ onCancel, onSuccess, onFail, onRecalculateTaxes, invoice, op
     const { apiHost } = useContext(BunnyContext);
     const isMobile = useIsMobile();
     const token = useToken();
+    // Context
+    const onPaymentMethodSaved = useOnPaymentMethodSaved();
+    const onPaymentMethodRemoved = useOnPaymentMethodRemoved();
     // Read fragments
     const quote = readFragment(Checkout_QuoteFragment, maskedQuote);
     const hasTaxPlugin = useHasTaxPlugin({
@@ -23655,13 +23678,13 @@ const Checkout = ({ onCancel, onSuccess, onFail, onRecalculateTaxes, invoice, op
     return (jsx("div", { className: `bunny-flex bunny-flex-col bunny-fixed bunny-top-0 bunny-left-0 bunny-right-0 bunny-bottom-0 bunny-bg-slate-50
       bunny-overflow-auto bunny-height-full`, style: {
             zIndex: 1001,
-        }, children: jsxs("div", { className: `bunny-flex bunny-flex-col bunny-grow bunny-pt-4 ${isMobile ? 'bunny-pb-4' : 'bunny-pb-8'} bunny-content-container`, children: [jsx("div", { className: "bunny-flex bunny-justify-end bunny-w-full bunny-pr-4", children: jsx(CloseOutlined, { className: "bunny-text-base bunny-shadow-padding-xb", onClick: onCancel }) }), jsxs("div", { className: `bunny-flex bunny-justify-end bunny-pt-4 bunny-gap-4 ${isMobile ? 'bunny-flex-col' : 'bunny-shadow-padding-xb'}`, children: [((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_b = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _b === void 0 ? void 0 : _b.html)) && (jsx(InvoiceQuoteView, { html: invoice ? invoice.html : (_d = (_c = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _c === void 0 ? void 0 : _c.html) !== null && _d !== void 0 ? _d : '' })), !isMobile && ((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_e = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _e === void 0 ? void 0 : _e.html)) && (jsx(Divider, { className: "bunny-h-full", type: "vertical" })), invoice ? (jsx("div", { className: "bunny-w-full bunny-pt-12", children: jsx(PaymentForm, { onPaymentSuccess: onSuccess, invoice: invoice }) })) : quote ? (jsx(QuoteCheckout, { account: account, onFail: error => {
+        }, children: jsxs("div", { className: `bunny-flex bunny-flex-col bunny-grow bunny-pt-4 ${isMobile ? 'bunny-pb-4' : 'bunny-pb-8'} bunny-content-container`, children: [jsx("div", { className: "bunny-flex bunny-justify-end bunny-w-full bunny-pr-4", children: jsx(CloseOutlined, { className: "bunny-text-base bunny-shadow-padding-xb", onClick: onCancel }) }), jsxs("div", { className: `bunny-flex bunny-justify-end bunny-pt-4 bunny-gap-4 ${isMobile ? 'bunny-flex-col' : 'bunny-shadow-padding-xb'}`, children: [((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_b = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _b === void 0 ? void 0 : _b.html)) && (jsx(InvoiceQuoteView, { html: invoice ? invoice.html : (_d = (_c = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _c === void 0 ? void 0 : _c.html) !== null && _d !== void 0 ? _d : '' })), !isMobile && ((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_e = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _e === void 0 ? void 0 : _e.html)) && (jsx(Divider, { className: "bunny-h-full", type: "vertical" })), invoice ? (jsx("div", { className: "bunny-w-full bunny-pt-12", children: jsx(PaymentForm, { onPaymentSuccess: onSuccess, invoice: invoice, onSavePaymentMethod: (paymentMethod) => onPaymentMethodSaved === null || onPaymentMethodSaved === void 0 ? void 0 : onPaymentMethodSaved(paymentMethod.savedPaymentMethodResponse.paymentMethodId), onRemovePaymentMethod: (paymentMethod) => onPaymentMethodRemoved === null || onPaymentMethodRemoved === void 0 ? void 0 : onPaymentMethodRemoved(paymentMethod.id) }) })) : quote ? (jsx(QuoteCheckout, { account: account, onFail: error => {
                                 onFail(error);
                             }, onSuccess: onSuccess, quote: quote, taxationRequiredAccountFields: taxationRequiredAccountFields, token: token, onRecalculateTaxes: async () => {
                                 if (recalculateTaxesEnabled) {
                                     await recalculateTaxes();
                                 }
-                            } })) : (jsx(PaymentForm, { onPaymentSuccess: onSuccess }))] }), jsx(Footer, { className: "bunny-px-12" })] }) }));
+                            } })) : (jsx(PaymentForm, { onPaymentSuccess: onSuccess, onSavePaymentMethod: (paymentMethod) => onPaymentMethodSaved === null || onPaymentMethodSaved === void 0 ? void 0 : onPaymentMethodSaved(paymentMethod.savedPaymentMethodResponse.paymentMethodId), onRemovePaymentMethod: (paymentMethod) => onPaymentMethodRemoved === null || onPaymentMethodRemoved === void 0 ? void 0 : onPaymentMethodRemoved(paymentMethod.id) }))] }), jsx(Footer, { className: "bunny-px-12" })] }) }));
 };
 
 function canEditChargeQuantity(charge) {
@@ -26298,9 +26321,7 @@ const FeatureAddonsList_PriceListFragment = t(`
 function FeatureAddonsList({ priceList: maskedPriceList, }) {
     var _a;
     const priceList = readFragment(FeatureAddonsList_PriceListFragment, maskedPriceList);
-    console.log('pricelist charges', priceList === null || priceList === void 0 ? void 0 : priceList.charges);
     const featureAddons = (_a = priceList === null || priceList === void 0 ? void 0 : priceList.charges) === null || _a === void 0 ? void 0 : _a.filter(charge => filterDeprecatedCharges(undefined, charge)).filter(charge => charge.featureAddon === true);
-    console.log('featureAddons', featureAddons);
     return (jsx(Fragment, { children: featureAddons === null || featureAddons === void 0 ? void 0 : featureAddons.map((featureAddon, featureAddonIndex) => {
             return (jsx(FeatureAddonRow, { featureAddon: featureAddon, priceList: priceList }, featureAddonIndex));
         }) }));
@@ -28785,7 +28806,7 @@ const getSubscriptions = async ({ apiHost, isInPreviewMode, token, }) => {
 };
 
 const showInfoNotification = useInfoNotification();
-const UpgradeWrapper = ({ onChangePlanCancel, handlePortalErrors, upgradingSubscriptionId, isInPreviewMode, productId, className, shadow = 'md', }) => {
+const UpgradeWrapper = ({ onChangePlanCancel, handlePortalErrors, upgradingSubscriptionId, isInPreviewMode, productId, className, shadow = 'md', onPaymentMethodSaved, onPaymentMethodRemoved, }) => {
     var _a, _b, _c;
     // Context
     const token = useToken();
@@ -28811,7 +28832,7 @@ const UpgradeWrapper = ({ onChangePlanCancel, handlePortalErrors, upgradingSubsc
             productId,
             className,
             shadow,
-        }, children: jsx(UpgradingSubscriptionIdProvider, { initialValue: upgradingSubscriptionId, children: jsx(UpgradingSubscriptionProvider, { value: upgradingSubscription, children: jsx(QuoteProvider, { children: jsx(UpgradeContent, { onChangePlanCancel: onChangePlanCancel, handlePortalErrors: handlePortalErrors, subscriptions: (_c = subscriptionsData === null || subscriptionsData === void 0 ? void 0 : subscriptionsData.subscriptions) === null || _c === void 0 ? void 0 : _c.nodes, subscriptionsAreLoading: subscriptionsAreLoading }) }) }) }) }));
+        }, children: jsx(UpgradingSubscriptionIdProvider, { initialValue: upgradingSubscriptionId, children: jsx(UpgradingSubscriptionProvider, { value: upgradingSubscription, children: jsx(OnPaymentMethodSavedProvider, { value: onPaymentMethodSaved, children: jsx(OnPaymentMethodRemovedProvider, { value: onPaymentMethodRemoved, children: jsx(QuoteProvider, { children: jsx(UpgradeContent, { onChangePlanCancel: onChangePlanCancel, handlePortalErrors: handlePortalErrors, subscriptions: (_c = subscriptionsData === null || subscriptionsData === void 0 ? void 0 : subscriptionsData.subscriptions) === null || _c === void 0 ? void 0 : _c.nodes, subscriptionsAreLoading: subscriptionsAreLoading }) }) }) }) }) }) }));
 };
 const UpgradeContent = ({ onChangePlanCancel, handlePortalErrors, subscriptions, subscriptionsAreLoading, }) => {
     // Context
@@ -28848,7 +28869,7 @@ const UpgradeContent = ({ onChangePlanCancel, handlePortalErrors, subscriptions,
                 } }), jsx("div", { ref: stickyRef }), jsx("div", { className: `bunny-sticky bunny-bottom-4 bunny-transition-[margin] bunny-duration-300 ${isSticky ? 'bunny-mx-4' : 'bunny-mx-0'}`, children: selectedPriceList && (jsx(PlanPickerCheckoutBar, { selectedPriceList: selectedPriceList, handlePortalErrors: handlePortalErrors, onCheckoutSuccess: () => onChangePlanCancel() })) })] }));
 };
 
-const SubscriptionsWrapper = ({ handlePortalErrors, companyName, isInPreviewMode = false, productId, className, styles: userStyles = {}, noSubscriptionsComponent, showInactiveSubscriptions, showInactiveSubscriptionsToggle = true, }) => {
+const SubscriptionsWrapper = ({ handlePortalErrors, companyName, isInPreviewMode = false, productId, className, styles: userStyles = {}, noSubscriptionsComponent, showInactiveSubscriptions, showInactiveSubscriptionsToggle = true, onPaymentMethodSaved, onPaymentMethodRemoved, }) => {
     var _a, _b;
     // Context
     const token = useToken();
@@ -28879,15 +28900,17 @@ const SubscriptionsWrapper = ({ handlePortalErrors, companyName, isInPreviewMode
             productId,
             isInPreviewMode,
             showInactiveSubscriptions,
-        }, children: jsx(UpgradingSubscriptionIdProvider, { children: jsx(Subscriptions, { subscriptions: subscriptions, subscriptionsAreLoading: subscriptionsAreLoading, handlePortalErrors: handlePortalErrors, companyName: companyName, noSubscriptionsComponent: noSubscriptionsComponent, showInactiveSubscriptionsToggle: showInactiveSubscriptionsToggle }) }) }));
+        }, children: jsx(UpgradingSubscriptionIdProvider, { children: jsx(OnPaymentMethodSavedProvider, { value: onPaymentMethodSaved, children: jsx(OnPaymentMethodRemovedProvider, { value: onPaymentMethodRemoved, children: jsx(Subscriptions, { subscriptions: subscriptions, subscriptionsAreLoading: subscriptionsAreLoading, handlePortalErrors: handlePortalErrors, companyName: companyName, noSubscriptionsComponent: noSubscriptionsComponent, showInactiveSubscriptionsToggle: showInactiveSubscriptionsToggle }) }) }) }) }));
 };
 const Subscriptions = ({ subscriptions: maskedSubscriptions, subscriptionsAreLoading, handlePortalErrors, companyName, noSubscriptionsComponent, showInactiveSubscriptionsToggle, }) => {
     // Context
     const token = useToken();
     const { apiHost } = useContext(BunnyContext);
     const { className, isInPreviewMode, showInactiveSubscriptions: showInactiveSubscriptionsOverride, productId, shadow, } = useSubscriptionProps();
-    const [upgradingSubscriptionId, setUpgradingSubscriptionId] = useUpgradingSubscriptionId();
+    const onPaymentMethodSaved = useOnPaymentMethodSaved();
+    const onPaymentMethodRemoved = useOnPaymentMethodRemoved();
     // Local state
+    const [upgradingSubscriptionId, setUpgradingSubscriptionId] = useUpgradingSubscriptionId();
     const [showInactiveSubscriptionsState, setShowInactiveSubscriptionsState] = useState(false);
     const [isChangingPlan, setIsChangingPlan] = useState(false);
     const [quantityDrawerOpen, setQuantityDrawerOpen] = useState(false);
@@ -28946,7 +28969,7 @@ const Subscriptions = ({ subscriptions: maskedSubscriptions, subscriptionsAreLoa
     if (isChangingPlan || isInPreviewMode) {
         return (jsx(UpgradeWrapper, { isInPreviewMode: isInPreviewMode, productId: productId, onChangePlanCancel: () => {
                 setIsChangingPlan(false);
-            }, handlePortalErrors: handlePortalErrors, upgradingSubscriptionId: upgradingSubscriptionId, className: className, shadow: shadow }));
+            }, handlePortalErrors: handlePortalErrors, upgradingSubscriptionId: upgradingSubscriptionId, className: className, shadow: shadow, onPaymentMethodSaved: onPaymentMethodSaved, onPaymentMethodRemoved: onPaymentMethodRemoved }));
     }
     if (!subscriptions)
         return null;
@@ -29317,10 +29340,10 @@ function BillingDetailsSection({ hidePaymentMethodForm, countryListFilter, }) {
                 }, accountId: accountId, onContactCreated: handleContactCreated })] }));
 }
 
-const BillingDetails = ({ className, countryListFilter, hideBillingDetailsForm = false, hidePaymentMethodForm = false, isCardEnabled = true, isUpgradeFromTrial = false, shadow = 'shadow-md', onSavePaymentMethod, }) => {
+const BillingDetails = ({ className, countryListFilter, hideBillingDetailsForm = false, hidePaymentMethodForm = false, isCardEnabled = true, isUpgradeFromTrial = false, shadow = 'shadow-md', onSavePaymentMethod, onPaymentMethodRemoved, }) => {
     // Hooks
     const isMobile = useIsMobile();
-    return (jsx(WrapperComponent, { isCardEnabled: isCardEnabled, shadow: shadow, className: className, children: jsxs("div", { className: `bunny-flex bunny-py-2 bunny-my-2 ${isMobile ? 'bunny-flex-col bunny-space-y-4' : 'bunny-flex-row'} bunny-gap-4`, children: [!hideBillingDetailsForm ? (jsx(BillingDetailsSection, { hidePaymentMethodForm: hidePaymentMethodForm, countryListFilter: countryListFilter })) : null, !hideBillingDetailsForm && !hidePaymentMethodForm ? jsx(ResponsiveDivider, {}) : null, !hidePaymentMethodForm ? (jsx(PaymentFormSection, { hideBillingDetailsForm: hideBillingDetailsForm, isUpgradeFromTrial: isUpgradeFromTrial, onSavePaymentMethod: onSavePaymentMethod })) : null] }) }));
+    return (jsx(WrapperComponent, { isCardEnabled: isCardEnabled, shadow: shadow, className: className, children: jsxs("div", { className: `bunny-flex bunny-py-2 bunny-my-2 ${isMobile ? 'bunny-flex-col bunny-space-y-4' : 'bunny-flex-row'} bunny-gap-4`, children: [!hideBillingDetailsForm ? (jsx(BillingDetailsSection, { hidePaymentMethodForm: hidePaymentMethodForm, countryListFilter: countryListFilter })) : null, !hideBillingDetailsForm && !hidePaymentMethodForm ? jsx(ResponsiveDivider, {}) : null, !hidePaymentMethodForm ? (jsx(PaymentFormSection, { hideBillingDetailsForm: hideBillingDetailsForm, isUpgradeFromTrial: isUpgradeFromTrial, onSavePaymentMethod: onSavePaymentMethod, onPaymentMethodRemoved: onPaymentMethodRemoved })) : null] }) }));
 };
 const WrapperComponent = ({ children, isCardEnabled, shadow, className, }) => {
     return (jsx("div", { className: `${className}`, children: isCardEnabled ? jsx(Card, { className: `${shadow}`, children: children }) : jsx("div", { children: children }) }));
@@ -29329,7 +29352,7 @@ const ResponsiveDivider = () => {
     const isMobile = useIsMobile();
     return isMobile ? (jsx("div", { className: "bunny-mx-4", children: jsx(Divider, {}) })) : (jsx("div", { children: jsx(Divider, { className: "bunny-h-full", type: "vertical" }) }));
 };
-const PaymentFormSection = ({ hideBillingDetailsForm, isUpgradeFromTrial, onSavePaymentMethod, }) => {
+const PaymentFormSection = ({ hideBillingDetailsForm, isUpgradeFromTrial, onSavePaymentMethod, onPaymentMethodRemoved, }) => {
     const isMobile = useIsMobile();
     const showSuccessNotification = useSuccessNotification();
     return (jsx("div", { className: `${isMobile || hideBillingDetailsForm ? 'bunny-w-full' : 'bunny-w-1/2 bunny-pt-4'} bunny-flex bunny-justify-center`, children: jsx(PaymentForm, { onSavePaymentMethod: (response) => {
@@ -29338,7 +29361,9 @@ const PaymentFormSection = ({ hideBillingDetailsForm, isUpgradeFromTrial, onSave
                     : 'Payment method saved successfully!');
                 // TODO: onSavePaymentMethod(response: any) should be cleaned up to have a response type (not any)
                 // and work with both stripe and demo pay requests
-                onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod(response);
+                onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod(response.savedPaymentMethodResponse.paymentMethodId);
+            }, onRemovePaymentMethod: (response) => {
+                onPaymentMethodRemoved === null || onPaymentMethodRemoved === void 0 ? void 0 : onPaymentMethodRemoved(response.id);
             } }) }));
 };
 

package/dist/esm/types/src/components/BillingDetails/BillingDetails.d.ts

@@ -1,6 +1,6 @@
 import '../../styles/index.less';
 import { ShadowType } from '../../types/shadowType';
-declare const BillingDetails: ({ className, countryListFilter, hideBillingDetailsForm, hidePaymentMethodForm, isCardEnabled, isUpgradeFromTrial, shadow, onSavePaymentMethod, }: {
+declare const BillingDetails: ({ className, countryListFilter, hideBillingDetailsForm, hidePaymentMethodForm, isCardEnabled, isUpgradeFromTrial, shadow, onSavePaymentMethod, onPaymentMethodRemoved, }: {
     className?: string;
     countryListFilter?: (country: {
         value: string;
@@ -11,6 +11,7 @@ declare const BillingDetails: ({ className, countryListFilter, hideBillingDetail
     isCardEnabled?: boolean;
     isUpgradeFromTrial?: boolean;
     shadow?: ShadowType;
-    onSavePaymentMethod?: (paymentMethodData?: any) => void;
+    onSavePaymentMethod?: (paymentMethodId: string) => void;
+    onPaymentMethodRemoved?: (paymentMethodId: string) => void;
 }) => import("react/jsx-runtime").JSX.Element;
 export default BillingDetails;

package/dist/esm/types/src/components/Invoice/Invoice.d.ts

@@ -1,5 +1,7 @@
 import { InvoiceQuoteContextProps } from '../../contexts/InvoiceQuoteContext';
 export type InvoiceProps = InvoiceQuoteContextProps & {
     hidePaymentForm?: boolean;
+    onPaymentMethodSaved?: (paymentMethodId: string) => void;
+    onPaymentMethodRemoved?: (paymentMethodId: string) => void;
 };
-export default function Invoice({ id, invoiceQuoteViewComponent, backButtonName, onBackButtonClick, onInvoiceDownloadError, onPaymentSuccess, shadow, className, hideDownloadButton, hidePaymentForm, onInvoiceLoaded, }: InvoiceProps): import("react/jsx-runtime").JSX.Element;
+export default function Invoice({ id, invoiceQuoteViewComponent, backButtonName, onBackButtonClick, onInvoiceDownloadError, onPaymentSuccess, shadow, className, hideDownloadButton, hidePaymentForm, onInvoiceLoaded, onPaymentMethodSaved, onPaymentMethodRemoved, }: InvoiceProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/PaymentForm/PaymentForm.d.ts

@@ -1,6 +1,8 @@
 import FormattedInvoice from '@/types/FormattedInvoice';
 import Invoice from '@/types/Invoice';
-import { FragmentOf } from 'gql.tada';
+import { FragmentOf, ResultOf } from 'gql.tada';
+import { PaymentForm_PaymentMethodsFragment } from './fragments/PaymentForm_PaymentMethodsFragment';
+type PaymentMethodFragment = ResultOf<typeof PaymentForm_PaymentMethodsFragment>;
 export declare const PaymentForm_QuoteFragment: import("gql.tada").TadaDocumentNode<{
     id: string | null;
     currencyId: string;
@@ -18,7 +20,7 @@ export declare function PaymentForm({ invoice, quote: maskedQuote, onPaymentSucc
     onPaymentSuccess?: (response: any) => void;
     onPaymentHoldSuccess?: (response: any) => void;
     onSavePaymentMethod?: (response: any) => void;
-    onRemovePaymentMethod?: () => void;
+    onRemovePaymentMethod?: (paymentMethod: PaymentMethodFragment) => void;
     onSetDefaultPaymentMethod?: () => void;
     accountId?: string;
     overrideToken?: string;
@@ -28,3 +30,4 @@ export declare function PaymentForm({ invoice, quote: maskedQuote, onPaymentSucc
         amountToHold?: number;
     };
 }): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/esm/types/src/components/PaymentForm/fragments/PaymentForm_PaymentMethodsFragment.d.ts

@@ -3,6 +3,9 @@ export declare const PaymentForm_PaymentMethodsFragment: import("gql.tada").Tada
         MiniCreditCard_PaymentMethodFragment: "PaymentMethod";
     };
     id: string;
+    plugin: {
+        id: string;
+    } | null;
 }, {}, {
     fragment: "PaymentForm_PaymentMethodsFragment";
     on: "PaymentMethod";

package/dist/esm/types/src/components/PaymentForm/hooks/useRemovePaymentMethod.d.ts

@@ -1,2 +1,5 @@
-declare function useRemovePaymentMethod(onRemovePaymentMethod?: () => void, onError?: (message: string) => void): (data: any) => Promise<void>;
+import { ResultOf } from 'gql.tada';
+import { PaymentForm_PaymentMethodsFragment } from '../fragments/PaymentForm_PaymentMethodsFragment';
+type PaymentMethodFragment = ResultOf<typeof PaymentForm_PaymentMethodsFragment>;
+declare function useRemovePaymentMethod(onRemovePaymentMethod?: (paymentMethod: PaymentMethodFragment) => void, onError?: (message: string) => void): (data: PaymentMethodFragment) => Promise<void>;
 export default useRemovePaymentMethod;

package/dist/esm/types/src/components/Subscriptions/Subscriptions.d.ts

@@ -1,4 +1,4 @@
-declare const SubscriptionsWrapper: ({ handlePortalErrors, companyName, isInPreviewMode, productId, className, styles: userStyles, noSubscriptionsComponent, showInactiveSubscriptions, showInactiveSubscriptionsToggle, }: {
+declare const SubscriptionsWrapper: ({ handlePortalErrors, companyName, isInPreviewMode, productId, className, styles: userStyles, noSubscriptionsComponent, showInactiveSubscriptions, showInactiveSubscriptionsToggle, onPaymentMethodSaved, onPaymentMethodRemoved, }: {
     handlePortalErrors?: (errors: any) => void;
     companyName: string;
     isInPreviewMode?: boolean;
@@ -12,5 +12,7 @@ declare const SubscriptionsWrapper: ({ handlePortalErrors, companyName, isInPrev
     noSubscriptionsComponent?: React.ReactNode;
     showInactiveSubscriptions?: boolean;
     showInactiveSubscriptionsToggle?: boolean;
+    onPaymentMethodSaved?: (paymentMethodId: string) => void;
+    onPaymentMethodRemoved?: (paymentMethodId: string) => void;
 }) => import("react/jsx-runtime").JSX.Element;
 export default SubscriptionsWrapper;

package/dist/esm/types/src/components/Subscriptions/Upgrade/Upgrade.d.ts

@@ -1,4 +1,4 @@
-declare const UpgradeWrapper: ({ onChangePlanCancel, handlePortalErrors, upgradingSubscriptionId, isInPreviewMode, productId, className, shadow, }: {
+declare const UpgradeWrapper: ({ onChangePlanCancel, handlePortalErrors, upgradingSubscriptionId, isInPreviewMode, productId, className, shadow, onPaymentMethodSaved, onPaymentMethodRemoved, }: {
     onChangePlanCancel: () => void;
     handlePortalErrors?: (error: any) => void;
     upgradingSubscriptionId?: string;
@@ -6,5 +6,7 @@ declare const UpgradeWrapper: ({ onChangePlanCancel, handlePortalErrors, upgradi
     productId: string | undefined;
     className?: string;
     shadow?: "none" | "sm" | "md" | "lg";
+    onPaymentMethodSaved?: (paymentMethodId: string) => void;
+    onPaymentMethodRemoved?: (paymentMethodId: string) => void;
 }) => import("react/jsx-runtime").JSX.Element | null;
 export default UpgradeWrapper;

package/dist/esm/types/src/contexts/onPaymentMethodRemoved.d.ts

@@ -0,0 +1,5 @@
+declare const OnPaymentMethodRemovedProvider: ({ value, children }: {
+    value: ((paymentMethodId: string) => void) | undefined;
+    children?: import("react").ReactNode;
+}) => import("react/jsx-runtime").JSX.Element, useOnPaymentMethodRemoved: () => ((paymentMethodId: string) => void) | undefined;
+export { OnPaymentMethodRemovedProvider, useOnPaymentMethodRemoved };

package/dist/esm/types/src/contexts/onPaymentMethodSaved.d.ts

@@ -0,0 +1,5 @@
+declare const OnPaymentMethodSavedProvider: ({ value, children }: {
+    value: ((paymentMethodId: string) => void) | undefined;
+    children?: import("react").ReactNode;
+}) => import("react/jsx-runtime").JSX.Element, useOnPaymentMethodSaved: () => ((paymentMethodId: string) => void) | undefined;
+export { OnPaymentMethodSavedProvider, useOnPaymentMethodSaved };

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import FormattedInvoice from '@/types/FormattedInvoice';
 import { FormattedQuote } from '@/types/FormattedQuote';
 import { Transaction, TransactionKind } from '@/types/Transaction';
 import * as gql_tada from 'gql.tada';
-import { FragmentOf } from 'gql.tada';
+import { FragmentOf, ResultOf } from 'gql.tada';
 import Invoice$1 from '@/types/Invoice';
 import { QueryClient } from '@tanstack/react-query';
 import { ThemeConfig } from 'antd';
@@ -27,8 +27,10 @@ type InvoiceQuoteContextProps = {
 
 type InvoiceProps = InvoiceQuoteContextProps & {
     hidePaymentForm?: boolean;
+    onPaymentMethodSaved?: (paymentMethodId: string) => void;
+    onPaymentMethodRemoved?: (paymentMethodId: string) => void;
 };
-declare function Invoice({ id, invoiceQuoteViewComponent, backButtonName, onBackButtonClick, onInvoiceDownloadError, onPaymentSuccess, shadow, className, hideDownloadButton, hidePaymentForm, onInvoiceLoaded, }: InvoiceProps): react_jsx_runtime.JSX.Element;
+declare function Invoice({ id, invoiceQuoteViewComponent, backButtonName, onBackButtonClick, onInvoiceDownloadError, onPaymentSuccess, shadow, className, hideDownloadButton, hidePaymentForm, onInvoiceLoaded, onPaymentMethodSaved, onPaymentMethodRemoved, }: InvoiceProps): react_jsx_runtime.JSX.Element;
 
 declare global {
     interface Window {
@@ -79,6 +81,21 @@ declare function Quotes({ className, columns, filter, filterQuotes, sort, noQuot
     noQuotesMessage?: string;
 }): react_jsx_runtime.JSX.Element;
 
+declare const PaymentForm_PaymentMethodsFragment: gql_tada.TadaDocumentNode<{
+    [$tada.fragmentRefs]: {
+        MiniCreditCard_PaymentMethodFragment: "PaymentMethod";
+    };
+    id: string;
+    plugin: {
+        id: string;
+    } | null;
+}, {}, {
+    fragment: "PaymentForm_PaymentMethodsFragment";
+    on: "PaymentMethod";
+    masked: true;
+}>;
+
+type PaymentMethodFragment = ResultOf<typeof PaymentForm_PaymentMethodsFragment>;
 declare const PaymentForm_QuoteFragment: gql_tada.TadaDocumentNode<{
     id: string | null;
     currencyId: string;
@@ -96,7 +113,7 @@ declare function PaymentForm({ invoice, quote: maskedQuote, onPaymentSuccess, on
     onPaymentSuccess?: (response: any) => void;
     onPaymentHoldSuccess?: (response: any) => void;
     onSavePaymentMethod?: (response: any) => void;
-    onRemovePaymentMethod?: () => void;
+    onRemovePaymentMethod?: (paymentMethod: PaymentMethodFragment) => void;
     onSetDefaultPaymentMethod?: () => void;
     accountId?: string;
     overrideToken?: string;
@@ -192,7 +209,7 @@ declare function Transactions({ transactionComponent, showSearchBar, showTitle,
     hidePaymentForm?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
-declare const SubscriptionsWrapper: ({ handlePortalErrors, companyName, isInPreviewMode, productId, className, styles: userStyles, noSubscriptionsComponent, showInactiveSubscriptions, showInactiveSubscriptionsToggle, }: {
+declare const SubscriptionsWrapper: ({ handlePortalErrors, companyName, isInPreviewMode, productId, className, styles: userStyles, noSubscriptionsComponent, showInactiveSubscriptions, showInactiveSubscriptionsToggle, onPaymentMethodSaved, onPaymentMethodRemoved, }: {
     handlePortalErrors?: (errors: any) => void;
     companyName: string;
     isInPreviewMode?: boolean;
@@ -206,9 +223,11 @@ declare const SubscriptionsWrapper: ({ handlePortalErrors, companyName, isInPrev
     noSubscriptionsComponent?: React.ReactNode;
     showInactiveSubscriptions?: boolean;
     showInactiveSubscriptionsToggle?: boolean;
+    onPaymentMethodSaved?: (paymentMethodId: string) => void;
+    onPaymentMethodRemoved?: (paymentMethodId: string) => void;
 }) => react_jsx_runtime.JSX.Element;
 
-declare const UpgradeWrapper: ({ onChangePlanCancel, handlePortalErrors, upgradingSubscriptionId, isInPreviewMode, productId, className, shadow, }: {
+declare const UpgradeWrapper: ({ onChangePlanCancel, handlePortalErrors, upgradingSubscriptionId, isInPreviewMode, productId, className, shadow, onPaymentMethodSaved, onPaymentMethodRemoved, }: {
     onChangePlanCancel: () => void;
     handlePortalErrors?: (error: any) => void;
     upgradingSubscriptionId?: string;
@@ -216,9 +235,11 @@ declare const UpgradeWrapper: ({ onChangePlanCancel, handlePortalErrors, upgradi
     productId: string | undefined;
     className?: string;
     shadow?: "none" | "sm" | "md" | "lg";
+    onPaymentMethodSaved?: (paymentMethodId: string) => void;
+    onPaymentMethodRemoved?: (paymentMethodId: string) => void;
 }) => react_jsx_runtime.JSX.Element | null;
 
-declare const BillingDetails: ({ className, countryListFilter, hideBillingDetailsForm, hidePaymentMethodForm, isCardEnabled, isUpgradeFromTrial, shadow, onSavePaymentMethod, }: {
+declare const BillingDetails: ({ className, countryListFilter, hideBillingDetailsForm, hidePaymentMethodForm, isCardEnabled, isUpgradeFromTrial, shadow, onSavePaymentMethod, onPaymentMethodRemoved, }: {
     className?: string;
     countryListFilter?: (country: {
         value: string;
@@ -229,7 +250,8 @@ declare const BillingDetails: ({ className, countryListFilter, hideBillingDetail
     isCardEnabled?: boolean;
     isUpgradeFromTrial?: boolean;
     shadow?: ShadowType;
-    onSavePaymentMethod?: (paymentMethodData?: any) => void;
+    onSavePaymentMethod?: (paymentMethodId: string) => void;
+    onPaymentMethodRemoved?: (paymentMethodId: string) => void;
 }) => react_jsx_runtime.JSX.Element;
 
 declare const Footer: ({ className }: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bunnyapp/components",
-  "version": "1.7.0-beta.12",
+  "version": "1.7.0-beta.15",
   "description": "Components from the Bunny portal to embed Bunny UI functionality into your application.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",