@pelcro/react-pelcro-js 3.0.0-beta.1 → 3.0.0-beta.12

package/dist/index.cjs.js

@@ -3246,7 +3246,7 @@ var validation$1 = {
 	enterEmail: "Un courriel est requis.",
 	enterPassword: "Mot de passe requis."
 };
-var buttons$7 = {
+var buttons$9 = {
 	account: "Accès abonné(e)s",
 	login: "Se connecter"
 };
@@ -3323,7 +3323,7 @@ var confirm$5 = {
 };
 var common_fr = {
 	validation: validation$1,
-	buttons: buttons$7,
+	buttons: buttons$9,
 	dashboard: dashboard$1,
 	select: select$3,
 	confirm: confirm$5
@@ -3334,7 +3334,7 @@ var validation = {
 	enterEmail: "Email address is required.",
 	enterPassword: "Password is required."
 };
-var buttons$6 = {
+var buttons$8 = {
 	account: "My account",
 	login: "Login"
 };
@@ -3411,7 +3411,7 @@ var confirm$4 = {
 };
 var common_en = {
 	validation: validation,
-	buttons: buttons$6,
+	buttons: buttons$8,
 	dashboard: dashboard,
 	select: select$2,
 	confirm: confirm$4
@@ -3461,10 +3461,10 @@ var paymentMethod_fr = {
 	select: select
 };
 
-var title$d = "Enter your email to subscribe to our newsletter";
+var title$f = "Enter your email to subscribe to our newsletter";
 var updateTitle$1 = "Update newsletter selections";
 var subtitle$7 = "We may use your email for other marketing communication";
-var labels$n = {
+var labels$p = {
 	submit: "Submit",
 	firstName: "First name",
 	lastName: "Last name",
@@ -3480,17 +3480,17 @@ var messages$r = {
 	here: "here"
 };
 var newsletter_en = {
-	title: title$d,
+	title: title$f,
 	updateTitle: updateTitle$1,
 	subtitle: subtitle$7,
-	labels: labels$n,
+	labels: labels$p,
 	messages: messages$r
 };
 
-var title$c = "Entrez votre adresse courriel pour vous abonner à notre infolettre";
+var title$e = "Entrez votre adresse courriel pour vous abonner à notre infolettre";
 var updateTitle = "Mettre à jour son choix d'infolettres";
 var subtitle$6 = "Nous pouvons utiliser votre adresse courriel pour d’autres communications marketing";
-var labels$m = {
+var labels$o = {
 	submit: "Lire l’article !",
 	firstName: "Prénom",
 	lastName: "Nom de famille",
@@ -3506,14 +3506,14 @@ var messages$q = {
 	here: "ici"
 };
 var newsletter_fr = {
-	title: title$c,
+	title: title$e,
 	updateTitle: updateTitle,
 	subtitle: subtitle$6,
-	labels: labels$m,
+	labels: labels$o,
 	messages: messages$q
 };
 
-var labels$l = {
+var labels$n = {
 	"continue": "Continue to content"
 };
 var messages$p = {
@@ -3532,18 +3532,22 @@ var messages$p = {
 	giftRedeem: {
 		title: "Congratulations",
 		content: "You have successfully redeemed your gift subscription. Enjoy!"
+	},
+	invoicePayment: {
+		title: "Invoice paid successfully",
+		content: "Please contact us if you have any questions or concerns."
 	}
 };
 var errors$9 = {
 	"": ""
 };
 var success_en = {
-	labels: labels$l,
+	labels: labels$n,
 	messages: messages$p,
 	errors: errors$9
 };
 
-var labels$k = {
+var labels$m = {
 	"continue": "Abonnement réussi !"
 };
 var messages$o = {
@@ -3562,13 +3566,17 @@ var messages$o = {
 	giftRedeem: {
 		title: "Félicitations",
 		content: "Vous avez validé votre abonnement cadeau. Profitez-en!"
+	},
+	invoicePayment: {
+		title: "Invoice paid successfully",
+		content: "Please contact us if you have any questions or concerns."
 	}
 };
 var errors$8 = {
 	"": ""
 };
 var success_fr = {
-	labels: labels$k,
+	labels: labels$m,
 	messages: messages$o,
 	errors: errors$8
 };
@@ -3605,7 +3613,7 @@ var messages$l = {
 	youAreSafe: "You're safe - PCI compliant 128 SSL by",
 	bankRedirection: "Please hold, redirecting you to your bank."
 };
-var labels$j = {
+var labels$l = {
 	card: "Enter card number",
 	date: "Expiration date",
 	CVC: "CVC",
@@ -3625,14 +3633,14 @@ var labels$j = {
 };
 var checkoutForm_en = {
 	messages: messages$l,
-	labels: labels$j
+	labels: labels$l
 };
 
 var messages$k = {
 	youAreSafe: "Vous êtes en sécurité - PCI conforme 128 SSL par",
 	bankRedirection: "Veuillez patienter, nous vous redirigeons vers votre banque."
 };
-var labels$i = {
+var labels$k = {
 	card: "Entrez le numéro de carte",
 	date: "Date d’expiration",
 	CVC: "CVC",
@@ -3652,7 +3660,7 @@ var labels$i = {
 };
 var checkoutForm_fr = {
 	messages: messages$k,
-	labels: labels$i
+	labels: labels$k
 };
 
 var youAreSafe$1 = "You're safe - PCI compliant 128 SSL by";
@@ -3661,13 +3669,17 @@ var giftSent$1 = "Subscription gift has been sent to";
 var successfully$1 = "successfully";
 var entitlement$1 = "Some of the content on this page is available with one or more of our plans. <1>Subscribe</1> now to get full page access.";
 var recaptcha$1 = "This site is protected by reCAPTCHA and the Google <1>Privacy Policy</1> and <3>Terms of Service</3> apply.";
+var invalidInvoice$1 = "Invalid invoice ID, please contact support";
+var zeroTotalInvoice$1 = "You can't view an invoice of 0$";
 var messages_en = {
 	youAreSafe: youAreSafe$1,
 	cancel: cancel$1,
 	giftSent: giftSent$1,
 	successfully: successfully$1,
 	entitlement: entitlement$1,
-	recaptcha: recaptcha$1
+	recaptcha: recaptcha$1,
+	invalidInvoice: invalidInvoice$1,
+	zeroTotalInvoice: zeroTotalInvoice$1
 };
 
 var youAreSafe = "Vous êtes en sécurité - PCI conforme 128 SSL par";
@@ -3676,16 +3688,20 @@ var giftSent = "Le cadeau d’abonnement a été envoyé à";
 var successfully = "avec succès.";
 var entitlement = "Une partie du contenu de cette page est disponible sous un ou plusieurs de nos plans. <1>Abonnez-vous</1> à l'un de nos plans disponibles pour accéder à plus de contenu";
 var recaptcha = "Ce site est protégé par reCAPTCHA - les <1>règles de confidentialité</1> Google ainsi que les <3>conditions d'utilisation</3> s'appliquent.";
+var invalidInvoice = "Invalid invoice ID, please contact support";
+var zeroTotalInvoice = "You can't view an invoice of 0$";
 var messages_fr = {
 	youAreSafe: youAreSafe,
 	cancel: cancel,
 	giftSent: giftSent,
 	successfully: successfully,
 	entitlement: entitlement,
-	recaptcha: recaptcha
+	recaptcha: recaptcha,
+	invalidInvoice: invalidInvoice,
+	zeroTotalInvoice: zeroTotalInvoice
 };
 
-var labels$h = {
+var labels$j = {
 	email: "Enter email",
 	password: "Enter password",
 	required: "required",
@@ -3712,12 +3728,12 @@ var errors$5 = {
 	"": ""
 };
 var login_en = {
-	labels: labels$h,
+	labels: labels$j,
 	messages: messages$j,
 	errors: errors$5
 };
 
-var labels$g = {
+var labels$i = {
 	email: "Entrez votre adresse courriel",
 	password: "Entrez votre mot de passe",
 	required: "Champs obligatoires",
@@ -3744,14 +3760,14 @@ var errors$4 = {
 	"": ""
 };
 var login_fr = {
-	labels: labels$g,
+	labels: labels$i,
 	messages: messages$i,
 	errors: errors$4
 };
 
-var title$b = "Create an account";
+var title$d = "Create an account";
 var subtitle$5 = "Enter your email and password below";
-var labels$f = {
+var labels$h = {
 	signUpFacebook: "Sign up with Facebook",
 	signUpGoogle: "Sign up with Google",
 	signUpEmail: "Sign up with Email",
@@ -3796,7 +3812,7 @@ var gift$1 = {
 		lastName: "Last name",
 		email: "Email",
 		startDate: "Gift date",
-		giftMessage: "Gift message (200 characters max)",
+		giftMessage: "Gift message ({{count}} characters remaining)",
 		required: "required",
 		firstNamePlaceholder: "First name",
 		lastNamePlaceholder: "Last name",
@@ -3835,18 +3851,18 @@ var redeem$1 = {
 	}
 };
 var register_en = {
-	title: title$b,
+	title: title$d,
 	subtitle: subtitle$5,
-	labels: labels$f,
+	labels: labels$h,
 	messages: messages$h,
 	errors: errors$3,
 	gift: gift$1,
 	redeem: redeem$1
 };
 
-var title$a = "Créer un compte";
+var title$c = "Créer un compte";
 var subtitle$4 = "Entrez votre courriel et votre mot de passe ci-dessous";
-var labels$e = {
+var labels$g = {
 	signUpFacebook: "Inscrivez-vous avec Facebook",
 	signUpGoogle: "Inscrivez-vous avec Google",
 	signUpEmail: "Inscrivez-vous avec votre courriel",
@@ -3892,7 +3908,7 @@ var gift = {
 		lastName: "Nom de famille",
 		email: "Adresse courriel",
 		startDate: "Date de début",
-		giftMessage: "Message du cadeau (200 caractères max)",
+		giftMessage: "Message du cadeau ({{count}} caractères restants)",
 		required: "Champs obligatoires",
 		firstNamePlaceholder: "Prénom",
 		lastNamePlaceholder: "Nom de famille",
@@ -3931,16 +3947,16 @@ var redeem = {
 	}
 };
 var register_fr = {
-	title: title$a,
+	title: title$c,
 	subtitle: subtitle$4,
-	labels: labels$e,
+	labels: labels$g,
 	messages: messages$g,
 	errors: errors$2,
 	gift: gift,
 	redeem: redeem
 };
 
-var labels$d = {
+var labels$f = {
 	title: "Want to update your profile?",
 	subtitle: "Enter your information below to update your profile",
 	email: "Email",
@@ -3962,11 +3978,11 @@ var messages$f = {
 	pictureUpdated: "Your profile picture was updated successfully."
 };
 var userEdit_en = {
-	labels: labels$d,
+	labels: labels$f,
 	messages: messages$f
 };
 
-var labels$c = {
+var labels$e = {
 	title: "Voulez-vous mettre à jour votre profil ?",
 	subtitle: "Entrez vos informations ci-dessous pour mettre à jour votre profil",
 	email: "Address courriel",
@@ -3988,14 +4004,14 @@ var messages$e = {
 	pictureUpdated: "Votre photo de profil a été mise à jour avec succès."
 };
 var userEdit_fr = {
-	labels: labels$c,
+	labels: labels$e,
 	messages: messages$e
 };
 
-var title$9 = "Enter your shipping address";
+var title$b = "Enter your shipping address";
 var selectAddressTitle$1 = "Please select an address";
 var selectAddressSubtitle$1 = "Select one of your saved addresses, or add a new one";
-var labels$b = {
+var labels$d = {
 	address: "Address",
 	code: "Postal Code/Zip",
 	city: "City",
@@ -4005,7 +4021,7 @@ var labels$b = {
 	lastName: "Last name",
 	required: "required"
 };
-var buttons$5 = {
+var buttons$7 = {
 	submit: "Submit",
 	selectAddress: "Select address",
 	addAddress: "Add new address"
@@ -4015,18 +4031,18 @@ var messages$d = {
 	subRedeemed: "Your subscription has been redeemed."
 };
 var address_en = {
-	title: title$9,
+	title: title$b,
 	selectAddressTitle: selectAddressTitle$1,
 	selectAddressSubtitle: selectAddressSubtitle$1,
-	labels: labels$b,
-	buttons: buttons$5,
+	labels: labels$d,
+	buttons: buttons$7,
 	messages: messages$d
 };
 
-var title$8 = "Entrez votre adresse de livraison";
+var title$a = "Entrez votre adresse de livraison";
 var selectAddressTitle = "Veuillez sélectionner une adresse";
 var selectAddressSubtitle = "Choisissez l'une de vos adresses ou créez-en une nouvelle";
-var labels$a = {
+var labels$c = {
 	address: "Adresse",
 	code: "Code postal / Zip",
 	city: "Ville",
@@ -4036,7 +4052,7 @@ var labels$a = {
 	lastName: "Nom de famille",
 	required: "Champs obligatoires"
 };
-var buttons$4 = {
+var buttons$6 = {
 	submit: "Valider",
 	selectAddress: "Choisir cette adresse",
 	addAddress: "Ajouter une nouvelle adresse"
@@ -4046,15 +4062,15 @@ var messages$c = {
 	subRedeemed: "Votre abonnement a bien été activé."
 };
 var address_fr = {
-	title: title$8,
+	title: title$a,
 	selectAddressTitle: selectAddressTitle,
 	selectAddressSubtitle: selectAddressSubtitle,
-	labels: labels$a,
-	buttons: buttons$4,
+	labels: labels$c,
+	buttons: buttons$6,
 	messages: messages$c
 };
 
-var title$7 = "Reset your password";
+var title$9 = "Reset your password";
 var subtitle$3 = "Enter a new password below";
 var email$3 = "Email";
 var password$3 = "Password";
@@ -4063,7 +4079,7 @@ var submit$5 = "Submit";
 var required$5 = "Required";
 var passwordUpdated$1 = "Password has been updated, please login with the new password";
 var passwordReset_en = {
-	title: title$7,
+	title: title$9,
 	subtitle: subtitle$3,
 	email: email$3,
 	password: password$3,
@@ -4073,7 +4089,7 @@ var passwordReset_en = {
 	passwordUpdated: passwordUpdated$1
 };
 
-var title$6 = "Réinitialiser votre mot de passe";
+var title$8 = "Réinitialiser votre mot de passe";
 var subtitle$2 = "Entrez un nouveau mot de passe ci-dessous";
 var email$2 = "Adresse courriel";
 var password$2 = "Mot de passe";
@@ -4082,7 +4098,7 @@ var submit$4 = "Soumettre";
 var required$4 = "Champs obligatoires";
 var passwordUpdated = "Votre mot de passe a été mis à jour, veuillez vous connecter avec celui-ci";
 var passwordReset_fr = {
-	title: title$6,
+	title: title$8,
 	subtitle: subtitle$2,
 	email: email$2,
 	password: password$2,
@@ -4092,7 +4108,7 @@ var passwordReset_fr = {
 	passwordUpdated: passwordUpdated
 };
 
-var title$5 = "Forgot your password?";
+var title$7 = "Forgot your password?";
 var email$1 = "Email";
 var password$1 = "Password";
 var submit$3 = "Submit";
@@ -4103,7 +4119,7 @@ var messages$b = {
 	loginHere: "login here."
 };
 var passwordForgot_en = {
-	title: title$5,
+	title: title$7,
 	email: email$1,
 	password: password$1,
 	submit: submit$3,
@@ -4112,7 +4128,7 @@ var passwordForgot_en = {
 	messages: messages$b
 };
 
-var title$4 = "Mot de passe oublié ?";
+var title$6 = "Mot de passe oublié ?";
 var email = "Courriel";
 var password = "Mot de passe";
 var submit$2 = "Soumettre";
@@ -4123,7 +4139,7 @@ var messages$a = {
 	loginHere: "Connectez-vous ici"
 };
 var passwordForgot_fr = {
-	title: title$4,
+	title: title$6,
 	email: email,
 	password: password,
 	submit: submit$2,
@@ -4132,7 +4148,7 @@ var passwordForgot_fr = {
 	messages: messages$a
 };
 
-var title$3 = "Change your password";
+var title$5 = "Change your password";
 var currentPassword$1 = "Current password";
 var newPassword$1 = "New password";
 var confirmNewPassword$1 = "Confirm new password";
@@ -4142,7 +4158,7 @@ var passwordChanged$1 = "Password has been changed, please login with the new pa
 var passwordsNotMatching$1 = "Passwords don't match";
 var weakPassword$1 = "Your password must contain at least 6 characters";
 var passwordChange_en = {
-	title: title$3,
+	title: title$5,
 	currentPassword: currentPassword$1,
 	newPassword: newPassword$1,
 	confirmNewPassword: confirmNewPassword$1,
@@ -4153,7 +4169,7 @@ var passwordChange_en = {
 	weakPassword: weakPassword$1
 };
 
-var title$2 = "Changez votre mot de passe";
+var title$4 = "Changez votre mot de passe";
 var currentPassword = "Mot de passe actuel";
 var newPassword = "Nouveau mot de passe";
 var confirmNewPassword = "Confirmer le nouveau mot de passe";
@@ -4163,7 +4179,7 @@ var passwordChanged = "Le mot de passe a été modifié, veuillez vous connecter
 var passwordsNotMatching = "Les mots de passe ne correspondent pas";
 var weakPassword = "Votre mot de passe doit contenir au moins 6";
 var passwordChange_fr = {
-	title: title$2,
+	title: title$4,
 	currentPassword: currentPassword,
 	newPassword: newPassword,
 	confirmNewPassword: confirmNewPassword,
@@ -4174,7 +4190,7 @@ var passwordChange_fr = {
 	weakPassword: weakPassword
 };
 
-var title$1 = "Votre panier";
+var title$3 = "Votre panier";
 var subtitle$1 = "Terminez votre achat ci-dessous";
 var name$1 = "Produit";
 var quantity$1 = "Quantité";
@@ -4186,7 +4202,7 @@ var confirm$3 = "Passer à la caisse";
 var empty$1 = "Votre panier est vide.";
 var removeAll$1 = "Vider";
 var cart_fr = {
-	title: title$1,
+	title: title$3,
 	subtitle: subtitle$1,
 	name: name$1,
 	quantity: quantity$1,
@@ -4199,7 +4215,7 @@ var cart_fr = {
 	removeAll: removeAll$1
 };
 
-var title = "Your shopping cart";
+var title$2 = "Your shopping cart";
 var subtitle = "Comple your purchase below";
 var name = "Name";
 var quantity = "Quantity";
@@ -4211,7 +4227,7 @@ var confirm$2 = "Checkout";
 var empty = "Your cart is empty.";
 var removeAll = "Remove all";
 var cart_en = {
-	title: title,
+	title: title$2,
 	subtitle: subtitle,
 	name: name,
 	quantity: quantity,
@@ -4224,7 +4240,7 @@ var cart_en = {
 	removeAll: removeAll
 };
 
-var buttons$3 = {
+var buttons$5 = {
 	select: "Select",
 	added: "Added to cart",
 	purchase: "Purchase",
@@ -4239,17 +4255,17 @@ var messages$9 = {
 	multipleCurrencies: "Your cart currently contains items which are available in different currencies. In order to proceed with the checkout, please make sure that all items have the same currency.",
 	currencyMismatch: "The selected item(s) do not match your current default currency ({{currency}}). Please choose item(s) only matching this currency."
 };
-var labels$9 = {
+var labels$b = {
 	summary: "Order summary",
 	total: "total"
 };
 var shop_en = {
-	buttons: buttons$3,
+	buttons: buttons$5,
 	messages: messages$9,
-	labels: labels$9
+	labels: labels$b
 };
 
-var buttons$2 = {
+var buttons$4 = {
 	select: "Choisir",
 	added: "Ajouté au panier",
 	purchase: "Acheter",
@@ -4264,17 +4280,17 @@ var messages$8 = {
 	multipleCurrencies: "Votre panier contient des articles disponibles dans différentes devises. Avant de passer à la caisse, veuillez vous assurer que tous les articles ont la même devise.",
 	currencyMismatch: "Les articles sélectionnés ne sont pas compatibles avec la devise associée à votre compte ({{currency}}). Veuillez choisir des articles uniquement offerts dans cette devise."
 };
-var labels$8 = {
+var labels$a = {
 	summary: "récapitulatif de commande",
 	total: "total"
 };
 var shop_fr = {
-	buttons: buttons$2,
+	buttons: buttons$4,
 	messages: messages$8,
-	labels: labels$8
+	labels: labels$a
 };
 
-var labels$7 = {
+var labels$9 = {
 	cardNumber: "Numéro de carte",
 	securityCode: "Code de sécurité",
 	submit: "Soumettre",
@@ -4309,12 +4325,12 @@ var errors$1 = {
 	"": ""
 };
 var payment_fr = {
-	labels: labels$7,
+	labels: labels$9,
 	messages: messages$7,
 	errors: errors$1
 };
 
-var labels$6 = {
+var labels$8 = {
 	cardNumber: "Card number",
 	securityCode: "Security Code",
 	submit: "Submit",
@@ -4349,12 +4365,12 @@ var errors = {
 	"": ""
 };
 var payment_en = {
-	labels: labels$6,
+	labels: labels$8,
 	messages: messages$6,
 	errors: errors
 };
 
-var labels$5 = {
+var labels$7 = {
 	menu: "Pelcro Menu",
 	name: "Name",
 	email: "Email",
@@ -4379,6 +4395,16 @@ var labels$5 = {
 	purchases: "Purchases",
 	subscriptions: "Subscriptions",
 	donations: "Donations",
+	invoices: "Invoices",
+	details: "Details",
+	view: "View",
+	paid: "Paid",
+	open: "Open",
+	draft: "Draft",
+	scheduled: "Scheduled",
+	uncollectible: "Uncollectible",
+	"void": "Void",
+	pastDue: "Past due",
 	updatePaymentSource: "Update",
 	profile: "Profile",
 	updateProfile: "Edit profile",
@@ -4431,11 +4457,11 @@ var messages$5 = {
 	}
 };
 var dashboard_en = {
-	labels: labels$5,
+	labels: labels$7,
 	messages: messages$5
 };
 
-var labels$4 = {
+var labels$6 = {
 	menu: "Menu Pelcro",
 	name: "Nom",
 	email: "Courriel",
@@ -4460,6 +4486,16 @@ var labels$4 = {
 	purchases: "Achats",
 	subscriptions: "Abonnements",
 	donations: "Des dons",
+	invoices: "Invoices",
+	details: "Details",
+	view: "View",
+	paid: "Paid",
+	open: "open",
+	draft: "Draft",
+	scheduled: "Scheduled",
+	uncollectible: "Uncollectible",
+	"void": "Void",
+	pastDue: "Past due",
 	updatePaymentSource: "Mettre à jour la source de paiement",
 	profile: "Profil",
 	updateProfile: "Mettre à jour le profil",
@@ -4512,7 +4548,7 @@ var messages$4 = {
 	}
 };
 var dashboard_fr = {
-	labels: labels$4,
+	labels: labels$6,
 	messages: messages$4
 };
 
@@ -4521,7 +4557,7 @@ var messages$3 = {
 	loginHere: "Login here",
 	checkbox: "Check this box to gift this subscription"
 };
-var labels$3 = {
+var labels$5 = {
 	plan: {
 		title: "Subscribe to a plan",
 		subtitle: "Select one of the plans below and click on next."
@@ -4538,15 +4574,15 @@ var labels$3 = {
 		or: "Or take a look at some of our other options below"
 	}
 };
-var buttons$1 = {
+var buttons$3 = {
 	next: "Next",
 	select: "Select",
 	back: "Back"
 };
 var select_en = {
 	messages: messages$3,
-	labels: labels$3,
-	buttons: buttons$1
+	labels: labels$5,
+	buttons: buttons$3
 };
 
 var messages$2 = {
@@ -4554,7 +4590,7 @@ var messages$2 = {
 	loginHere: "Connectez-vous ici",
 	checkbox: "Cochez cette case pour offrir cet abonnement"
 };
-var labels$2 = {
+var labels$4 = {
 	plan: {
 		title: "Abonnez-vous à un plan",
 		subtitle: "Sélectionnez l’un des plans ci-dessous et cliquez sur suivant."
@@ -4571,15 +4607,15 @@ var labels$2 = {
 		or: "Sinon, jetez un coup d'oeil à d'autres offres ci-dessous"
 	}
 };
-var buttons = {
+var buttons$2 = {
 	next: "Prochain",
 	select: "Choisir",
 	back: "Retour"
 };
 var select_fr = {
 	messages: messages$2,
-	labels: labels$2,
-	buttons: buttons
+	labels: labels$4,
+	buttons: buttons$2
 };
 
 var confirm$1 = {
@@ -4602,7 +4638,7 @@ var notification_fr = {
 	confirm: confirm
 };
 
-var labels$1 = {
+var labels$3 = {
 	title: "Verify your email",
 	instructions: "You're on your way!\nLet's confirm your email address.\nClick on the verification link we've sent to your email:",
 	resend: "Resend email"
@@ -4612,24 +4648,60 @@ var messages$1 = {
 	success: "Email verified successfully!"
 };
 var verifyEmail_en = {
-	labels: labels$1,
+	labels: labels$3,
 	messages: messages$1
 };
 
-var labels = {
-	title: "Vérifiez votre e-mail",
-	instructions: "Vous êtes en route!\nConfirmons votre adresse e-mail.\nCliquez sur le lien de vérification que nous vous avons envoyé par e-mail:",
-	resend: "Ré-envoyer l'email"
+var labels$2 = {
+	title: "Confirmez votre courriel",
+	instructions: "Confirmez votre courriel.\nVeuillez cliquer sur le lien de vérification, qui vous a été envoyé à:",
+	resend: "Renvoyer le courriel"
 };
 var messages = {
 	resent: "Renvoyé avec succès",
-	success: "Email vérifié avec succès!"
+	success: "Adresse courriel vérifiée avec succès"
 };
 var verifyEmail_fr = {
-	labels: labels,
+	labels: labels$2,
 	messages: messages
 };
 
+var title$1 = "Invoice details";
+var labels$1 = {
+	summary: "Summary",
+	total: "Total",
+	amountPaid: "Amount paid",
+	amountDue: "Amount due",
+	creationDate: "Created on:"
+};
+var buttons$1 = {
+	download: "Download",
+	pay: "Pay now"
+};
+var invoiceDetails_en = {
+	title: title$1,
+	labels: labels$1,
+	buttons: buttons$1
+};
+
+var title = "Invoice details";
+var labels = {
+	summary: "Summary",
+	total: "Total",
+	amountPaid: "Amount paid",
+	amountDue: "Amount due",
+	creationDate: "Created on:"
+};
+var buttons = {
+	download: "Download",
+	pay: "Pay now"
+};
+var invoiceDetails_fr = {
+	title: title,
+	labels: labels,
+	buttons: buttons
+};
+
 function create$1(createState) {
   let state;
   const listeners = new Set();
@@ -5979,7 +6051,7 @@ class PelcroActions {
         view,
         cartItems,
         ...otherStateFields
-      } = initialState$h;
+      } = initialState$i;
       this.set(otherStateFields);
     });
 
@@ -6023,10 +6095,11 @@ class PelcroActions {
         resetView,
         switchToCheckoutForm,
         product,
-        order
+        order,
+        invoice
       } = this.get();
 
-      if (product || order) {
+      if (product || order || invoice) {
         // direct user to stripe checkout form when there are no existing cards
         if (!userHasPaymentMethod()) {
           return switchToCheckoutForm();
@@ -6043,7 +6116,8 @@ class PelcroActions {
         switchView,
         product,
         subscriptionIdToRenew,
-        order
+        order,
+        invoice
       } = this.get();
 
       if (product && subscriptionIdToRenew) {
@@ -6057,6 +6131,10 @@ class PelcroActions {
       if (order) {
         return switchView("order-create");
       }
+
+      if (invoice) {
+        return switchView("invoice-payment");
+      }
     });
 
     _defineProperty$3(this, "switchToAddressView", () => {
@@ -6087,6 +6165,23 @@ class PelcroActions {
       });
     });
 
+    _defineProperty$3(this, "setInvoice", id => {
+      var _window$Pelcro$invoic;
+
+      const invoices = (_window$Pelcro$invoic = window.Pelcro.invoice.list()) !== null && _window$Pelcro$invoic !== void 0 ? _window$Pelcro$invoic : [];
+      const invoice = invoices.find(inv => String(inv.id) === String(id));
+
+      if (!invoice) {
+        console.error("invalid invoice id");
+        return false;
+      }
+
+      this.set({
+        invoice
+      });
+      return true;
+    });
+
     _defineProperty$3(this, "logout", () => {
       var _ReactGA$event;
 
@@ -6275,7 +6370,7 @@ class PelcroCallbacks {
 
 }
 
-const initialState$h = {
+const initialState$i = {
   // View
   view: null,
   // Plans
@@ -6290,6 +6385,8 @@ const initialState$h = {
   cartItems: [],
   order: null,
   // null | SKU[] | SKU,
+  // invoices
+  invoice: null,
   // User
   isAuthenticated: () => window.Pelcro.user.isAuthenticated(),
   selectedPaymentMethodId: null,
@@ -6303,7 +6400,7 @@ const createPelcroStore = () => createStore(middleware_3((set, get) => {
   return {
     // Store setter
     set,
-    ...initialState$h,
+    ...initialState$i,
     // State actions
     ...actions,
     // Callbacks
@@ -6454,7 +6551,7 @@ const calcAndFormatItemsTotal = (items, currency) => {
  */
 
 const isValidViewFromURL = viewID => {
-  if (["login", "register", "plan-select", "gift-redeem", "password-forgot", "password-reset", "password-change", "payment-method-update", "user-edit", "newsletter", "address-create", "order-create", "cart", "email-verify"].includes(viewID) || hasValidNewsletterUpdateUrl()) {
+  if (["login", "register", "plan-select", "gift-redeem", "password-forgot", "password-reset", "password-change", "payment-method-update", "user-edit", "newsletter", "address-create", "order-create", "cart", "email-verify", "invoice-details"].includes(viewID) || hasValidNewsletterUpdateUrl()) {
     return true;
   }
 
@@ -6681,7 +6778,8 @@ const resources = {
     payment: payment_en,
     dashboard: dashboard_en,
     select: select_en,
-    notification: notification_en
+    notification: notification_en,
+    invoiceDetails: invoiceDetails_en
   },
   fr: {
     common: common_fr,
@@ -6704,7 +6802,8 @@ const resources = {
     payment: payment_fr,
     dashboard: dashboard_fr,
     select: select_fr,
-    notification: notification_fr
+    notification: notification_fr,
+    invoiceDetails: invoiceDetails_fr
   }
 }; // set UI language to the page language or default to the language in site settings
 
@@ -6995,8 +7094,8 @@ const saveToMetadataButton = new SaveToMetadataButtonClass();
 
 let e={data:""},t=t=>"undefined"!=typeof window?((t?t.querySelector("#_goober"):window._goober)||Object.assign((t||document.head).appendChild(document.createElement("style")),{innerHTML:" ",id:"_goober"})).firstChild:t||e,l=/(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(})/g,a=/\/\*[^]*?\*\/|\s\s+|\n/g,n=(e,t)=>{let r,l="",a="",o="";for(let c in e){let s=e[c];"object"==typeof s?(r=t?t.replace(/([^,])+/g,e=>c.replace(/([^,])+/g,t=>/&/.test(t)?t.replace(/&/g,e):e?e+" "+t:t)):c,a+="@"==c[0]?"f"==c[1]?n(s,c):c+"{"+n(s,"k"==c[1]?"":t)+"}":n(s,r)):"@"==c[0]&&"i"==c[1]?l=c+" "+s+";":(c=c.replace(/[A-Z]/g,"-$&").toLowerCase(),o+=n.p?n.p(c,s):c+":"+s+";");}return o[0]?(r=t?t+"{"+o+"}":o,l+r+a):l+a},o={},c=e=>{let t="";for(let r in e)t+=r+("object"==typeof e[r]?c(e[r]):e[r]);return t},s=(e,t,r,s,i)=>{let p="object"==typeof e?c(e):e,u=o[p]||(o[p]=(e=>{let t=0,r=11;for(;t<e.length;)r=101*r+e.charCodeAt(t++)>>>0;return "go"+r})(p));if(!o[u]){let t="object"==typeof e?e:(e=>{let t,r=[{}];for(;t=l.exec(e.replace(a,""));)t[4]&&r.shift(),t[3]?r.unshift(r[0][t[3]]=r[0][t[3]]||{}):t[4]||(r[0][t[1]]=t[2]);return r[0]})(e);o[u]=n(i?{["@keyframes "+u]:t}:t,r?"":"."+u);}return ((e,t,r)=>{-1==t.data.indexOf(e)&&(t.data=r?e+t.data:t.data+e);})(o[u],t,s),u},i=(e,t,r)=>e.reduce((e,l,a)=>{let o=t[a];if(o&&o.call){let e=o(r),t=e&&e.props&&e.props.className||/^go/.test(e)&&e;o=t?"."+t:e&&"object"==typeof e?e.props?"":n(e,""):e;}return e+l+(null==o?"":o)},"");function p(e){let r=this||{},l=e.call?e(r.p):e;return s(l.unshift?l.raw?i(l,[].slice.call(arguments,1),r.p):l.reduce((e,t)=>t?Object.assign(e,t.call?t(r.p):t):e,{}):l,t(r.target),r.g,r.o,r.k)}let u,f,d;p.bind({g:1});let b=p.bind({k:1});function h(e,t,r,l){n.p=t,u=e,f=r,d=l;}function y(e,t){let r=this||{};return function(){let l=arguments;function a(n,o){let c=Object.assign({},n),s=c.className||a.className;r.p=Object.assign({theme:f&&f()},c),r.o=/ *go\d+/.test(s),c.className=p.apply(r,l)+(s?" "+s:""),t&&(c.ref=o);let i=c.as||e;return d&&i[0]&&d(c),u(i,c)}return t?t(a):a}}
 
-function _extends$y() {
-  _extends$y = Object.assign || function (target) {
+function _extends$z() {
+  _extends$z = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -7010,7 +7109,7 @@ function _extends$y() {
     return target;
   };
 
-  return _extends$y.apply(this, arguments);
+  return _extends$z.apply(this, arguments);
 }
 
 function _taggedTemplateLiteralLoose(strings, raw) {
@@ -7100,7 +7199,7 @@ var clearFromRemoveQueue = function clearFromRemoveQueue(toastId) {
 var reducer = function reducer(state, action) {
   switch (action.type) {
     case ActionType.ADD_TOAST:
-      return _extends$y({}, state, {
+      return _extends$z({}, state, {
         toasts: [action.toast].concat(state.toasts).slice(0, TOAST_LIMIT)
       });
 
@@ -7110,9 +7209,9 @@ var reducer = function reducer(state, action) {
         clearFromRemoveQueue(action.toast.id);
       }
 
-      return _extends$y({}, state, {
+      return _extends$z({}, state, {
         toasts: state.toasts.map(function (t) {
-          return t.id === action.toast.id ? _extends$y({}, t, action.toast) : t;
+          return t.id === action.toast.id ? _extends$z({}, t, action.toast) : t;
         })
       });
 
@@ -7139,9 +7238,9 @@ var reducer = function reducer(state, action) {
         });
       }
 
-      return _extends$y({}, state, {
+      return _extends$z({}, state, {
         toasts: state.toasts.map(function (t) {
-          return t.id === toastId || toastId === undefined ? _extends$y({}, t, {
+          return t.id === toastId || toastId === undefined ? _extends$z({}, t, {
             visible: false
           }) : t;
         })
@@ -7149,28 +7248,28 @@ var reducer = function reducer(state, action) {
 
     case ActionType.REMOVE_TOAST:
       if (action.toastId === undefined) {
-        return _extends$y({}, state, {
+        return _extends$z({}, state, {
           toasts: []
         });
       }
 
-      return _extends$y({}, state, {
+      return _extends$z({}, state, {
         toasts: state.toasts.filter(function (t) {
           return t.id !== action.toastId;
         })
       });
 
     case ActionType.START_PAUSE:
-      return _extends$y({}, state, {
+      return _extends$z({}, state, {
         pausedAt: action.time
       });
 
     case ActionType.END_PAUSE:
       var diff = action.time - (state.pausedAt || 0);
-      return _extends$y({}, state, {
+      return _extends$z({}, state, {
         pausedAt: undefined,
         toasts: state.toasts.map(function (t) {
-          return _extends$y({}, t, {
+          return _extends$z({}, t, {
             pauseDuration: t.pauseDuration + diff
           });
         })
@@ -7217,12 +7316,12 @@ var useStore = function useStore(toastOptions) {
   var mergedToasts = state.toasts.map(function (t) {
     var _toastOptions$t$type, _toastOptions, _toastOptions$t$type2;
 
-    return _extends$y({}, toastOptions, toastOptions[t.type], t, {
+    return _extends$z({}, toastOptions, toastOptions[t.type], t, {
       duration: t.duration || ((_toastOptions$t$type = toastOptions[t.type]) == null ? void 0 : _toastOptions$t$type.duration) || ((_toastOptions = toastOptions) == null ? void 0 : _toastOptions.duration) || defaultTimeouts[t.type],
-      style: _extends$y({}, toastOptions.style, (_toastOptions$t$type2 = toastOptions[t.type]) == null ? void 0 : _toastOptions$t$type2.style, t.style)
+      style: _extends$z({}, toastOptions.style, (_toastOptions$t$type2 = toastOptions[t.type]) == null ? void 0 : _toastOptions$t$type2.style, t.style)
     });
   });
-  return _extends$y({}, state, {
+  return _extends$z({}, state, {
     toasts: mergedToasts
   });
 };
@@ -7232,7 +7331,7 @@ var createToast = function createToast(message, type, opts) {
     type = 'blank';
   }
 
-  return _extends$y({
+  return _extends$z({
     createdAt: Date.now(),
     visible: true,
     type: type,
@@ -7282,14 +7381,14 @@ toast.remove = function (toastId) {
 };
 
 toast.promise = function (promise, msgs, opts) {
-  var id = toast.loading(msgs.loading, _extends$y({}, opts, opts == null ? void 0 : opts.loading));
+  var id = toast.loading(msgs.loading, _extends$z({}, opts, opts == null ? void 0 : opts.loading));
   promise.then(function (p) {
-    toast.success(resolveValue(msgs.success, p), _extends$y({
+    toast.success(resolveValue(msgs.success, p), _extends$z({
       id: id
     }, opts, opts == null ? void 0 : opts.success));
     return p;
   })["catch"](function (e) {
-    toast.error(resolveValue(msgs.error, e), _extends$y({
+    toast.error(resolveValue(msgs.error, e), _extends$z({
       id: id
     }, opts, opts == null ? void 0 : opts.error));
   });
@@ -7628,7 +7727,7 @@ var ToastBar = /*#__PURE__*/React.memo(function (_ref2) {
   var message = React.createElement(Message, Object.assign({}, toast.ariaProps), resolveValue(toast.message, toast));
   return React.createElement(ToastBarBase, {
     className: toast.className,
-    style: _extends$y({}, animationStyle, style, toast.style)
+    style: _extends$z({}, animationStyle, style, toast.style)
   }, typeof children === 'function' ? children({
     icon: icon,
     message: message
@@ -7658,7 +7757,7 @@ var getPositionStyle = function getPositionStyle(position, offset) {
   } : position.includes('right') ? {
     justifyContent: 'flex-end'
   } : {};
-  return _extends$y({
+  return _extends$z({
     left: 0,
     right: 0,
     display: 'flex',
@@ -7685,7 +7784,7 @@ var Toaster = function Toaster(_ref) {
       handlers = _useToaster.handlers;
 
   return React.createElement("div", {
-    style: _extends$y({
+    style: _extends$z({
       position: 'fixed',
       zIndex: 9999,
       top: DEFAULT_OFFSET,
@@ -7720,82 +7819,82 @@ var Toaster = function Toaster(_ref) {
   }));
 };
 
-var _path$v;
+var _path$w;
 
-function _extends$x() { _extends$x = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$x.apply(this, arguments); }
+function _extends$y() { _extends$y = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$y.apply(this, arguments); }
 
 function SvgCheckSolid(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$x({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$y({
     xmlns: "http://www.w3.org/2000/svg",
     className: "h-5 w-5",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$v || (_path$v = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$w || (_path$w = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
     clipRule: "evenodd"
   })));
 }
 
-var _path$u;
+var _path$v;
 
-function _extends$w() { _extends$w = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$w.apply(this, arguments); }
+function _extends$x() { _extends$x = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$x.apply(this, arguments); }
 
 function SvgXIcon(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$x({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$u || (_path$u = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$v || (_path$v = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "evenodd",
     d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
     clipRule: "evenodd"
   })));
 }
 
-var _path$t;
+var _path$u;
 
-function _extends$v() { _extends$v = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$v.apply(this, arguments); }
+function _extends$w() { _extends$w = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$w.apply(this, arguments); }
 
 function SvgXIconSolid(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$w({
     className: "plc-w-4 plc-h-4",
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 100 100"
-  }, props), _path$t || (_path$t = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$u || (_path$u = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M94.842 48.408c0 24.852-20.148 44.999-45.002 44.999-24.851 0-44.997-20.146-44.997-44.999 0-24.854 20.146-45 44.997-45 24.853 0 45.002 20.146 45.002 45zM71.073 64.841L54.73 48.497l16.344-16.344-4.979-4.979-16.343 16.345-16.343-16.344-4.799 4.799 16.344 16.344L28.61 64.661l4.979 4.978 16.344-16.344 16.343 16.344 4.797-4.798z"
   })));
 }
 
-var _path$s;
+var _path$t;
 
-function _extends$u() { _extends$u = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$u.apply(this, arguments); }
+function _extends$v() { _extends$v = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$v.apply(this, arguments); }
 
 function SvgExclamation(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
     className: "plc-w-4 plc-h-4 plc-mr-1",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$s || (_path$s = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$t || (_path$t = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z",
     clipRule: "evenodd"
   })));
 }
 
-var _path$r, _path2$4;
+var _path$s, _path2$4;
 
-function _extends$t() { _extends$t = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$t.apply(this, arguments); }
+function _extends$u() { _extends$u = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$u.apply(this, arguments); }
 
 function SvgSpinner(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
     className: "plc-animate-spin",
     viewBox: "0 0 24 24",
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$r || (_path$r = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$s || (_path$s = /*#__PURE__*/React__namespace.createElement("path", {
     opacity: 0.2,
     fill: "evenodd",
     clipRule: "evenodd",
@@ -8530,6 +8629,7 @@ var pure_1 = pure.loadStripe;
  * @param {Object} error Error object
  * @return {string}
  */
+
 const getErrorMessages = error => {
   var _error$error, _error$response, _error$response$data, _error$response3, _error$response3$data, _error$response3$data2, _error$response5, _error$response5$data;
 
@@ -8584,6 +8684,20 @@ const debounce = (func, waitTime) => {
     timeout = setTimeout(later, waitTime);
   };
 };
+function getSiteCardProcessor() {
+  var _window$Pelcro$site$r;
+
+  const {
+    view
+  } = usePelcro.getStore();
+  const temp_ONLY_USE_VANTIV_WITH_SUBSCRIPTION_CREATE = view === "subscription-create";
+
+  if (temp_ONLY_USE_VANTIV_WITH_SUBSCRIPTION_CREATE && (_window$Pelcro$site$r = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r !== void 0 && _window$Pelcro$site$r.vantiv_pay_page_id) {
+    return "vantiv";
+  }
+
+  return "stripe";
+}
 
 /**
  * @typedef {Object} OptionsType
@@ -8664,13 +8778,26 @@ const loadPaymentSDKs = () => {
     if (!window.Stripe) {
       pure_1(window.Pelcro.environment.stripe);
     }
-  }); // Load PayPal SDK's
+  }); // Load PayPal SDKs
 
   const supportsPaypal = Boolean(window.Pelcro.site.read().braintree_tokenization);
 
   if (supportsPaypal) {
     window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/3.69.0/js/client.min.js", "braintree-sdk");
     window.Pelcro.helpers.loadSDK("https://js.braintreegateway.com/web/3.69.0/js/paypal-checkout.min.js", "braintree-paypal-sdk");
+  } // Load Vantiv SDKs
+
+
+  const supportsVantiv = Boolean(window.Pelcro.site.read().vantiv_pay_page_id);
+
+  if (supportsVantiv) {
+    if (!window.jQuery) {
+      window.Pelcro.helpers.loadSDK("https://code.jquery.com/jquery-3.6.0.slim.min.js", "vantiv-jquery-sdk");
+    }
+
+    if (!window.EprotectIframeClient) {
+      window.Pelcro.helpers.loadSDK("https://request.eprotect.vantivprelive.com/eProtect/js/eProtect-iframe-client.min.js", "vantiv-eprotect-sdk");
+    }
   }
 };
 const loadAuth0SDK = () => {
@@ -8829,6 +8956,10 @@ const initViewFromURL = () => {
         return verifyEmailTokenFromUrl();
       }
 
+      if (view === "invoice-details") {
+        return showInvoiceDetailsFromUrl();
+      }
+
       switchView(view);
     });
   }
@@ -9005,6 +9136,43 @@ const verifyEmailTokenFromUrl = () => {
   });
 };
 
+const showInvoiceDetailsFromUrl = () => {
+  const {
+    isAuthenticated,
+    setInvoice,
+    whenSiteReady,
+    switchView
+  } = usePelcro.getStore();
+  whenSiteReady(() => {
+    if (!isAuthenticated()) {
+      return switchView("login");
+    }
+
+    const invoiceId = window.Pelcro.helpers.getURLParameter("id");
+    const wasSetSuccessfully = setInvoice(invoiceId);
+
+    if (!wasSetSuccessfully) {
+      const errorMessage = i18next.t("messages:invalidInvoice", {
+        returnObjects: true
+      });
+      return notify.error(errorMessage);
+    }
+
+    const {
+      invoice
+    } = usePelcro.getStore();
+
+    if (invoice.total === 0) {
+      const errorMessage = i18next.t("messages:zeroTotalInvoice", {
+        returnObjects: true
+      });
+      return notify.error(errorMessage);
+    }
+
+    return switchView("invoice-details");
+  });
+};
+
 const defaultOptions = {
   loadPaymentSDKs: true,
   loadAuth0SDK: true,
@@ -9344,7 +9512,7 @@ const GET_NEWSLETTERS_FETCH = "GET_NEWSLETTERS_FETCH";
 const GET_NEWSLETTERS_SUCCESS = "GET_NEWSLETTERS_SUCCESS";
 const SWITCH_TO_UPDATE = "SWITCH_TO_UPDATE";
 
-const initialState$g = {
+const initialState$h = {
   email: "",
   password: "",
   emailError: null,
@@ -9355,10 +9523,10 @@ const initialState$g = {
     content: ""
   }
 };
-const store$g = /*#__PURE__*/React.createContext(initialState$g);
+const store$h = /*#__PURE__*/React.createContext(initialState$h);
 const {
-  Provider: Provider$g
-} = store$g;
+  Provider: Provider$h
+} = store$h;
 
 const LoginContainer = ({
   style,
@@ -9465,7 +9633,7 @@ const LoginContainer = ({
         });
 
       case RESET_LOGIN_FORM:
-        return initialState$g;
+        return initialState$h;
 
       case DISABLE_LOGIN_BUTTON:
         return lib_7({ ...state,
@@ -9483,12 +9651,12 @@ const LoginContainer = ({
       default:
         return state;
     }
-  }, initialState$g);
+  }, initialState$h);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-login-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$g, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$h, {
     value: {
       state,
       dispatch
@@ -9496,12 +9664,12 @@ const LoginContainer = ({
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default['default'].cloneElement(child, {
-        store: store$g,
+        store: store$h,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$g
+    store: store$h
   })));
 };
 
@@ -9746,7 +9914,7 @@ const LoginButton = ({
       buttonDisabled
     },
     dispatch
-  } = React.useContext(store$g);
+  } = React.useContext(store$h);
   const {
     t
   } = useTranslation("login");
@@ -9767,23 +9935,23 @@ const LoginButton = ({
 };
 
 const LoginEmail = props => /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
-  store: store$g
+  store: store$h
 }, props));
 
 const LoginPassword = props => /*#__PURE__*/React__default['default'].createElement(Password, Object.assign({
-  store: store$g
+  store: store$h
 }, props));
 
-var _path$q;
+var _path$r;
 
-function _extends$s() { _extends$s = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); }
+function _extends$t() { _extends$t = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$t.apply(this, arguments); }
 
 function SvgCheck(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "currentColor",
     viewBox: "0 0 20 20"
-  }, props), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$r || (_path$r = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
     clipRule: "evenodd"
@@ -9848,7 +10016,7 @@ var facebookLoginRenderProps = createCommonjsModule(function (module, exports) {
 var FacebookLogin = unwrapExports(facebookLoginRenderProps);
 facebookLoginRenderProps.FacebookLogin;
 
-const initialState$f = {
+const initialState$g = {
   email: "",
   password: "",
   emailError: null,
@@ -9865,10 +10033,10 @@ const initialState$f = {
     content: ""
   }
 };
-const store$f = /*#__PURE__*/React.createContext(initialState$f);
+const store$g = /*#__PURE__*/React.createContext(initialState$g);
 const {
-  Provider: Provider$f
-} = store$f;
+  Provider: Provider$g
+} = store$g;
 
 const RegisterContainer = ({
   style,
@@ -10051,7 +10219,7 @@ const RegisterContainer = ({
         });
 
       case RESET_LOGIN_FORM:
-        return initialState$f;
+        return initialState$g;
 
       case DISABLE_REGISTRATION_BUTTON:
         return lib_7({ ...state,
@@ -10069,12 +10237,12 @@ const RegisterContainer = ({
       default:
         return state;
     }
-  }, initialState$f);
+  }, initialState$g);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-register-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$f, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$g, {
     value: {
       state,
       dispatch
@@ -10082,12 +10250,12 @@ const RegisterContainer = ({
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default['default'].cloneElement(child, {
-        store: store$f,
+        store: store$g,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$f
+    store: store$g
   })));
 };
 /**
@@ -10102,15 +10270,15 @@ function hasSecurityTokenEnabled$1() {
   return hasSecuritySdkLoaded;
 }
 
-var _path$p;
+var _path$q;
 
-function _extends$r() { _extends$r = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
+function _extends$s() { _extends$s = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); }
 
 function SvgFacebookLogo(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "88.428 12.828 107.543 207.085"
-  }, props), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M158.232 219.912v-94.461h31.707l4.747-36.813h-36.454V65.134c0-10.658 2.96-17.922 18.245-17.922l19.494-.009V14.278c-3.373-.447-14.944-1.449-28.406-1.449-28.106 0-47.348 17.155-47.348 48.661v27.149H88.428v36.813h31.788v94.461l38.016-.001z",
     fill: "#3c5a9a"
   })));
@@ -10127,10 +10295,10 @@ const FacebookLoginButton = ({
   const facebookLoginEnabled = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.facebook_app_id;
   const {
     dispatch: loginDispatch
-  } = React.useContext(store$g);
+  } = React.useContext(store$h);
   const {
     dispatch: registerDispatch
-  } = React.useContext(store$f);
+  } = React.useContext(store$g);
 
   const onSuccess = facebookUser => {
     loginDispatch === null || loginDispatch === void 0 ? void 0 : loginDispatch({
@@ -10183,15 +10351,15 @@ var googleLogin = createCommonjsModule(function (module, exports) {
 unwrapExports(googleLogin);
 var googleLogin_1 = googleLogin.GoogleLogin;
 
-var _path$o, _path2$3, _path3$1, _path4;
+var _path$p, _path2$3, _path3$1, _path4;
 
-function _extends$q() { _extends$q = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
+function _extends$r() { _extends$r = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
 
 function SvgGoogleLogo(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$p || (_path$p = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#4285F4",
     d: "M23.745 12.27c0-.79-.07-1.54-.19-2.27h-11.3v4.51h6.47c-.29 1.48-1.14 2.73-2.4 3.58v3h3.86c2.26-2.09 3.56-5.17 3.56-8.82z"
   })), _path2$3 || (_path2$3 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -10217,10 +10385,10 @@ const GoogleLoginButton = ({
   const googleLoginEnabled = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.google_app_id;
   const {
     dispatch: loginDispatch
-  } = React.useContext(store$g);
+  } = React.useContext(store$h);
   const {
     dispatch: registerDispatch
-  } = React.useContext(store$f);
+  } = React.useContext(store$g);
 
   const onSuccess = response => {
     var _response$getAuthResp, _profile$getEmail, _profile$getGivenName, _profile$getFamilyNam, _profile$getEmail2, _profile$getGivenName2, _profile$getFamilyNam2;
@@ -10268,15 +10436,15 @@ const GoogleLoginButton = ({
   }) : null;
 };
 
-var _path$n;
+var _path$o;
 
-function _extends$p() { _extends$p = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
+function _extends$q() { _extends$q = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
 
 function SvgAuth0Logo(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
     viewBox: "0 0 256 285",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M220.412 0h-92.415l28.562 89.006h92.416l-74.77 53.077 28.57 89.511c48.128-35.06 63.854-88.12 46.208-142.588L220.413 0zM7.018 89.006h92.416L127.997 0H35.589L7.019 89.006c-17.655 54.468-1.92 107.529 46.207 142.588l28.563-89.51-74.77-53.078zm46.208 142.588l74.77 52.97 74.77-52.97-74.77-53.847-74.77 53.847z"
   })));
 }
@@ -10288,26 +10456,43 @@ const Auth0LoginButton = ({
   iconClassName = ""
 }) => {
   const auth0Enabled = Boolean(window.Pelcro.site.read().auth0_client_id && window.Pelcro.site.read().auth0_base_url);
+  const auth0Script = document.querySelector("#auth0-sdk");
+  const [auth0Loaded, setAuth0Loaded] = React.useState(Boolean(window.auth0));
+  React__default['default'].useEffect(() => {
+    function handleScriptLoaded() {
+      setAuth0Loaded(true);
+    }
+
+    if (auth0Enabled && !auth0Loaded) {
+      auth0Script.addEventListener("load", handleScriptLoaded);
+    }
+
+    return () => {
+      var _auth0Script$removeEv;
+
+      auth0Script === null || auth0Script === void 0 ? void 0 : (_auth0Script$removeEv = auth0Script.removeEventListener) === null || _auth0Script$removeEv === void 0 ? void 0 : _auth0Script$removeEv.call(auth0Script, "load", handleScriptLoaded);
+    };
+  }, [auth0Script, auth0Enabled, auth0Loaded]);
   const auth0InstanceRef = React__default['default'].useRef(null);
   React__default['default'].useEffect(() => {
-    if (auth0Enabled && window.auth0 && auth0InstanceRef.current === null) {
+    if (auth0Enabled && auth0Loaded && auth0InstanceRef.current === null) {
       auth0InstanceRef.current = new window.auth0.WebAuth({
         domain: window.Pelcro.site.read().auth0_base_url,
         clientID: window.Pelcro.site.read().auth0_client_id
       });
     }
-  }, [auth0Enabled, window.auth0]);
+  }, [auth0Enabled, auth0Loaded]);
   const {
     dispatch: loginDispatch
-  } = React.useContext(store$g);
+  } = React.useContext(store$h);
   const {
     dispatch: registerDispatch
-  } = React.useContext(store$f);
+  } = React.useContext(store$g);
 
   function handleClick() {
     var _auth0InstanceRef$cur, _auth0InstanceRef$cur2, _auth0InstanceRef$cur3;
 
-    if (!window.auth0) {
+    if (!auth0Loaded) {
       return console.error("Auth0 sdk script wasn't loaded, you need to load auth0 sdk before rendering the Auth0LoginButton");
     }
 
@@ -10435,15 +10620,15 @@ function LoginView(props) {
   }, /*#__PURE__*/React__default['default'].createElement(GoogleLoginButton, null), /*#__PURE__*/React__default['default'].createElement(FacebookLoginButton, null), /*#__PURE__*/React__default['default'].createElement(Auth0LoginButton, null))))));
 }
 
-var _path$m, _path2$2, _path3;
+var _path$n, _path2$2, _path3;
 
-function _extends$o() { _extends$o = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); }
+function _extends$p() { _extends$p = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
 
 function SvgPelcroAuthorship(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 -80.652 497.072 179.991"
-  }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "none",
     stroke: "#4a4a4a",
     d: "M487.89 42.299c0 13.158-10.671 23.829-23.829 23.829H37.074c-13.162 0-23.832-10.671-23.832-23.829v-63.552c0-13.158 10.67-23.831 23.832-23.831H464.06c13.158 0 23.829 10.672 23.829 23.831l.001 63.552z"
@@ -10590,11 +10775,11 @@ function LoginModal({
 LoginModal.viewId = "login";
 
 const RegisterEmail = props => /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
-  store: store$f
+  store: store$g
 }, props));
 
 const RegisterPassword = props => /*#__PURE__*/React__default['default'].createElement(Password, Object.assign({
-  store: store$f
+  store: store$g
 }, props));
 
 const RegisterButton = ({
@@ -10614,7 +10799,7 @@ const RegisterButton = ({
       buttonDisabled
     },
     dispatch
-  } = React.useContext(store$f);
+  } = React.useContext(store$g);
   const {
     t
   } = useTranslation("register");
@@ -10752,7 +10937,7 @@ function FirstName({
 }
 
 const RegisterFirstName = props => /*#__PURE__*/React__default['default'].createElement(FirstName, Object.assign({
-  store: store$f
+  store: store$g
 }, props));
 
 function LastName({
@@ -10783,7 +10968,7 @@ function LastName({
 }
 
 const RegisterLastName = props => /*#__PURE__*/React__default['default'].createElement(LastName, Object.assign({
-  store: store$f
+  store: store$g
 }, props));
 
 /**
@@ -10907,7 +11092,7 @@ function TextInput({
 
 const RegisterTextInput = props => {
   return /*#__PURE__*/React__default['default'].createElement(TextInput, Object.assign({}, props, {
-    store: store$f
+    store: store$g
   }));
 };
 
@@ -12576,7 +12761,8 @@ const SUBSCRIPTION_TYPES = {
   CREATE_SUBSCRIPTION: "CREATE_SUBSCRIPTION",
   CREATE_GIFTED_SUBSCRIPTION: "CREATE_GIFTED_SUBSCRIPTION",
   RENEW_SUBSCRIPTION: "RENEW_SUBSCRIPTION",
-  RENEW_GIFTED_SUBSCRIPTION: "RENEW_GIFTED_SUBSCRIPTION"
+  RENEW_GIFTED_SUBSCRIPTION: "RENEW_GIFTED_SUBSCRIPTION",
+  PAY_INVOICE: "PAY_INVOICE"
 };
 
 var _isPaymentGatewayInvalid = /*#__PURE__*/new WeakMap();
@@ -12586,7 +12772,7 @@ var _generateUserError = /*#__PURE__*/new WeakMap();
 class Subscription {
   /**
    * Subscription service  constructor
-   * @param {(StripeGateway|PaypalGateWay)} paymentGateway
+   * @param {(StripeGateway|PaypalGateway|VantivGateway)} paymentGateway
    */
   constructor(paymentGateway) {
     _defineProperty$3(this, "execute", (options, callback) => {
@@ -12607,7 +12793,7 @@ class Subscription {
     _isPaymentGatewayInvalid.set(this, {
       writable: true,
       value: gateway => {
-        return gateway && !(gateway instanceof StripeGateway) && gateway && !(gateway instanceof PaypalGateWay);
+        return gateway && !(gateway instanceof StripeGateway || gateway instanceof PaypalGateway || gateway instanceof VantivGateway);
       }
     });
 
@@ -12638,6 +12824,8 @@ class Subscription {
    * @property {number} [subscriptionIdToRenew]
    * @property {number} [quantity]
    * @property {string} addressId
+   * @property {number} invoiceId
+   * @property {boolean} isExistingSource
    */
 
   /**
@@ -12658,7 +12846,8 @@ class Subscription {
 }
 const PAYMENT_GATEWAYS_ENUM = {
   stripe: "stripe",
-  paypal: "braintree"
+  paypal: "braintree",
+  vantiv: "vantiv"
 };
 /**
  * Subscription Strategies
@@ -12678,6 +12867,8 @@ var _renewSubscription = /*#__PURE__*/new WeakMap();
 
 var _renewGiftedSubscription = /*#__PURE__*/new WeakMap();
 
+var _payInvoice = /*#__PURE__*/new WeakMap();
+
 class StripeGateway {
   constructor() {
     _paymentGateway.set(this, {
@@ -12701,6 +12892,9 @@ class StripeGateway {
         case types.RENEW_GIFTED_SUBSCRIPTION:
           return _classPrivateFieldGet(this, _renewGiftedSubscription).call(this, options, callback);
 
+        case types.PAY_INVOICE:
+          return _classPrivateFieldGet(this, _payInvoice).call(this, options, callback);
+
         default:
           console.error("Unsupported subscriptiion method: Stripe Gateway");
       }
@@ -12809,6 +13003,27 @@ class StripeGateway {
         });
       }
     });
+
+    _payInvoice.set(this, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          token,
+          invoiceId
+        } = options;
+        const params = options.isExistingSource ? {
+          source_id: token,
+          invoice_id: invoiceId
+        } : {
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway),
+          gateway_token: token,
+          invoice_id: invoiceId
+        };
+        window.Pelcro.invoice.pay(params, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
   }
 
 }
@@ -12822,7 +13037,9 @@ var _createSubscription2 = /*#__PURE__*/new WeakMap();
 
 var _createGiftedSubscription2 = /*#__PURE__*/new WeakMap();
 
-class PaypalGateWay {
+var _payInvoice2 = /*#__PURE__*/new WeakMap();
+
+class PaypalGateway {
   constructor() {
     _paymentGateway2.set(this, {
       writable: true,
@@ -12839,6 +13056,9 @@ class PaypalGateWay {
         case types.CREATE_GIFTED_SUBSCRIPTION:
           return _classPrivateFieldGet(this, _createGiftedSubscription2).call(this, options, callback);
 
+        case types.PAY_INVOICE:
+          return _classPrivateFieldGet(this, _payInvoice2).call(this, options, callback);
+
         default:
           console.error("Unsupported subscriptiion method: PayPal Gateway");
       }
@@ -12899,6 +13119,74 @@ class PaypalGateWay {
         });
       }
     });
+
+    _payInvoice2.set(this, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          token,
+          invoiceId
+        } = options;
+        window.Pelcro.invoice.pay({
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway2),
+          gateway_token: token,
+          invoice_id: invoiceId
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
+  }
+
+}
+
+var _paymentGateway3 = /*#__PURE__*/new WeakMap();
+
+var _createSubscription3 = /*#__PURE__*/new WeakMap();
+
+class VantivGateway {
+  constructor() {
+    _paymentGateway3.set(this, {
+      writable: true,
+      value: PAYMENT_GATEWAYS_ENUM["vantiv"]
+    });
+
+    _defineProperty$3(this, "execute", (options, callback) => {
+      const types = SUBSCRIPTION_TYPES;
+
+      switch (options.type) {
+        case types.CREATE_SUBSCRIPTION:
+          return _classPrivateFieldGet(this, _createSubscription3).call(this, options, callback);
+
+        default:
+          console.error("Unsupported subscriptiion method: vantiv Gateway");
+      }
+    });
+
+    _createSubscription3.set(this, {
+      writable: true,
+      value: (options, callback) => {
+        const {
+          token,
+          plan,
+          couponCode,
+          product,
+          quantity = 1,
+          addressId
+        } = options;
+        window.Pelcro.subscription.create({
+          quantity,
+          gateway_token: token,
+          payment_gateway: _classPrivateFieldGet(this, _paymentGateway3),
+          auth_token: window.Pelcro.user.read().auth_token,
+          plan_id: plan.id,
+          coupon_code: couponCode,
+          address_id: product.address_required ? addressId : null
+        }, (err, res) => {
+          callback(err, res);
+        });
+      }
+    });
   }
 
 }
@@ -12923,7 +13211,7 @@ class PaypalGateWay {
 
 /** @type {PaymentStateType} */
 
-const initialState$e = {
+const initialState$f = {
   disableSubmit: false,
   isLoading: false,
   disableCouponButton: false,
@@ -12942,10 +13230,10 @@ const initialState$e = {
     content: ""
   }
 };
-const store$e = /*#__PURE__*/React.createContext(initialState$e);
+const store$f = /*#__PURE__*/React.createContext(initialState$f);
 const {
-  Provider: Provider$e
-} = store$e;
+  Provider: Provider$f
+} = store$f;
 
 const PaymentMethodContainerWithoutStripe = ({
   style,
@@ -12958,7 +13246,7 @@ const PaymentMethodContainerWithoutStripe = ({
   onFailure = () => {},
   ...props
 }) => {
-  var _props$product, _props$plan, _props$subscriptionId, _props$selectedAddres, _props$giftRecipient, _props$isRenewingGift;
+  var _props$product, _props$plan, _props$subscriptionId, _props$selectedAddres, _props$giftRecipient, _props$isRenewingGift, _props$invoice;
 
   const {
     t
@@ -12975,6 +13263,7 @@ const PaymentMethodContainerWithoutStripe = ({
   const selectedAddressId = (_props$selectedAddres = props.selectedAddressId) !== null && _props$selectedAddres !== void 0 ? _props$selectedAddres : pelcroStore.selectedAddressId;
   const giftRecipient = (_props$giftRecipient = props.giftRecipient) !== null && _props$giftRecipient !== void 0 ? _props$giftRecipient : pelcroStore.giftRecipient;
   const isRenewingGift = (_props$isRenewingGift = props.isRenewingGift) !== null && _props$isRenewingGift !== void 0 ? _props$isRenewingGift : pelcroStore.isRenewingGift;
+  const invoice = (_props$invoice = props.invoice) !== null && _props$invoice !== void 0 ? _props$invoice : pelcroStore.invoice;
   React.useEffect(() => {
     if (window.Pelcro.coupon.getFromUrl()) {
       dispatch({
@@ -12989,6 +13278,78 @@ const PaymentMethodContainerWithoutStripe = ({
     updateTotalAmountWithTax();
   }, []);
 
+  function submitVantivPayment() {
+    if (!vantivInstanceRef.current) {
+      return console.error("Vantiv sdk script wasn't loaded, you need to load vantiv sdk before rendering the vantiv payment flow");
+    }
+
+    const orderId = `pelcro-${new Date().getTime()}`; // calls handleVantivPayment
+
+    vantivInstanceRef.current.getPaypageRegistrationId({
+      id: orderId,
+      orderId: orderId
+    });
+  }
+
+  function handleVantivPayment(paymentRequest) {
+    const SUCCESS_STATUS = "870";
+
+    if (paymentRequest.response !== SUCCESS_STATUS) {
+      return handlePaymentError({
+        error: new Error(paymentRequest.message)
+      });
+    }
+
+    const subscription = new Subscription(new VantivGateway());
+    const {
+      couponCode
+    } = state;
+    return subscription.execute({
+      type: SUBSCRIPTION_TYPES.CREATE_SUBSCRIPTION,
+      token: paymentRequest,
+      quantity: plan.quantity,
+      plan,
+      couponCode,
+      product,
+      addressId: selectedAddressId
+    }, (err, res) => {
+      if (err) {
+        return handlePaymentError(err);
+      }
+
+      onSuccess(res);
+    });
+  }
+
+  const vantivInstanceRef = React__default['default'].useRef(null);
+  React.useEffect(() => {
+    const cardProcessor = getSiteCardProcessor();
+
+    if (cardProcessor === "vantiv") {
+      var _window$Pelcro$site$r;
+
+      const payPageId = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.vantiv_pay_page_id;
+      vantivInstanceRef.current = new window.EprotectIframeClient({
+        paypageId: payPageId,
+        reportGroup: payPageId,
+        style: "pelcro",
+        height: "245",
+        timeout: 50000,
+        div: "eProtectiframe",
+        callback: handleVantivPayment,
+        showCvv: true,
+        numYears: 8,
+        placeholderText: {
+          cvv: "CVV",
+          accountNumber: "1234 1234 1234 1234"
+        },
+        enhancedUxFeatures: {
+          inlineFieldValidations: true
+        }
+      });
+    }
+  }, []);
+
   const initPaymentRequest = (state, dispatch) => {
     try {
       const paymentRequest = stripe.paymentRequest({
@@ -13059,9 +13420,9 @@ const PaymentMethodContainerWithoutStripe = ({
 
 
   const updateTotalAmountWithTax = () => {
-    var _window$Pelcro$site$r;
+    var _window$Pelcro$site$r2;
 
-    const taxesEnabled = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.taxes_enabled;
+    const taxesEnabled = (_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.taxes_enabled;
 
     if (taxesEnabled && type === "createPayment") {
       dispatch({
@@ -13411,7 +13772,7 @@ const PaymentMethodContainerWithoutStripe = ({
 
 
   const handlePaypalSubscription = (state, paypalNonce) => {
-    const subscription = new Subscription(new PaypalGateWay());
+    const subscription = new Subscription(new PaypalGateway());
     const {
       couponCode
     } = state;
@@ -13543,6 +13904,38 @@ const PaymentMethodContainerWithoutStripe = ({
     });
   };
 
+  const payInvoice = (gatewayService, gatewayToken, dispatch) => {
+    const subscription = new Subscription(gatewayService);
+    return subscription.execute({
+      type: SUBSCRIPTION_TYPES.PAY_INVOICE,
+      token: gatewayToken,
+      isExistingSource: Boolean(selectedPaymentMethodId),
+      invoiceId: invoice.id
+    }, (err, res) => {
+      dispatch({
+        type: DISABLE_SUBMIT,
+        payload: false
+      });
+      dispatch({
+        type: LOADING,
+        payload: false
+      });
+
+      if (err) {
+        onFailure(err);
+        return dispatch({
+          type: SHOW_ALERT,
+          payload: {
+            type: "error",
+            content: getErrorMessages(err)
+          }
+        });
+      }
+
+      onSuccess(res);
+    });
+  };
+
   const updatePaymentSource = (state, dispatch) => {
     return stripe.createSource({
       type: "card"
@@ -13617,13 +14010,17 @@ const PaymentMethodContainerWithoutStripe = ({
       source,
       error
     }) => {
-      var _ref, _state$updatedPrice, _source$card3;
+      var _ref, _ref2, _state$updatedPrice, _source$card3;
 
       if (error) {
         return handlePaymentError(error);
       }
 
       const getOrderItemsTotal = () => {
+        if (!order) {
+          return null;
+        }
+
         const isQuickPurchase = !Array.isArray(order);
 
         if (isQuickPurchase) {
@@ -13639,7 +14036,7 @@ const PaymentMethodContainerWithoutStripe = ({
         }, 0);
       };
 
-      const totalAmount = (_ref = (_state$updatedPrice = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice !== void 0 ? _state$updatedPrice : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref !== void 0 ? _ref : getOrderItemsTotal();
+      const totalAmount = (_ref = (_ref2 = (_state$updatedPrice = state === null || state === void 0 ? void 0 : state.updatedPrice) !== null && _state$updatedPrice !== void 0 ? _state$updatedPrice : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref2 !== void 0 ? _ref2 : invoice.amount_remaining) !== null && _ref !== void 0 ? _ref : getOrderItemsTotal();
 
       if ((source === null || source === void 0 ? void 0 : (_source$card3 = source.card) === null || _source$card3 === void 0 ? void 0 : _source$card3.three_d_secure) === "required" && totalAmount > 0) {
         return resolveTaxCalculation().then(res => {
@@ -13670,9 +14067,13 @@ const PaymentMethodContainerWithoutStripe = ({
 
 
   const resolveTaxCalculation = () => {
-    var _window$Pelcro$site$r2;
+    var _window$Pelcro$site$r3;
 
-    const taxesEnabled = (_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.taxes_enabled;
+    if (type === "invoicePayment") {
+      return new Promise(resolve => resolve());
+    }
+
+    const taxesEnabled = (_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.taxes_enabled;
     return new Promise((resolve, reject) => {
       // resolve early if taxes isn't enabled
       if (!taxesEnabled) {
@@ -13745,10 +14146,14 @@ const PaymentMethodContainerWithoutStripe = ({
       subscribe(stripeSource, state, dispatch);
     } else if (stripeSource && type === "orderCreate") {
       purchase(stripeSource, state, dispatch);
+    } else if (stripeSource && type === "invoicePayment") {
+      payInvoice(new StripeGateway(), stripeSource.id, dispatch);
     }
   };
 
   const handlePaymentError = error => {
+    var _getErrorMessages;
+
     if (error.type === "validation_error" && // Subscription creation & renewal
     type === "createPayment") {
       var _state$couponObject;
@@ -13767,7 +14172,7 @@ const PaymentMethodContainerWithoutStripe = ({
       type: SHOW_ALERT,
       payload: {
         type: "error",
-        content: error === null || error === void 0 ? void 0 : error.message
+        content: (_getErrorMessages = getErrorMessages(error)) !== null && _getErrorMessages !== void 0 ? _getErrorMessages : error === null || error === void 0 ? void 0 : error.message
       }
     });
     dispatch({
@@ -13871,14 +14276,24 @@ const PaymentMethodContainerWithoutStripe = ({
           }
 
           if (type === "updatePaymentSource") {
-            updatePaymentSource(state, dispatch);
-          } else {
-            submitPayment(state);
+            return updatePaymentSource(state, dispatch);
           }
+
+          if (getSiteCardProcessor() === "vantiv") {
+            return submitVantivPayment();
+          }
+
+          submitPayment(state);
         });
 
       case HANDLE_PAYPAL_SUBSCRIPTION:
-        return lib_5(state, () => handlePaypalSubscription(state, action.payload));
+        return lib_5(state, (state, dispatch) => {
+          if (type === "invoicePayment") {
+            payInvoice(new PaypalGateway(), action.payload, dispatch);
+          } else {
+            handlePaypalSubscription(state, action.payload);
+          }
+        });
 
       case SET_UPDATED_PRICE:
         return lib_7({ ...state,
@@ -13936,21 +14351,21 @@ const PaymentMethodContainerWithoutStripe = ({
       default:
         return state;
     }
-  }, initialState$e);
+  }, initialState$f);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-payment-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$e, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$f, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$e,
+    store: store$f,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$e
+    store: store$f
   })));
 };
 
@@ -13972,7 +14387,7 @@ const PaymentMethodContainer = props => {
       stripeAccount: window.Pelcro.site.read().account_id,
       locale: getPageOrDefaultLanguage()
     }, /*#__PURE__*/React__default['default'].createElement(es_11, null, /*#__PURE__*/React__default['default'].createElement(UnwrappedForm, Object.assign({
-      store: store$e
+      store: store$f
     }, props))));
   }
 
@@ -14025,7 +14440,7 @@ const PelcroPaymentRequestButton = props => {
       currentPlan,
       updatedPrice
     }
-  } = React.useContext(store$e);
+  } = React.useContext(store$f);
 
   const updatePaymentRequest = () => {
     // Make sure payment request is up to date, eg. user added a coupon code.
@@ -14057,19 +14472,35 @@ const CheckoutForm = () => {
   const {
     selectedPaymentMethodId
   } = usePelcro();
-  return !selectedPaymentMethodId && /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(PelcroCardNumber, {
-    autoFocus: true
-  }), /*#__PURE__*/React__default['default'].createElement("img", {
-    alt: "credit_cards",
-    className: "plc-h-4 plc-w-auto plc-mt-2",
-    src: "https://js.pelcro.com/ui/plugin/main/images/credit_cards.png"
-  }), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-flex plc-justify-between plc-my-2 plc-items-end"
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-w-6/12 plc-pr-4"
-  }, /*#__PURE__*/React__default['default'].createElement(PelcroCardExpiry, null)), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-w-6/12 plc-pl-4"
-  }, /*#__PURE__*/React__default['default'].createElement(PelcroCardCVC, null))));
+  const cardProcessor = getSiteCardProcessor();
+
+  if (selectedPaymentMethodId) {
+    return null;
+  }
+
+  if (cardProcessor === "vantiv") {
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      id: "eProtectiframe"
+    });
+  }
+
+  if (cardProcessor === "stripe") {
+    return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(PelcroCardNumber, {
+      autoFocus: true
+    }), /*#__PURE__*/React__default['default'].createElement("img", {
+      alt: "credit_cards",
+      className: "plc-w-auto plc-h-4 plc-mt-2",
+      src: "https://js.pelcro.com/ui/plugin/main/images/credit_cards.png"
+    }), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "plc-flex plc-items-end plc-justify-between plc-my-2"
+    }, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "plc-w-6/12 plc-pr-4"
+    }, /*#__PURE__*/React__default['default'].createElement(PelcroCardExpiry, null)), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "plc-w-6/12 plc-pl-4"
+    }, /*#__PURE__*/React__default['default'].createElement(PelcroCardCVC, null))));
+  }
+
+  return null;
 };
 
 const DiscountedPrice = props => {
@@ -14085,7 +14516,7 @@ const DiscountedPrice = props => {
       taxAmount,
       percentOff
     }
-  } = React.useContext(store$e);
+  } = React.useContext(store$f);
   const {
     order,
     plan
@@ -14135,7 +14566,7 @@ const SubmitPaymentMethod = ({
       isLoading,
       updatedPrice
     }
-  } = React.useContext(store$e);
+  } = React.useContext(store$f);
   const planQuantity = (_plan$quantity = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity !== void 0 ? _plan$quantity : 1;
   const price = updatedPrice !== null && updatedPrice !== void 0 ? updatedPrice : plan === null || plan === void 0 ? void 0 : plan.amount;
   const priceFormatted = getFormattedPriceByLocal(price * planQuantity, plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage());
@@ -14156,17 +14587,17 @@ const SubmitPaymentMethod = ({
   }, t("labels.pay"), " ", priceFormatted && priceFormatted) : t("labels.submit"));
 };
 
-var _path$l;
+var _path$m;
 
-function _extends$n() { _extends$n = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$n.apply(this, arguments); }
+function _extends$o() { _extends$o = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); }
 
 function SvgArrowLeft(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$o({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -14185,7 +14616,7 @@ const ApplyCouponButton = ({
       disableCouponButton
     },
     dispatch
-  } = React.useContext(store$e);
+  } = React.useContext(store$f);
   const {
     t
   } = useTranslation("checkoutForm");
@@ -14219,7 +14650,7 @@ const CouponCodeField = props => {
       couponCode,
       couponError
     }
-  } = React.useContext(store$e);
+  } = React.useContext(store$f);
 
   const onCouponCodeChange = e => {
     dispatch({
@@ -14248,17 +14679,17 @@ const CouponCodeField = props => {
   }, props));
 };
 
-var _path$k;
+var _path$l;
 
-function _extends$m() { _extends$m = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); }
+function _extends$n() { _extends$n = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$n.apply(this, arguments); }
 
 function SvgTicket(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$n({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$l || (_path$l = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -14275,7 +14706,7 @@ const CouponCode = ({
     state: {
       enableCouponField
     }
-  } = React.useContext(store$e);
+  } = React.useContext(store$f);
   const {
     t
   } = useTranslation("checkoutForm");
@@ -14532,17 +14963,18 @@ const PaypalSubscribeButton = props => {
   const {
     dispatch,
     state
-  } = React.useContext(store$e);
+  } = React.useContext(store$f);
   const {
     product,
     plan,
+    invoice,
     selectedAddressId
   } = usePelcro();
   React.useEffect(() => {
-    var _ref, _state$updatedPrice, _props$plan, _props$selectedAddres;
+    var _ref, _ref2, _state$updatedPrice, _props$plan, _props$selectedAddres;
 
     // sometimes, price is updated. eg. Coupon codes.
-    const updatedPrice = (_ref = (_state$updatedPrice = state.updatedPrice) !== null && _state$updatedPrice !== void 0 ? _state$updatedPrice : (_props$plan = props.plan) === null || _props$plan === void 0 ? void 0 : _props$plan.amount) !== null && _ref !== void 0 ? _ref : plan.amount;
+    const updatedPrice = (_ref = (_ref2 = (_state$updatedPrice = state.updatedPrice) !== null && _state$updatedPrice !== void 0 ? _state$updatedPrice : (_props$plan = props.plan) === null || _props$plan === void 0 ? void 0 : _props$plan.amount) !== null && _ref2 !== void 0 ? _ref2 : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref !== void 0 ? _ref : invoice.amount_remaining;
     const selectedAddress = getAddressById((_props$selectedAddres = props.selectedAddressId) !== null && _props$selectedAddres !== void 0 ? _props$selectedAddres : selectedAddressId); // initialize paypal client, then render paypal button.
 
     const initializePaypal = async () => {
@@ -14551,7 +14983,7 @@ const PaypalSubscribeButton = props => {
       const paypalCheckoutInstance = new PaypalClient({
         buttonElementID: (_props$buttonElementI = props.buttonElementID) !== null && _props$buttonElementI !== void 0 ? _props$buttonElementI : "pelcro-paypal-button",
         style: props.buttonStyle,
-        enableShippingAddress: (_props$product$addres = (_props$product = props.product) === null || _props$product === void 0 ? void 0 : _props$product.address_required) !== null && _props$product$addres !== void 0 ? _props$product$addres : product.address_required,
+        enableShippingAddress: (_props$product$addres = (_props$product = props.product) === null || _props$product === void 0 ? void 0 : _props$product.address_required) !== null && _props$product$addres !== void 0 ? _props$product$addres : product === null || product === void 0 ? void 0 : product.address_required,
         shippingAddressEditable: props.makeAddressEditable,
         displayName: props.merchantDisplayName,
         locale: props.locale,
@@ -14561,9 +14993,9 @@ const PaypalSubscribeButton = props => {
       await paypalCheckoutInstance.build(); // Create paypal payment
 
       paypalCheckoutInstance.createPayment({
-        product: (_props$plan2 = props.plan) !== null && _props$plan2 !== void 0 ? _props$plan2 : plan,
+        product: invoice ? invoice.plan : (_props$plan2 = props.plan) !== null && _props$plan2 !== void 0 ? _props$plan2 : plan,
         amount: updatedPrice,
-        address: selectedAddress,
+        address: invoice ? null : selectedAddress,
         onButtonClick: () => {
           dispatch({
             type: DISABLE_SUBMIT,
@@ -14617,16 +15049,16 @@ const BankRedirection = () => {
   }));
 };
 
-var _path$j;
+var _path$k;
 
-function _extends$l() { _extends$l = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
+function _extends$m() { _extends$m = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); }
 
 function SvgLock(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$k || (_path$k = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z",
     clipRule: "evenodd"
@@ -14643,7 +15075,7 @@ const SelectedPaymentMethod = () => {
     state: {
       isLoading
     }
-  } = React.useContext(store$e);
+  } = React.useContext(store$f);
   const {
     switchView,
     selectedPaymentMethodId
@@ -14685,7 +15117,7 @@ const TaxAmount = () => {
     state: {
       taxAmount
     }
-  } = React.useContext(store$e);
+  } = React.useContext(store$f);
   const {
     plan
   } = usePelcro();
@@ -14718,9 +15150,10 @@ function PaymentMethodView({
   const {
     t
   } = useTranslation("checkoutForm");
+  const cardProcessor = getSiteCardProcessor();
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-flex-col plc-items-center plc-mt-4 sm:plc-px-8 pelcro-payment-block"
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, cardProcessor === "stripe" && /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-items-center plc-w-full plc-px-4 plc-py-2 plc-text-center plc-text-green-600 plc-border plc-border-green-400 plc-rounded plc-bg-green-50"
   }, /*#__PURE__*/React__default['default'].createElement(SvgLock, {
     className: "plc-w-5 plc-h-5 plc-mr-1"
@@ -14848,12 +15281,12 @@ function SubscriptionRenewModal({
 }
 SubscriptionRenewModal.viewId = "subscription-renew";
 
-var _path$i;
+var _path$j;
 
-function _extends$k() { _extends$k = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
+function _extends$l() { _extends$l = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
 
 function SvgGift(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     fill: "none",
     stroke: "currentColor",
@@ -14862,7 +15295,7 @@ function SvgGift(props) {
     strokeWidth: 2,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M20 12v10H4V12M2 7h20v5H2zM12 22V7M12 7H7.5a2.5 2.5 0 010-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 000-5C13 2 12 7 12 7z"
   })));
 }
@@ -14900,10 +15333,13 @@ const getCurrentFlow = () => {
   const {
     product,
     giftRecipient,
-    giftCode
+    giftCode,
+    invoice
   } = usePelcro.getStore();
 
-  if (giftRecipient) {
+  if (invoice) {
+    return "invoicePayment";
+  } else if (giftRecipient) {
     return "giftCreate";
   } else if (giftCode) {
     return "giftRedeem";
@@ -14940,6 +15376,13 @@ const getSuccessContent = i18n => {
       }),
       successTitle: i18n("messages.giftRedeem.title"),
       successContent: i18n("messages.giftRedeem.content")
+    },
+    invoicePayment: {
+      successIcon: /*#__PURE__*/React__default['default'].createElement(SvgCheckSolid, {
+        className: "plc-w-32 plc-my-4 plc-text-green-500"
+      }),
+      successTitle: i18n("messages.invoicePayment.title"),
+      successContent: i18n("messages.invoicePayment.title")
     }
   };
   return wordingDictionary[flow];
@@ -15193,7 +15636,7 @@ class DefaultNewsLetter extends React.Component {
 
 const NewsLetter = withTranslation("newsletter")(DefaultNewsLetter);
 
-const initialState$d = {
+const initialState$e = {
   didSubToNewslettersBefore: false,
   newsletters: [],
   isListLoading: true,
@@ -15203,10 +15646,10 @@ const initialState$d = {
     content: ""
   }
 };
-const store$d = /*#__PURE__*/React.createContext(initialState$d);
+const store$e = /*#__PURE__*/React.createContext(initialState$e);
 const {
-  Provider: Provider$d
-} = store$d;
+  Provider: Provider$e
+} = store$e;
 
 const NewsletterUpdateContainer = ({
   style,
@@ -15319,7 +15762,7 @@ const NewsletterUpdateContainer = ({
       default:
         return state;
     }
-  }, initialState$d);
+  }, initialState$e);
   React.useEffect(() => {
     const getUserNewsletters = () => {
       var _window$Pelcro$user$r3, _window$Pelcro$user$r4;
@@ -15363,7 +15806,7 @@ const NewsletterUpdateContainer = ({
     style: { ...style
     },
     className: `pelcro-container pelcro-newsletter-update-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$d, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$e, {
     value: {
       state,
       dispatch
@@ -15371,12 +15814,12 @@ const NewsletterUpdateContainer = ({
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default['default'].cloneElement(child, {
-        store: store$d,
+        store: store$e,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$d
+    store: store$e
   })));
 };
 
@@ -15391,7 +15834,7 @@ const NewsletterUpdateButton = ({
       isSubmitting,
       isListLoading
     }
-  } = React.useContext(store$d);
+  } = React.useContext(store$e);
   const {
     t
   } = useTranslation("newsletter");
@@ -15421,7 +15864,7 @@ const NewsletterUpdateList = () => {
       newsletters,
       isListLoading
     }
-  } = React.useContext(store$d);
+  } = React.useContext(store$e);
 
   if (isListLoading) {
     return /*#__PURE__*/React__default['default'].createElement(Loader, {
@@ -15625,7 +16068,7 @@ function SubscriptionCreateModal({
 SubscriptionCreateModal.viewId = "subscription-create";
 
 var _window$Pelcro$user$r, _window$Pelcro$user$r2, _window$Pelcro$user$r3, _window$Pelcro$user$r4, _window$Pelcro$user$r5;
-const initialState$c = {
+const initialState$d = {
   email: (_window$Pelcro$user$r = window.Pelcro.user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : _window$Pelcro$user$r.email,
   firstName: (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.first_name,
   lastName: (_window$Pelcro$user$r3 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r3 === void 0 ? void 0 : _window$Pelcro$user$r3.last_name,
@@ -15638,10 +16081,10 @@ const initialState$c = {
     content: ""
   }
 };
-const store$c = /*#__PURE__*/React.createContext(initialState$c);
+const store$d = /*#__PURE__*/React.createContext(initialState$d);
 const {
-  Provider: Provider$c
-} = store$c;
+  Provider: Provider$d
+} = store$d;
 
 const UserUpdateContainer = ({
   style,
@@ -15773,27 +16216,27 @@ const UserUpdateContainer = ({
       default:
         return state;
     }
-  }, initialState$c);
+  }, initialState$d);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-user-update-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$c, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$d, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$c,
+    store: store$d,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$c
+    store: store$d
   })));
 };
 
 const UserUpdateEmail = props => /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
   disabled: true,
-  store: store$c
+  store: store$d
 }, props));
 
 const UserUpdateButton = ({
@@ -15806,7 +16249,7 @@ const UserUpdateButton = ({
       buttonDisabled
     },
     dispatch
-  } = React.useContext(store$c);
+  } = React.useContext(store$d);
   const {
     t
   } = useTranslation("userEdit");
@@ -15823,11 +16266,11 @@ const UserUpdateButton = ({
 };
 
 const UserUpdateFirstName = props => /*#__PURE__*/React__default['default'].createElement(FirstName, Object.assign({
-  store: store$c
+  store: store$d
 }, props));
 
 const UserUpdateLastName = props => /*#__PURE__*/React__default['default'].createElement(LastName, Object.assign({
-  store: store$c
+  store: store$d
 }, props));
 
 function Phone({
@@ -15856,22 +16299,22 @@ function Phone({
 }
 
 const UserUpdatePhone = props => /*#__PURE__*/React__default['default'].createElement(Phone, Object.assign({
-  store: store$c
+  store: store$d
 }, props));
 
 var userSolidIcon = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22plc-h-5%20plc-w-5%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22white%22%3E%20%20%3Cpath%20transform%3D%22translate%280%2C2%29%22%20fill-rule%3D%22evenodd%22%20d%3D%22M10%209a3%203%200%20100-6%203%203%200%20000%206zm-7%209a7%207%200%201114%200H3z%22%20clip-rule%3D%22evenodd%22%20%2F%3E%3C%2Fsvg%3E";
 
-var _path$h;
+var _path$i;
 
-function _extends$j() { _extends$j = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
+function _extends$k() { _extends$k = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
 
 function SvgEdit(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
     className: "plc-w-6 plc-h-6",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zm-2.207 2.207L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
   })));
 }
@@ -16003,16 +16446,16 @@ function DisplayName({
 }
 
 const UserUpdateDisplayName = props => /*#__PURE__*/React__default['default'].createElement(DisplayName, Object.assign({
-  store: store$c
+  store: store$d
 }, props));
 
 const UserUpdateTextInput = props => {
   return /*#__PURE__*/React__default['default'].createElement(TextInput, Object.assign({}, props, {
-    store: store$c
+    store: store$d
   }));
 };
 
-const initialState$b = {
+const initialState$c = {
   isSubmitting: false,
   firstName: "",
   firstNameError: "",
@@ -16037,10 +16480,10 @@ const initialState$b = {
     content: ""
   }
 };
-const store$b = /*#__PURE__*/React.createContext(initialState$b);
+const store$c = /*#__PURE__*/React.createContext(initialState$c);
 const {
-  Provider: Provider$b
-} = store$b;
+  Provider: Provider$c
+} = store$c;
 
 const getNewlyCreatedAddress = addresses => addresses[addresses.length - 1];
 
@@ -16247,7 +16690,7 @@ const AddressCreateContainer = ({
       default:
         return state;
     }
-  }, initialState$b);
+  }, initialState$c);
   React.useEffect(() => {
     const getStates = () => {
       dispatch({
@@ -16279,16 +16722,16 @@ const AddressCreateContainer = ({
     style: { ...style
     },
     className: `pelcro-container pelcro-address-create-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$b, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$c, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$b,
+    store: store$c,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$b
+    store: store$c
   })));
 };
 
@@ -16299,7 +16742,7 @@ function AddressCreateFirstName(props) {
       firstName,
       firstNameError
     }
-  } = React.useContext(store$b);
+  } = React.useContext(store$c);
 
   const handleBlur = () => {
     return dispatch({
@@ -16342,7 +16785,7 @@ function AddressCreateLastName(props) {
       lastName,
       lastNameError
     }
-  } = React.useContext(store$b);
+  } = React.useContext(store$c);
 
   const handleBlur = () => {
     return dispatch({
@@ -16385,7 +16828,7 @@ function AddressCreateLine1(props) {
       line1,
       line1Error
     }
-  } = React.useContext(store$b);
+  } = React.useContext(store$c);
 
   const handleBlur = () => {
     return dispatch({
@@ -16428,7 +16871,7 @@ function AddressCreateCity(props) {
       city,
       cityError
     }
-  } = React.useContext(store$b);
+  } = React.useContext(store$c);
 
   const handleBlur = () => {
     return dispatch({
@@ -16471,7 +16914,7 @@ function AddressCreatePostalCode(props) {
       postalCode,
       postalCodeError
     }
-  } = React.useContext(store$b);
+  } = React.useContext(store$c);
 
   const handleBlur = () => {
     return dispatch({
@@ -16517,7 +16960,7 @@ const AddressCreateSubmit = ({
     state: {
       isSubmitting
     }
-  } = React.useContext(store$b);
+  } = React.useContext(store$c);
   const {
     t
   } = useTranslation("address");
@@ -16628,7 +17071,7 @@ function CountrySelect({
 }
 
 const AddressCreateCountrySelect = props => /*#__PURE__*/React__default['default'].createElement(CountrySelect, Object.assign({
-  store: store$b
+  store: store$c
 }, props));
 
 function StateSelect({
@@ -16716,7 +17159,7 @@ function StateSelect({
 }
 
 const AddressCreateStateSelect = props => /*#__PURE__*/React__default['default'].createElement(StateSelect, Object.assign({
-  store: store$b
+  store: store$c
 }, props));
 
 const AddressCreateView = props => {
@@ -16821,18 +17264,18 @@ AddressCreateModal.viewId = "address-create";
 
 const AddressCreateTextInput = props => {
   return /*#__PURE__*/React__default['default'].createElement(TextInput, Object.assign({}, props, {
-    store: store$b
+    store: store$c
   }));
 };
 
 const AddressCreateLine2 = props => {
   return /*#__PURE__*/React__default['default'].createElement(TextInput, Object.assign({
     fieldName: "line2",
-    store: store$b
+    store: store$c
   }, props));
 };
 
-const initialState$a = {
+const initialState$b = {
   isSubmitting: false,
   firstName: "",
   firstNameError: "",
@@ -16857,10 +17300,10 @@ const initialState$a = {
     content: ""
   }
 };
-const store$a = /*#__PURE__*/React.createContext(initialState$a);
+const store$b = /*#__PURE__*/React.createContext(initialState$b);
 const {
-  Provider: Provider$a
-} = store$a;
+  Provider: Provider$b
+} = store$b;
 
 const AddressUpdateContainer = ({
   style,
@@ -16912,7 +17355,7 @@ const AddressUpdateContainer = ({
       const thisAddress = addresses[address];
 
       if (+thisAddress.id === +addressId) {
-        const newState = { ...initialState$a,
+        const newState = { ...initialState$b,
           firstName: thisAddress.first_name,
           lastName: thisAddress.last_name,
           line1: thisAddress.line1,
@@ -17045,7 +17488,7 @@ const AddressUpdateContainer = ({
       default:
         return state;
     }
-  }, initialState$a);
+  }, initialState$b);
   React.useEffect(() => {
     const getStates = () => {
       dispatch({
@@ -17077,21 +17520,21 @@ const AddressUpdateContainer = ({
     style: { ...style
     },
     className: `pelcro-container pelcro-address-update-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$a, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$b, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$a,
+    store: store$b,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$a
+    store: store$b
   })));
 };
 
 const AddressUpdateCountrySelect = props => /*#__PURE__*/React__default['default'].createElement(CountrySelect, Object.assign({
-  store: store$a
+  store: store$b
 }, props));
 
 function AddressUpdateFirstName(props) {
@@ -17101,7 +17544,7 @@ function AddressUpdateFirstName(props) {
       firstName,
       firstNameError
     }
-  } = React.useContext(store$a);
+  } = React.useContext(store$b);
 
   const handleBlur = () => {
     return dispatch({
@@ -17144,7 +17587,7 @@ function AddressUpdateLastName(props) {
       lastName,
       lastNameError
     }
-  } = React.useContext(store$a);
+  } = React.useContext(store$b);
 
   const handleBlur = () => {
     return dispatch({
@@ -17187,7 +17630,7 @@ function AddressUpdateLine1(props) {
       line1,
       line1Error
     }
-  } = React.useContext(store$a);
+  } = React.useContext(store$b);
 
   const handleBlur = () => {
     return dispatch({
@@ -17227,7 +17670,7 @@ const AddressUpdateLine2 = props => {
   return /*#__PURE__*/React__default['default'].createElement(TextInput, Object.assign({
     fieldName: "line2"
   }, props, {
-    store: store$a
+    store: store$b
   }));
 };
 
@@ -17238,7 +17681,7 @@ function AddressUpdateCity(props) {
       city,
       cityError
     }
-  } = React.useContext(store$a);
+  } = React.useContext(store$b);
 
   const handleBlur = () => {
     return dispatch({
@@ -17281,7 +17724,7 @@ function AddressUpdatePostalCode(props) {
       postalCode,
       postalCodeError
     }
-  } = React.useContext(store$a);
+  } = React.useContext(store$b);
 
   const handleBlur = () => {
     return dispatch({
@@ -17327,7 +17770,7 @@ const AddressUpdateSubmit = ({
     state: {
       isSubmitting
     }
-  } = React.useContext(store$a);
+  } = React.useContext(store$b);
   const {
     t
   } = useTranslation("address");
@@ -17343,7 +17786,7 @@ const AddressUpdateSubmit = ({
 };
 
 const AddressUpdateStateSelect = props => /*#__PURE__*/React__default['default'].createElement(StateSelect, Object.assign({
-  store: store$a
+  store: store$b
 }, props));
 
 const AddressUpdateView = props => {
@@ -17426,7 +17869,7 @@ AddressUpdateModal.viewId = "address-edit";
 
 const AddressUpdateTextInput = props => {
   return /*#__PURE__*/React__default['default'].createElement(TextInput, Object.assign({}, props, {
-    store: store$a
+    store: store$b
   }));
 };
 
@@ -17509,7 +17952,7 @@ const PaymentMethodUpdateModal = props => {
 };
 PaymentMethodUpdateModal.viewId = "payment-method-update";
 
-const initialState$9 = {
+const initialState$a = {
   email: "",
   password: "",
   passwordError: null,
@@ -17522,10 +17965,10 @@ const initialState$9 = {
     content: ""
   }
 };
-const store$9 = /*#__PURE__*/React.createContext(initialState$9);
+const store$a = /*#__PURE__*/React.createContext(initialState$a);
 const {
-  Provider: Provider$9
-} = store$9;
+  Provider: Provider$a
+} = store$a;
 
 const PasswordResetContainer = ({
   style,
@@ -17582,7 +18025,7 @@ const PasswordResetContainer = ({
       type: SET_EMAIL,
       payload: window.Pelcro.helpers.getURLParameter("email")
     });
-    initialState$9.email = window.Pelcro.helpers.getURLParameter("email");
+    initialState$a.email = window.Pelcro.helpers.getURLParameter("email");
     dispatch({
       type: SET_TOKEN,
       payload: window.Pelcro.helpers.getURLParameter("token")
@@ -17642,26 +18085,26 @@ const PasswordResetContainer = ({
       default:
         return state;
     }
-  }, initialState$9);
+  }, initialState$a);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-password-reset-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$9, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$a, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$9,
+    store: store$a,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$9
+    store: store$a
   })));
 };
 
 const PasswordResetPassword = props => /*#__PURE__*/React__default['default'].createElement(Password, Object.assign({
-  store: store$9
+  store: store$a
 }, props));
 
 const PasswordResetButton = ({
@@ -17674,7 +18117,7 @@ const PasswordResetButton = ({
       buttonDisabled
     },
     dispatch
-  } = React.useContext(store$9);
+  } = React.useContext(store$a);
   const {
     t
   } = useTranslation("passwordReset");
@@ -17691,14 +18134,14 @@ const PasswordResetButton = ({
 };
 
 const PasswordResetEmail = props => /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
-  store: store$9
+  store: store$a
 }, props, {
   value: window.Pelcro.helpers.getURLParameter("email"),
   disabled: true
 }));
 
 const PasswordResetConfirmPassword = props => /*#__PURE__*/React__default['default'].createElement(ConfirmPassword, Object.assign({
-  store: store$9
+  store: store$a
 }, props));
 
 const PasswordResetView = props => {
@@ -17750,7 +18193,7 @@ const PasswordResetModal = ({
 };
 PasswordResetModal.viewId = "password-reset";
 
-const initialState$8 = {
+const initialState$9 = {
   email: "",
   emailError: null,
   buttonDisabled: false,
@@ -17759,10 +18202,10 @@ const initialState$8 = {
     content: ""
   }
 };
-const store$8 = /*#__PURE__*/React.createContext(initialState$8);
+const store$9 = /*#__PURE__*/React.createContext(initialState$9);
 const {
-  Provider: Provider$8
-} = store$8;
+  Provider: Provider$9
+} = store$9;
 
 const PasswordForgotContainer = ({
   style,
@@ -17840,21 +18283,21 @@ const PasswordForgotContainer = ({
       default:
         return state;
     }
-  }, initialState$8);
+  }, initialState$9);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-password-forgot-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$8, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$9, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$8,
+    store: store$9,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$8
+    store: store$9
   })));
 };
 
@@ -17870,7 +18313,7 @@ const PasswordForgotButton = ({
       emailError
     },
     dispatch
-  } = React.useContext(store$8);
+  } = React.useContext(store$9);
   const {
     t
   } = useTranslation("passwordForgot");
@@ -17891,7 +18334,7 @@ const PasswordForgotButton = ({
 };
 
 const PasswordForgotEmail = props => /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
-  store: store$8
+  store: store$9
 }, props));
 
 const PasswordForgotView = props => {
@@ -17941,7 +18384,7 @@ const PasswordForgotModal = ({
 };
 PasswordForgotModal.viewId = "password-forgot";
 
-const initialState$7 = {
+const initialState$8 = {
   currentPassword: "",
   newPassword: "",
   confirmNewPassword: "",
@@ -17955,10 +18398,10 @@ const initialState$7 = {
     content: ""
   }
 };
-const store$7 = /*#__PURE__*/React.createContext(initialState$7);
+const store$8 = /*#__PURE__*/React.createContext(initialState$8);
 const {
-  Provider: Provider$7
-} = store$7;
+  Provider: Provider$8
+} = store$8;
 const PasswordChangeContainer = ({
   style,
   className = "",
@@ -18110,21 +18553,21 @@ const PasswordChangeContainer = ({
       default:
         return state;
     }
-  }, initialState$7);
+  }, initialState$8);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-password-change-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$7, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$8, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$7,
+    store: store$8,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$7
+    store: store$8
   })));
 };
 
@@ -18135,7 +18578,7 @@ function PasswordChangeCurrentPassword(props) {
       currentPassword,
       currentPasswordError
     }
-  } = React.useContext(store$7);
+  } = React.useContext(store$8);
   const handleBlur = React.useCallback(() => {
     return dispatch({
       type: VALIDATE_PASSWORD
@@ -18169,7 +18612,7 @@ function PasswordChangeNewPassword(props) {
       newPassword,
       newPasswordError
     }
-  } = React.useContext(store$7);
+  } = React.useContext(store$8);
   const handleBlur = React.useCallback(() => {
     return dispatch({
       type: VALIDATE_NEW_PASSWORD
@@ -18203,7 +18646,7 @@ function PasswordChangeConfirmNewPassword(props) {
       confirmNewPassword,
       confirmNewPasswordError
     }
-  } = React.useContext(store$7);
+  } = React.useContext(store$8);
   const handleBlur = React.useCallback(() => {
     return dispatch({
       type: VALIDATE_CONFIRM_NEW_PASSWORD
@@ -18244,7 +18687,7 @@ const PasswordChangeButton = ({
       confirmNewPasswordError
     },
     dispatch
-  } = React.useContext(store$7);
+  } = React.useContext(store$8);
   const {
     t
   } = useTranslation("passwordChange");
@@ -18310,17 +18753,17 @@ const PasswordChangeModal = ({
 };
 PasswordChangeModal.viewId = "password-change";
 
-const initialState$6 = {
+const initialState$7 = {
   buttonDisabled: false,
   alert: {
     type: "error",
     content: ""
   }
 };
-const store$6 = /*#__PURE__*/React.createContext(initialState$6);
+const store$7 = /*#__PURE__*/React.createContext(initialState$7);
 const {
-  Provider: Provider$6
-} = store$6;
+  Provider: Provider$7
+} = store$7;
 
 const CartContainer = ({
   style,
@@ -18411,21 +18854,21 @@ const CartContainer = ({
       default:
         return state;
     }
-  }, initialState$6);
+  }, initialState$7);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-cart-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$6, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$7, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$6,
+    store: store$7,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$6
+    store: store$7
   })));
 };
 
@@ -18462,7 +18905,7 @@ const CartSubmit = ({
       buttonDisabled
     },
     dispatch
-  } = React.useContext(store$6);
+  } = React.useContext(store$7);
   const {
     t
   } = useTranslation("cart");
@@ -18493,7 +18936,7 @@ const CartTotalPrice = () => {
     state: {
       alert
     }
-  } = React.useContext(store$6);
+  } = React.useContext(store$7);
   const {
     cartItems
   } = usePelcro();
@@ -18806,7 +19249,7 @@ const OrderConfirmModal = props => {
 };
 OrderConfirmModal.viewId = "order-confirm";
 
-const initialState$5 = {
+const initialState$6 = {
   email: "",
   firstName: "",
   lastName: "",
@@ -18818,10 +19261,10 @@ const initialState$5 = {
     content: ""
   }
 };
-const store$5 = /*#__PURE__*/React.createContext(initialState$5);
+const store$6 = /*#__PURE__*/React.createContext(initialState$6);
 const {
-  Provider: Provider$5
-} = store$5;
+  Provider: Provider$6
+} = store$6;
 
 const GiftCreateContainer = ({
   style,
@@ -18925,21 +19368,21 @@ const GiftCreateContainer = ({
       default:
         return state;
     }
-  }, initialState$5);
+  }, initialState$6);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-gift-create-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$5, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$6, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$5,
+    store: store$6,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$5
+    store: store$6
   })));
 };
 
@@ -18953,7 +19396,7 @@ const GiftCreateSubmitButton = ({
     state: {
       disableSubmit
     }
-  } = React.useContext(store$5);
+  } = React.useContext(store$6);
   const {
     t
   } = useTranslation("register");
@@ -18970,29 +19413,29 @@ const GiftCreateSubmitButton = ({
 
 const GiftCreateEmail = props => /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
   initWithUserEmail: false,
-  store: store$5
+  store: store$6
 }, props));
 
 const GiftCreateFirstName = props => /*#__PURE__*/React__default['default'].createElement(FirstName, Object.assign({
-  store: store$5
+  store: store$6
 }, props));
 
 const GiftCreateLastName = props => /*#__PURE__*/React__default['default'].createElement(LastName, Object.assign({
-  store: store$5
+  store: store$6
 }, props));
 
-var _path$g;
+var _path$h;
 
-function _extends$i() { _extends$i = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
+function _extends$j() { _extends$j = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
 
 function SvgInfoCircle(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
     xmlns: "http://www.w3.org/2000/svg",
     className: "plc-w-5 plc-h-5",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -19063,7 +19506,7 @@ const GiftCreateStartDate = props => {
   const {
     dispatch,
     state
-  } = React.useContext(store$5);
+  } = React.useContext(store$6);
 
   const handleInputChange = value => {
     dispatch({
@@ -19128,13 +19571,17 @@ function TextArea({
  */
 
 function GiftCreateMessage(props) {
+  var _ref, _state$giftMessage;
+
   const {
     t
   } = useTranslation("register");
   const {
     dispatch,
     state
-  } = React.useContext(store$5);
+  } = React.useContext(store$6);
+  const MAX_CHARS_COUNT = 200;
+  const remainingCharsCount = (_ref = MAX_CHARS_COUNT - ((_state$giftMessage = state.giftMessage) === null || _state$giftMessage === void 0 ? void 0 : _state$giftMessage.length)) !== null && _ref !== void 0 ? _ref : 0;
 
   const handleInputChange = value => {
     dispatch({
@@ -19152,6 +19599,9 @@ function GiftCreateMessage(props) {
     value: state.giftMessage,
     maxLength: "200",
     rows: 3,
+    label: t("gift.labels.giftMessage", {
+      count: remainingCharsCount
+    }),
     tooltipText: t("gift.messages.giftMessageInfo")
   }, props));
 }
@@ -19201,8 +19651,7 @@ const GiftCreateView = props => {
   }, /*#__PURE__*/React__default['default'].createElement(GiftCreateMessage, {
     autoComplete: "gift-message",
     id: "pelcro-input-gift-message",
-    errorId: "pelcro-input-gift-message-error",
-    label: t("gift.labels.giftMessage")
+    errorId: "pelcro-input-gift-message-error"
   })), /*#__PURE__*/React__default['default'].createElement("p", {
     className: "plc-text-gray-900 pelcro-footnote"
   }, "* ", t("gift.labels.required")), /*#__PURE__*/React__default['default'].createElement(GiftCreateSubmitButton, {
@@ -19254,7 +19703,7 @@ const GiftCreateModal = ({
 };
 GiftCreateModal.viewId = "gift-create";
 
-const initialState$4 = {
+const initialState$5 = {
   giftCode: "",
   buttonDisabled: true,
   alert: {
@@ -19262,10 +19711,10 @@ const initialState$4 = {
     content: ""
   }
 };
-const store$4 = /*#__PURE__*/React.createContext(initialState$4);
+const store$5 = /*#__PURE__*/React.createContext(initialState$5);
 const {
-  Provider: Provider$4
-} = store$4;
+  Provider: Provider$5
+} = store$5;
 
 const GiftRedeemContainer = ({
   style,
@@ -19330,21 +19779,21 @@ const GiftRedeemContainer = ({
       default:
         return state;
     }
-  }, initialState$4);
+  }, initialState$5);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-gift-redeem-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$4, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$5, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$4,
+    store: store$5,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$4
+    store: store$5
   })));
 };
 
@@ -19381,7 +19830,7 @@ function GiftCode({
 }
 
 const GiftRedeemCode = props => /*#__PURE__*/React__default['default'].createElement(GiftCode, Object.assign({
-  store: store$4
+  store: store$5
 }, props));
 
 const GiftRedeemSubmitButton = ({
@@ -19394,7 +19843,7 @@ const GiftRedeemSubmitButton = ({
     state: {
       disableSubmit
     }
-  } = React.useContext(store$4);
+  } = React.useContext(store$5);
   const {
     t
   } = useTranslation("register");
@@ -19487,7 +19936,7 @@ const moveDefaultAddressToStart = addresses => {
   return [defaultAddress, ...addressesWithoutDefault];
 };
 
-const initialState$3 = {
+const initialState$4 = {
   addresses: [],
   selectedAddressId: null,
   isSubmitting: false,
@@ -19496,10 +19945,10 @@ const initialState$3 = {
     content: ""
   }
 };
-const store$3 = /*#__PURE__*/React.createContext(initialState$3);
+const store$4 = /*#__PURE__*/React.createContext(initialState$4);
 const {
-  Provider: Provider$3
-} = store$3;
+  Provider: Provider$4
+} = store$4;
 
 const AddressSelectContainer = ({
   style,
@@ -19594,7 +20043,7 @@ const AddressSelectContainer = ({
       default:
         return state;
     }
-  }, initialState$3);
+  }, initialState$4);
   React.useEffect(() => {
     var _window$Pelcro$user$r;
 
@@ -19607,16 +20056,16 @@ const AddressSelectContainer = ({
     style: { ...style
     },
     className: `pelcro-container pelcro-address-select-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$3, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$4, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$3,
+    store: store$4,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$3
+    store: store$4
   })));
 };
 
@@ -19627,7 +20076,7 @@ const AddressSelectList = () => {
       addresses,
       selectedAddressId
     }
-  } = React.useContext(store$3);
+  } = React.useContext(store$4);
 
   const handleAddressSelect = event => {
     dispatch({
@@ -19671,7 +20120,7 @@ const AddressSelectSubmit = ({
       selectedAddressId,
       isSubmitting
     }
-  } = React.useContext(store$3);
+  } = React.useContext(store$4);
   const {
     t
   } = useTranslation("address");
@@ -19759,10 +20208,15 @@ const moveDefaultPaymentMethodToStart = paymentMethods => {
 
   const defaultPaymentMethod = (_window$Pelcro$user$r = window.Pelcro.user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : _window$Pelcro$user$r.source;
   const paymentMethodsWithoutDefault = paymentMethods.filter(paymentMethod => paymentMethod.id !== defaultPaymentMethod.id);
+
+  if (defaultPaymentMethod.status !== "chargeable") {
+    return paymentMethodsWithoutDefault;
+  }
+
   return [defaultPaymentMethod, ...paymentMethodsWithoutDefault];
 };
 
-const initialState$2 = {
+const initialState$3 = {
   paymentMethods: [],
   selectedPaymentMethodId: null,
   isSubmitting: false,
@@ -19771,10 +20225,10 @@ const initialState$2 = {
     content: ""
   }
 };
-const store$2 = /*#__PURE__*/React.createContext(initialState$2);
+const store$3 = /*#__PURE__*/React.createContext(initialState$3);
 const {
-  Provider: Provider$2
-} = store$2;
+  Provider: Provider$3
+} = store$3;
 
 const PaymentMethodSelectContainer = ({
   style,
@@ -19819,7 +20273,7 @@ const PaymentMethodSelectContainer = ({
       default:
         return state;
     }
-  }, initialState$2);
+  }, initialState$3);
   React.useEffect(() => {
     var _window$Pelcro$user$r4;
 
@@ -19832,16 +20286,16 @@ const PaymentMethodSelectContainer = ({
     style: { ...style
     },
     className: `pelcro-container pelcro-payment-select-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$2, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$3, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$2,
+    store: store$3,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$2
+    store: store$3
   })));
 };
 
@@ -19855,7 +20309,7 @@ const PaymentMethodSelectList = () => {
       paymentMethods,
       selectedPaymentMethodId
     }
-  } = React.useContext(store$2);
+  } = React.useContext(store$3);
 
   const handlePaymentMethodSelect = event => {
     dispatch({
@@ -19905,7 +20359,7 @@ const PaymentMethodSelectSubmit = ({
       selectedPaymentMethodId,
       isSubmitting
     }
-  } = React.useContext(store$2);
+  } = React.useContext(store$3);
   return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     onClick: () => {
       dispatch({
@@ -19979,8 +20433,8 @@ const PaymentMethodSelectModal = ({
 };
 PaymentMethodSelectModal.viewId = "payment-method-select";
 
-function _extends$h() {
-  _extends$h = Object.assign || function (target) {
+function _extends$i() {
+  _extends$i = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -19994,7 +20448,7 @@ function _extends$h() {
     return target;
   };
 
-  return _extends$h.apply(this, arguments);
+  return _extends$i.apply(this, arguments);
 }
 
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -20178,7 +20632,7 @@ function render(props, propsBag, defaultTag, features, visible) {
     return match(strategy, (_match = {}, _match[RenderStrategy.Unmount] = function () {
       return null;
     }, _match[RenderStrategy.Hidden] = function () {
-      return _render(_extends$h({}, _rest, {
+      return _render(_extends$i({}, _rest, {
         hidden: true,
         style: {
           display: 'none'
@@ -20706,7 +21160,7 @@ function TransitionChild(props) {
   var passthroughProps = rest;
   return React__default['default'].createElement(NestingContext.Provider, {
     value: nesting
-  }, render(_extends$h({}, passthroughProps, propsWeControl), propsBag, DEFAULT_TRANSITION_CHILD_TAG, TransitionChildRenderFeatures, state === TreeStates.Visible));
+  }, render(_extends$i({}, passthroughProps, propsWeControl), propsBag, DEFAULT_TRANSITION_CHILD_TAG, TransitionChildRenderFeatures, state === TreeStates.Visible));
 }
 
 function Transition(props) {
@@ -20750,7 +21204,7 @@ function Transition(props) {
     value: nestingBag
   }, React__default['default'].createElement(TransitionContext.Provider, {
     value: transitionBag
-  }, render(_extends$h({}, sharedProps, {
+  }, render(_extends$i({}, sharedProps, {
     as: React.Fragment,
     children: React__default['default'].createElement(TransitionChild, Object.assign({}, sharedProps, passthroughProps))
   }), propsBag, React.Fragment, TransitionChildRenderFeatures, state === TreeStates.Visible)));
@@ -20877,12 +21331,12 @@ var ActionTypes;
 })(ActionTypes || (ActionTypes = {}));
 
 (_reducers = {}, _reducers[ActionTypes.CloseMenu] = function (state) {
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     activeItemIndex: null,
     menuState: MenuStates.Closed
   });
 }, _reducers[ActionTypes.OpenMenu] = function (state) {
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     menuState: MenuStates.Open
   });
 }, _reducers[ActionTypes.GoToItem] = function (state, action) {
@@ -20901,7 +21355,7 @@ var ActionTypes;
     }
   });
   if (state.searchQuery === '' && state.activeItemIndex === activeItemIndex) return state;
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     searchQuery: '',
     activeItemIndex: activeItemIndex
   });
@@ -20912,19 +21366,19 @@ var ActionTypes;
 
     return ((_item$dataRef$current = item.dataRef.current.textValue) == null ? void 0 : _item$dataRef$current.startsWith(searchQuery)) && !item.dataRef.current.disabled;
   });
-  if (match === -1 || match === state.activeItemIndex) return _extends$h({}, state, {
+  if (match === -1 || match === state.activeItemIndex) return _extends$i({}, state, {
     searchQuery: searchQuery
   });
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     searchQuery: searchQuery,
     activeItemIndex: match
   });
 }, _reducers[ActionTypes.ClearSearch] = function (state) {
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     searchQuery: ''
   });
 }, _reducers[ActionTypes.RegisterItem] = function (state, action) {
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     items: [].concat(state.items, [{
       id: action.id,
       dataRef: action.dataRef
@@ -20937,7 +21391,7 @@ var ActionTypes;
     return a.id === action.id;
   });
   if (idx !== -1) nextItems.splice(idx, 1);
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     items: nextItems,
     activeItemIndex: function () {
       if (idx === state.activeItemIndex) return null;
@@ -20976,19 +21430,19 @@ var ActionTypes$1;
 (_reducers$1 = {}, _reducers$1[ActionTypes$1.CloseListbox] = function (state) {
   if (state.disabled) return state;
   if (state.listboxState === ListboxStates.Closed) return state;
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     activeOptionIndex: null,
     listboxState: ListboxStates.Closed
   });
 }, _reducers$1[ActionTypes$1.OpenListbox] = function (state) {
   if (state.disabled) return state;
   if (state.listboxState === ListboxStates.Open) return state;
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     listboxState: ListboxStates.Open
   });
 }, _reducers$1[ActionTypes$1.SetDisabled] = function (state, action) {
   if (state.disabled === action.disabled) return state;
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     disabled: action.disabled
   });
 }, _reducers$1[ActionTypes$1.GoToOption] = function (state, action) {
@@ -21009,7 +21463,7 @@ var ActionTypes$1;
     }
   });
   if (state.searchQuery === '' && state.activeOptionIndex === activeOptionIndex) return state;
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     searchQuery: '',
     activeOptionIndex: activeOptionIndex
   });
@@ -21022,10 +21476,10 @@ var ActionTypes$1;
 
     return !option.dataRef.current.disabled && ((_option$dataRef$curre = option.dataRef.current.textValue) == null ? void 0 : _option$dataRef$curre.startsWith(searchQuery));
   });
-  if (match === -1 || match === state.activeOptionIndex) return _extends$h({}, state, {
+  if (match === -1 || match === state.activeOptionIndex) return _extends$i({}, state, {
     searchQuery: searchQuery
   });
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     searchQuery: searchQuery,
     activeOptionIndex: match
   });
@@ -21033,11 +21487,11 @@ var ActionTypes$1;
   if (state.disabled) return state;
   if (state.listboxState === ListboxStates.Closed) return state;
   if (state.searchQuery === '') return state;
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     searchQuery: ''
   });
 }, _reducers$1[ActionTypes$1.RegisterOption] = function (state, action) {
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     options: [].concat(state.options, [{
       id: action.id,
       dataRef: action.dataRef
@@ -21050,7 +21504,7 @@ var ActionTypes$1;
     return a.id === action.id;
   });
   if (idx !== -1) nextOptions.splice(idx, 1);
-  return _extends$h({}, state, {
+  return _extends$i({}, state, {
     options: nextOptions,
     activeOptionIndex: function () {
       if (idx === state.activeOptionIndex) return null;
@@ -21111,18 +21565,18 @@ const getPaymentCardIcon = name => {
   }));
 };
 
-var _path$f;
+var _path$g;
 
-function _extends$g() { _extends$g = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
+function _extends$h() { _extends$h = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
 
 function SvgChevronRight(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
     className: "plc-w-6 plc-h-6",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -21338,18 +21792,18 @@ const SavedItems = ({
   });
 };
 
-var _path$e;
+var _path$f;
 
-function _extends$f() { _extends$f = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
+function _extends$g() { _extends$g = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
 
 function SvgRefresh(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
     className: "plc-w-4 plc-h-4 plc-mr-1",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$f || (_path$f = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -21357,35 +21811,35 @@ function SvgRefresh(props) {
   })));
 }
 
-var _path$d;
+var _path$e;
 
-function _extends$e() { _extends$e = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
+function _extends$f() { _extends$f = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
 
 function SvgCalendar(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
     xmlns: "http://www.w3.org/2000/svg",
     className: "plc-h-4 plc-w-4 plc-mr-1",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$e || (_path$e = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z",
     clipRule: "evenodd"
   })));
 }
 
-var _path$c;
+var _path$d;
 
-function _extends$d() { _extends$d = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
+function _extends$e() { _extends$e = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
 
 function SvgPlus(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
     className: "plc-w-5 plc-h-5",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
-  }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$d || (_path$d = /*#__PURE__*/React__namespace.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
@@ -21393,17 +21847,17 @@ function SvgPlus(props) {
   })));
 }
 
-var _path$b;
+var _path$c;
 
-function _extends$c() { _extends$c = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
+function _extends$d() { _extends$d = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
 
 function SvgCheckMark(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
     className: "plc-w-4 plc-h-4 plc-mr-1",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$c || (_path$c = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
     clipRule: "evenodd"
@@ -21698,13 +22152,31 @@ Accordion.item = function AccordionItem({
   }, content)) : null;
 };
 
+var _path$b;
+
+function _extends$c() { _extends$c = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
+
+function SvgExit(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
+    className: "plc-w-6 plc-h-6",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor"
+  }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+  })));
+}
+
 var _path$a;
 
 function _extends$b() { _extends$b = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
 
-function SvgExit(props) {
+function SvgUser(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
-    className: "plc-w-6 plc-h-6",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -21713,7 +22185,7 @@ function SvgExit(props) {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    d: "M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+    d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zm-4 7a7 7 0 00-7 7h14a7 7 0 00-7-7z"
   })));
 }
 
@@ -21721,9 +22193,10 @@ var _path$9;
 
 function _extends$a() { _extends$a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
 
-function SvgUser(props) {
+function SvgNewsletter(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
     xmlns: "http://www.w3.org/2000/svg",
+    className: "plc-h-5 plc-w-5",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
@@ -21731,7 +22204,7 @@ function SvgUser(props) {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zm-4 7a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+    d: "M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
   })));
 }
 
@@ -21739,10 +22212,10 @@ var _path$8;
 
 function _extends$9() { _extends$9 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
 
-function SvgNewsletter(props) {
+function SvgDocument(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
     xmlns: "http://www.w3.org/2000/svg",
-    className: "plc-h-5 plc-w-5",
+    className: "plc-h-6 plc-w-6 plc-mr-2",
     fill: "none",
     viewBox: "0 0 24 24",
     stroke: "currentColor"
@@ -21750,7 +22223,7 @@ function SvgNewsletter(props) {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    d: "M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
+    d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
   })));
 }
 
@@ -21918,9 +22391,11 @@ const DonationsMenu = () => {
 };
 
 function getDonationSubs() {
-  var _window$Pelcro$subscr, _window$Pelcro$subscr2, _window$Pelcro$subscr3;
+  var _window$Pelcro$subscr, _window$Pelcro$subscr2, _window$Pelcro$subscr3, _window$Pelcro$user$r, _window$Pelcro$user$r2;
 
-  return (_window$Pelcro$subscr = (_window$Pelcro$subscr2 = window.Pelcro.subscription) === null || _window$Pelcro$subscr2 === void 0 ? void 0 : (_window$Pelcro$subscr3 = _window$Pelcro$subscr2.list()) === null || _window$Pelcro$subscr3 === void 0 ? void 0 : _window$Pelcro$subscr3.filter(sub => sub.plan.is_donation)) !== null && _window$Pelcro$subscr !== void 0 ? _window$Pelcro$subscr : [];
+  const donations = (_window$Pelcro$subscr = (_window$Pelcro$subscr2 = window.Pelcro.subscription) === null || _window$Pelcro$subscr2 === void 0 ? void 0 : (_window$Pelcro$subscr3 = _window$Pelcro$subscr2.list()) === null || _window$Pelcro$subscr3 === void 0 ? void 0 : _window$Pelcro$subscr3.filter(sub => sub.plan.is_donation && !sub.is_gift_donor)) !== null && _window$Pelcro$subscr !== void 0 ? _window$Pelcro$subscr : [];
+  const canceledDonations = (_window$Pelcro$user$r = (_window$Pelcro$user$r2 = window.Pelcro.user.read().expired_subscriptions) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.filter(sub => sub.plan.is_donation && !sub.is_gift_donor)) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : [];
+  return [...donations, ...canceledDonations];
 }
 
 function formatStartDate(date) {
@@ -21928,6 +22403,138 @@ function formatStartDate(date) {
   return new Intl.DateTimeFormat("en-CA").format(startDate);
 }
 
+const InvoicesMenu = props => {
+  const {
+    t
+  } = useTranslation("dashboard");
+  return /*#__PURE__*/React__default['default'].createElement("table", {
+    className: "plc-w-full plc-table-fixed"
+  }, /*#__PURE__*/React__default['default'].createElement("thead", {
+    className: "plc-text-xs plc-font-semibold plc-tracking-wider plc-text-gray-400 plc-uppercase "
+  }, /*#__PURE__*/React__default['default'].createElement("tr", null, /*#__PURE__*/React__default['default'].createElement("th", {
+    className: "plc-w-4/12 "
+  }, t("labels.details")), /*#__PURE__*/React__default['default'].createElement("th", {
+    className: "plc-w-4/12 "
+  }, t("labels.status.title")), /*#__PURE__*/React__default['default'].createElement("th", {
+    className: "plc-w-3/12 "
+  }, t("labels.actions")))), /*#__PURE__*/React__default['default'].createElement("tbody", null, /*#__PURE__*/React__default['default'].createElement("tr", {
+    className: "plc-h-4"
+  }), /*#__PURE__*/React__default['default'].createElement(InvoicesItems, props)));
+};
+
+const InvoicesItems = () => {
+  var _window$Pelcro$invoic, _window$Pelcro$invoic2;
+
+  const {
+    t
+  } = useTranslation("dashboard");
+  const {
+    setInvoice,
+    switchView
+  } = usePelcro();
+  const invoices = (_window$Pelcro$invoic = (_window$Pelcro$invoic2 = window.Pelcro.invoice.list()) === null || _window$Pelcro$invoic2 === void 0 ? void 0 : _window$Pelcro$invoic2.filter(invoice => invoice.total > 0)) !== null && _window$Pelcro$invoic !== void 0 ? _window$Pelcro$invoic : [];
+
+  const showInvoiceDetails = event => {
+    if (setInvoice(event.target.dataset.id)) {
+      switchView("invoice-details");
+    }
+  };
+
+  if (invoices.length === 0) return null;
+  return invoices.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()).map(invoice => {
+    const invoiceStatus = getInvoiceStatus(invoice);
+    const formattedCreationDate = new Intl.DateTimeFormat("en-CA").format(new Date(invoice.created_at));
+    return /*#__PURE__*/React__default['default'].createElement("tr", {
+      key: invoice.id,
+      className: `plc-w-full plc-align-middle plc-cursor-pointer accordion-header hover:plc-bg-gray-50`
+    }, /*#__PURE__*/React__default['default'].createElement("td", {
+      className: "plc-truncate"
+    }, /*#__PURE__*/React__default['default'].createElement("span", {
+      className: "plc-font-semibold plc-text-gray-500"
+    }, `#${invoice.id}`), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("span", {
+      className: "plc-text-sm plc-text-gray-500"
+    }, getFormattedPriceByLocal(invoice.total, invoice.currency, getPageOrDefaultLanguage())), /*#__PURE__*/React__default['default'].createElement("br", null), /*#__PURE__*/React__default['default'].createElement("span", {
+      className: "plc-text-sm plc-text-gray-500"
+    }, formattedCreationDate)), /*#__PURE__*/React__default['default'].createElement("td", {
+      className: "plc-py-2"
+    }, /*#__PURE__*/React__default['default'].createElement("span", {
+      className: `plc-inline-flex plc-p-1 plc-text-xs plc-font-semibold ${invoiceStatus.bgColor} plc-uppercase ${invoiceStatus.textColor} plc-rounded-lg`
+    }, invoiceStatus.icon, invoiceStatus.title)), /*#__PURE__*/React__default['default'].createElement("td", null, /*#__PURE__*/React__default['default'].createElement(Button, {
+      variant: "ghost",
+      className: "plc-text-blue-400 focus:plc-ring-blue-400 pelcro-dashboard-view-invoice-button",
+      icon: /*#__PURE__*/React__default['default'].createElement(SvgDocument, {
+        className: "plc-w-4 plc-h-4"
+      }),
+      onClick: showInvoiceDetails,
+      "data-id": invoice.id
+    }, t("labels.view"))));
+  });
+};
+
+function getInvoiceStatus(invoice) {
+  const translations = i18next.t("dashboard:labels", {
+    returnObjects: true
+  });
+
+  switch (invoice.status) {
+    case "paid":
+      return {
+        textColor: "plc-text-green-700",
+        bgColor: "plc-bg-green-100",
+        icon: /*#__PURE__*/React__default['default'].createElement(SvgCheckMark, null),
+        title: translations.paid
+      };
+
+    case "past_due":
+      return {
+        textColor: "plc-text-orange-700",
+        bgColor: "plc-bg-orange-100",
+        icon: /*#__PURE__*/React__default['default'].createElement(SvgExclamation, null),
+        title: translations.pastDue
+      };
+
+    case "open":
+      return {
+        textColor: "plc-text-yellow-700",
+        bgColor: "plc-bg-yellow-100",
+        icon: /*#__PURE__*/React__default['default'].createElement(SvgExclamation, null),
+        title: translations.open
+      };
+
+    case "draft":
+      return {
+        textColor: "plc-text-blue-700",
+        bgColor: "plc-bg-blue-100",
+        icon: /*#__PURE__*/React__default['default'].createElement(SvgEdit, null),
+        title: translations.draft
+      };
+
+    case "scheduled":
+      return {
+        textColor: "plc-text-blue-700",
+        bgColor: "plc-bg-blue-100",
+        icon: /*#__PURE__*/React__default['default'].createElement(SvgCalendar, null),
+        title: translations.scheduled
+      };
+
+    case "uncollectible":
+      return {
+        textColor: "plc-text-red-700",
+        bgColor: "plc-bg-red-100",
+        icon: /*#__PURE__*/React__default['default'].createElement(SvgXIconSolid, null),
+        title: translations.uncollectible
+      };
+
+    case "void":
+      return {
+        textColor: "plc-text-gray-700",
+        bgColor: "plc-bg-gray-100",
+        icon: /*#__PURE__*/React__default['default'].createElement(SvgXIconSolid, null),
+        title: translations.void
+      };
+  }
+}
+
 const SUB_MENUS = {
   PROFILE: "profile",
   SUBSCRIPTIONS: "subscriptions",
@@ -21936,6 +22543,7 @@ const SUB_MENUS = {
   ADDRESSES: "addresses",
   GIFTS: "gifts",
   ORDERS: "orders",
+  INVOICES: "invoices",
   SAVED_ITEMS: "saved-items"
 };
 /**
@@ -22478,6 +23086,12 @@ class Dashboard extends React.Component {
       icon: /*#__PURE__*/React__default['default'].createElement(SvgShopping, null),
       title: this.locale("labels.orders.label"),
       content: /*#__PURE__*/React__default['default'].createElement(OrdersMenu, null)
+    }), /*#__PURE__*/React__default['default'].createElement(Accordion.item, {
+      show: hasInvoices(),
+      name: SUB_MENUS.INVOICES,
+      icon: /*#__PURE__*/React__default['default'].createElement(SvgDocument, null),
+      title: this.locale("labels.invoices"),
+      content: /*#__PURE__*/React__default['default'].createElement(InvoicesMenu, null)
     }), /*#__PURE__*/React__default['default'].createElement(Accordion.item, {
       name: SUB_MENUS.SAVED_ITEMS,
       icon: /*#__PURE__*/React__default['default'].createElement(SvgBookmark, null),
@@ -22493,11 +23107,19 @@ class Dashboard extends React.Component {
 
 }
 
+function hasInvoices() {
+  var _window$Pelcro$invoic, _window$Pelcro$invoic2;
+
+  const invoices = (_window$Pelcro$invoic = (_window$Pelcro$invoic2 = window.Pelcro.invoice.list()) === null || _window$Pelcro$invoic2 === void 0 ? void 0 : _window$Pelcro$invoic2.filter(invoice => invoice.total > 0)) !== null && _window$Pelcro$invoic !== void 0 ? _window$Pelcro$invoic : [];
+  return invoices.length > 0;
+}
+
 function hasDonationSubs() {
-  var _window$Pelcro$subscr, _window$Pelcro$subscr2, _window$Pelcro$subscr3;
+  var _window$Pelcro$subscr, _window$Pelcro$subscr2, _window$Pelcro$subscr3, _window$Pelcro$user$r4, _window$Pelcro$user$r5;
 
-  const donations = (_window$Pelcro$subscr = (_window$Pelcro$subscr2 = window.Pelcro.subscription) === null || _window$Pelcro$subscr2 === void 0 ? void 0 : (_window$Pelcro$subscr3 = _window$Pelcro$subscr2.list()) === null || _window$Pelcro$subscr3 === void 0 ? void 0 : _window$Pelcro$subscr3.filter(sub => sub.plan.is_donation)) !== null && _window$Pelcro$subscr !== void 0 ? _window$Pelcro$subscr : [];
-  return donations.length > 0;
+  const donations = (_window$Pelcro$subscr = (_window$Pelcro$subscr2 = window.Pelcro.subscription) === null || _window$Pelcro$subscr2 === void 0 ? void 0 : (_window$Pelcro$subscr3 = _window$Pelcro$subscr2.list()) === null || _window$Pelcro$subscr3 === void 0 ? void 0 : _window$Pelcro$subscr3.filter(sub => sub.plan.is_donation && !sub.is_gift_donor)) !== null && _window$Pelcro$subscr !== void 0 ? _window$Pelcro$subscr : [];
+  const canceledDonations = (_window$Pelcro$user$r4 = (_window$Pelcro$user$r5 = window.Pelcro.user.read().expired_subscriptions) === null || _window$Pelcro$user$r5 === void 0 ? void 0 : _window$Pelcro$user$r5.filter(sub => sub.plan.is_donation && !sub.is_gift_donor)) !== null && _window$Pelcro$user$r4 !== void 0 ? _window$Pelcro$user$r4 : [];
+  return donations.length > 0 || canceledDonations.length > 0;
 }
 
 const DashboardWithTrans = withTranslation("dashboard")(Dashboard);
@@ -22527,7 +23149,7 @@ const DashboardOpenButton = () => {
 };
 DashboardOpenButton.viewId = "dashboard-open";
 
-const initialState$1 = {
+const initialState$2 = {
   imageSrc: null,
   crop: {
     x: 0,
@@ -22541,10 +23163,10 @@ const initialState$1 = {
     content: ""
   }
 };
-const store$1 = /*#__PURE__*/React.createContext(initialState$1);
+const store$2 = /*#__PURE__*/React.createContext(initialState$2);
 const {
-  Provider: Provider$1
-} = store$1;
+  Provider: Provider$2
+} = store$2;
 
 const ProfilePicChangeContainer = ({
   style,
@@ -22678,21 +23300,21 @@ const ProfilePicChangeContainer = ({
       default:
         return state;
     }
-  }, initialState$1);
+  }, initialState$2);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-profile-picture-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$1, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$2, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$1,
+    store: store$2,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$1
+    store: store$2
   })));
 };
 /**
@@ -22754,7 +23376,7 @@ const ProfilePicChangeButton = ({
       isSubmitting
     },
     dispatch
-  } = React.useContext(store$1);
+  } = React.useContext(store$2);
   const {
     t
   } = useTranslation("userEdit");
@@ -24122,7 +24744,7 @@ const ProfilePicChangeCropper = ({
       zoom
     },
     dispatch
-  } = React.useContext(store$1);
+  } = React.useContext(store$2);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: `plc-relative plc-w-full plc-h-52 sm:plc-h-96 ${className}`
   }, /*#__PURE__*/React__default['default'].createElement(Cropper, Object.assign({
@@ -24164,7 +24786,7 @@ const ProfilePicChangeZoom = ({
       zoom
     },
     dispatch
-  } = React.useContext(store$1);
+  } = React.useContext(store$2);
   const {
     t
   } = useTranslation("userEdit");
@@ -24216,7 +24838,7 @@ const ProfilePicChangeSelectButton = ({
     state: {
       isSubmitting
     }
-  } = React.useContext(store$1);
+  } = React.useContext(store$2);
   const {
     t
   } = useTranslation("userEdit");
@@ -24258,7 +24880,7 @@ const ProfilePicChangeRemoveButton = ({
     state: {
       isSubmitting
     }
-  } = React.useContext(store$1);
+  } = React.useContext(store$2);
   const {
     t
   } = useTranslation("userEdit");
@@ -24281,7 +24903,7 @@ const ProfilePicChangeWrapper = () => {
     state: {
       imageSrc
     }
-  } = React.useContext(store$1);
+  } = React.useContext(store$2);
   const {
     t
   } = useTranslation("userEdit");
@@ -24343,17 +24965,17 @@ function ProfilePicChangeModal({
 }
 ProfilePicChangeModal.viewId = "profile-picture";
 
-const initialState = {
+const initialState$1 = {
   isSubmitting: false,
   alert: {
     type: "error",
     content: ""
   }
 };
-const store = /*#__PURE__*/React.createContext(initialState);
+const store$1 = /*#__PURE__*/React.createContext(initialState$1);
 const {
-  Provider
-} = store;
+  Provider: Provider$1
+} = store$1;
 
 const EmailVerifyContainer = ({
   style,
@@ -24416,21 +25038,21 @@ const EmailVerifyContainer = ({
       default:
         return state;
     }
-  }, initialState);
+  }, initialState$1);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-email-verify-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$1, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store,
+    store: store$1,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store
+    store: store$1
   })));
 };
 
@@ -24444,7 +25066,7 @@ const EmailVerifyResendButton = ({
     state: {
       isSubmitting
     }
-  } = React.useContext(store);
+  } = React.useContext(store$1);
   const {
     t
   } = useTranslation("verifyEmail");
@@ -24519,6 +25141,235 @@ const EmailVerifyModal = ({
 };
 EmailVerifyModal.viewId = "email-verify";
 
+const InvoicePaymentContainer = props => /*#__PURE__*/React__default['default'].createElement(PaymentMethodContainer, Object.assign({
+  type: "invoicePayment",
+  className: "pelcro-invoice-payment-container"
+}, props));
+
+const InvoicePaymentView = props => {
+  const {
+    t
+  } = useTranslation("payment");
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    id: "pelcro-invoice-payment-view"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-mb-6 plc-text-2xl plc-font-semibold plc-text-center plc-text-gray-900 pelcro-title-wrapper"
+  }, /*#__PURE__*/React__default['default'].createElement("h4", null, t("labels.checkout.title"))), /*#__PURE__*/React__default['default'].createElement("form", {
+    action: "javascript:void(0);",
+    className: "plc-mt-2 pelcro-form"
+  }, /*#__PURE__*/React__default['default'].createElement(PaymentMethodView, Object.assign({
+    type: "invoicePayment",
+    showCoupon: false,
+    showExternalPaymentMethods: true
+  }, props))));
+};
+
+const InvoicePaymentModal = ({
+  onDisplay,
+  onClose,
+  ...otherProps
+}) => {
+  const {
+    switchView
+  } = usePelcro();
+
+  const onSuccess = () => {
+    var _otherProps$onSuccess;
+
+    (_otherProps$onSuccess = otherProps.onSuccess) === null || _otherProps$onSuccess === void 0 ? void 0 : _otherProps$onSuccess.call(otherProps);
+    return switchView("subscription-success");
+  };
+
+  return /*#__PURE__*/React__default['default'].createElement(Modal, {
+    id: "pelcro-invoice-payment-modal",
+    onDisplay: onDisplay,
+    onClose: onClose
+  }, /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(InvoicePaymentView, Object.assign({}, otherProps, {
+    onSuccess: onSuccess
+  }))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null, /*#__PURE__*/React__default['default'].createElement(Authorship, null)));
+};
+InvoicePaymentModal.viewId = "invoice-payment";
+
+const invoicePaymentSubmitButton = props => {
+  return /*#__PURE__*/React__default['default'].createElement(SubmitPaymentMethod, props);
+};
+
+const initialState = {};
+const store = /*#__PURE__*/React.createContext(initialState);
+const {
+  Provider
+} = store;
+
+const InvoiceDetailsContainer = ({
+  style,
+  className = "",
+  onSuccess = () => {},
+  children,
+  ...props
+}) => {
+  const onPayButtonClick = () => {
+    return onSuccess();
+  };
+
+  const [state, dispatch] = useReducerWithSideEffects((state, action) => {
+    switch (action.type) {
+      case HANDLE_SUBMIT:
+        return lib_4((state, dispatch) => onPayButtonClick());
+
+      default:
+        return state;
+    }
+  }, initialState);
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    style: { ...style
+    },
+    className: `pelcro-container pelcro-invoice-details-container ${className}`
+  }, /*#__PURE__*/React__default['default'].createElement(Provider, {
+    value: {
+      state,
+      dispatch
+    }
+  }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
+    store,
+    key: i
+  })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
+    store
+  })));
+};
+
+const InvoiceDetailsDownloadButton = ({
+  name,
+  url,
+  className,
+  ...otherProps
+}) => {
+  const {
+    t
+  } = useTranslation("invoiceDetails");
+  const {
+    invoice
+  } = usePelcro();
+  return /*#__PURE__*/React__default['default'].createElement(Link, Object.assign({
+    className: `plc-px-6 plc-py-2 plc-uppercase plc-bg-transparent plc-text-primary-500 plc-border plc-border-primary-500 plc-rounded focus:plc-outline-none focus:plc-ring-2 focus:plc-ring-primary-300 plc-tracking-wider hover:plc-bg-primary-600 focus:plc-bg-primary-600 hover:plc-text-white focus:plc-text-white hover:plc-shadow-none plc-no-underline ${className}`,
+    id: "pelcro-download-invoice-link",
+    href: url !== null && url !== void 0 ? url : invoice === null || invoice === void 0 ? void 0 : invoice.invoice_pdf,
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, otherProps), name !== null && name !== void 0 ? name : t("buttons.download"));
+};
+
+const InvoiceDetailsPayButton = ({
+  name,
+  onClick,
+  ...otherProps
+}) => {
+  const {
+    dispatch
+  } = React.useContext(store);
+  const {
+    t
+  } = useTranslation("invoiceDetails");
+  return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
+    onClick: () => {
+      dispatch({
+        type: HANDLE_SUBMIT
+      });
+      onClick === null || onClick === void 0 ? void 0 : onClick();
+    }
+  }, otherProps), name !== null && name !== void 0 ? name : t("buttons.pay"));
+};
+
+const InvoiceDetailsView = props => {
+  const {
+    t
+  } = useTranslation("invoiceDetails");
+  const {
+    invoice
+  } = usePelcro();
+  const showPayButton = canPayInvoice(invoice);
+  const creationDate = new Date(invoice === null || invoice === void 0 ? void 0 : invoice.created_at);
+  const formattedCreationDate = new Intl.DateTimeFormat("en-CA").format(creationDate);
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    id: "pelcro-invoice-details-view"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-mb-6 plc-text-center plc-text-gray-900 pelcro-title-wrapper"
+  }, /*#__PURE__*/React__default['default'].createElement("h4", {
+    className: "plc-text-2xl plc-font-semibold"
+  }, t("title"))), /*#__PURE__*/React__default['default'].createElement("form", {
+    action: "javascript:void(0);",
+    className: "plc-mt-2 pelcro-form"
+  }, /*#__PURE__*/React__default['default'].createElement(InvoiceDetailsContainer, props, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-mt-5 pelcro-invoice-summary-wrapper"
+  }, /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "plc-font-bold pelcro-invoice-summary-title"
+  }, t("labels.summary")), invoice && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "plc-mr-2 pelcro-invoice-creation-date"
+  }, `${t("labels.creationDate")} ${formattedCreationDate}`), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-flex plc-items-center plc-pt-2 plc-mt-2 plc-border-t plc-border-gray-400 plc-min-h-12 plc-justify-between pelcro-invoice-plan-wrapper"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-break-words pelcro-invoice-plan-name"
+  }, invoice.plan.nickname), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-text-center pelcro-invoice-summary-price"
+  }, calcAndFormatItemsTotal([invoice.plan], invoice.currency))), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-flex plc-justify-end plc-pt-2 plc-mt-2 plc-font-bold plc-border-t plc-border-gray-400 pelcro-invoice-total-wrapper"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-mr-2 plc-flex plc-flex-col"
+  }, /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "pelcro-invoice-total-text"
+  }, t("labels.total")), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "pelcro-invoice-total-text"
+  }, t("labels.amountPaid")), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "plc-font-semibold pelcro-invoice-total-text"
+  }, t("labels.amountDue"))), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-flex plc-flex-col"
+  }, /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "pelcro-invoice-total"
+  }, getFormattedPriceByLocal(invoice.total, invoice.currency, getPageOrDefaultLanguage())), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "pelcro-invoice-total"
+  }, getFormattedPriceByLocal(invoice.amount_paid, invoice.currency, getPageOrDefaultLanguage())), /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "plc-font-semibold pelcro-invoice-total"
+  }, getFormattedPriceByLocal(invoice.amount_remaining, invoice.currency, getPageOrDefaultLanguage())))))), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-flex plc-items-center plc-justify-center plc-mt-4"
+  }, /*#__PURE__*/React__default['default'].createElement(InvoiceDetailsDownloadButton, {
+    url: invoice === null || invoice === void 0 ? void 0 : invoice.invoice_pdf,
+    className: "plc-w-full plc-text-center"
+  }), showPayButton && /*#__PURE__*/React__default['default'].createElement(InvoiceDetailsPayButton, {
+    role: "submit",
+    className: "plc-ml-4 plc-w-full",
+    id: "pelcro-submit"
+  })))));
+};
+
+function canPayInvoice(invoice) {
+  return (invoice === null || invoice === void 0 ? void 0 : invoice.status) === "open" || (invoice === null || invoice === void 0 ? void 0 : invoice.status) === "past_due";
+}
+
+const InvoiceDetailsModal = ({
+  onDisplay,
+  onClose,
+  ...otherProps
+}) => {
+  const {
+    switchToPaymentView
+  } = usePelcro();
+
+  const onSuccess = () => {
+    var _otherProps$onSuccess;
+
+    (_otherProps$onSuccess = otherProps.onSuccess) === null || _otherProps$onSuccess === void 0 ? void 0 : _otherProps$onSuccess.call(otherProps);
+    switchToPaymentView();
+  };
+
+  return /*#__PURE__*/React__default['default'].createElement(Modal, {
+    onDisplay: onDisplay,
+    onClose: onClose,
+    id: "pelcro-invoice-details-modal"
+  }, /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(InvoiceDetailsView, Object.assign({}, otherProps, {
+    onSuccess: onSuccess
+  }))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null, /*#__PURE__*/React__default['default'].createElement(Authorship, null)));
+};
+InvoiceDetailsModal.viewId = "invoice-details";
+
 exports.AddressCreateCity = AddressCreateCity;
 exports.AddressCreateContainer = AddressCreateContainer;
 exports.AddressCreateCountrySelect = AddressCreateCountrySelect;
@@ -24594,6 +25445,14 @@ exports.GiftRedeemSubmitButton = GiftRedeemSubmitButton;
 exports.GiftRedeemView = GiftRedeemView;
 exports.GoogleLoginButton = GoogleLoginButton;
 exports.Input = Input;
+exports.InvoiceDetailsContainer = InvoiceDetailsContainer;
+exports.InvoiceDetailsDownloadButton = InvoiceDetailsDownloadButton;
+exports.InvoiceDetailsModal = InvoiceDetailsModal;
+exports.InvoiceDetailsPayButton = InvoiceDetailsPayButton;
+exports.InvoiceDetailsView = InvoiceDetailsView;
+exports.InvoicePaymentContainer = InvoicePaymentContainer;
+exports.InvoicePaymentModal = InvoicePaymentModal;
+exports.InvoicePaymentView = InvoicePaymentView;
 exports.Link = Link;
 exports.LoginButton = LoginButton;
 exports.LoginContainer = LoginContainer;
@@ -24709,6 +25568,7 @@ exports.authenticatedButtons = authenticatedButtons;
 exports.i18n = i18next;
 exports.initButtons = init$1;
 exports.initContentEntitlement = init;
+exports.invoicePaymentSubmitButton = invoicePaymentSubmitButton;
 exports.notify = notify;
 exports.unauthenticatedButtons = unauthenticatedButtons;
 exports.usePelcro = usePelcro;