> ## Documentation Index
> Fetch the complete documentation index at: https://memberful.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Checkout experience
> Preview Memberful's branded, mobile-ready checkout flows for subscriptions, group plans, and choose-what-you-pay using a test credit card before going live.
export const RelatedDocs = ({link1, link2, link3, link4, link5, link6, link7, link8, link9, link10, className = ""}) => {
const links = [link1, link2, link3, link4, link5, link6, link7, link8, link9, link10].filter(Boolean);
if (!links.length) return null;
return ;
};
export const MemberfulOverlay = () => {
useEffect(() => {
if (typeof navigator !== "undefined") {
const ua = navigator.userAgent.toLowerCase();
const isFirefox = ua.includes("firefox");
const isSafari = ua.includes("safari") && !ua.includes("chrome");
const isBrave = navigator.brave && navigator.brave.isBrave;
const isMobile = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i).test(ua);
const browserSupported = !isFirefox && !isSafari && !isBrave && !isMobile;
if (!browserSupported) {
console.log("Browser does not support Memberful overlay (Safari/Firefox/Brave/Mobile)");
return;
}
}
const existingScript = document.querySelector("script[data-memberful-embed]");
if (existingScript) {
if (window.Memberful && typeof window.Memberful.setup === "function") {
window.Memberful.setup({
site: ["https://demo.memberful.com"]
});
if (window.Memberful.detectSupport) {
window.Memberful.detectSupport();
}
}
return;
}
const script = document.createElement("script");
script.src = "https://js.memberful.com/embed.js";
script.async = true;
script.setAttribute("data-memberful-embed", "true");
script.onload = () => {
console.log("Memberful script loaded successfully");
if (window.Memberful && typeof window.Memberful.setup === "function") {
window.Memberful.setup({
site: ["https://demo.memberful.com"]
});
console.log("Memberful initialized");
if (window.Memberful.detectSupport) {
setTimeout(() => {
window.Memberful.detectSupport();
}, 500);
}
} else {
console.log("Memberful object not found after load");
}
};
script.onerror = error => {
console.error("Failed to load Memberful script:", error);
};
document.head.appendChild(script);
console.log("Added Memberful script tag to document");
return () => {};
}, []);
return null;
};
export const MemberfulCheckoutCardContainer = ({children}) => {
return
{children}
;
};
export const MemberfulCheckoutCard = ({title, description, href, buttonText = "Subscribe now"}) => {
const [browserSupported] = useState(() => {
if (typeof navigator === "undefined") return true;
const ua = navigator.userAgent.toLowerCase();
const isFirefox = ua.includes("firefox");
const isSafari = ua.includes("safari") && !ua.includes("chrome");
const isBrave = navigator.brave && navigator.brave.isBrave;
const isMobile = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i).test(ua);
return !isFirefox && !isSafari && !isBrave && !isMobile;
});
const linkTarget = browserSupported ? "_self" : "_blank";
const linkRel = browserSupported ? undefined : "noopener noreferrer";
useEffect(() => {
if (browserSupported && window.Memberful && window.Memberful.detectSupport) {
const timeout = setTimeout(() => {
window.Memberful.detectSupport();
}, 100);
return () => clearTimeout(timeout);
}
}, [browserSupported]);
return
{title}
{description}
{buttonText}
{!browserSupported &&
Opens in new window
}
;
};
In this help article, we'll walk you through our two checkout experiences and give you a chance to test our checkout form.
Click one of the plan links below and purchase a test subscription. Use `4242 4242 4242 4242` for the card number. [Learn more about using test credit cards.](/overview/getting-started/make-test-purchases/)
In all browsers, except for Safari, Firefox, and Brave, the Memberful forms will open over your site in an overlay.
From your Memberful dashboard, go to *Website → Checkout* to access our website editor, which lets you customize the payment form and see how it will look across different views and devices.
### Why the overlay is disabled in some scenarios
The Memberful overlay needs to set certain cookies to know if a member is signed in or not. Since it lives on a Memberful subdomain and not on your site, we have to set third-party cookies, which are cookies that belong to a separate domain.
Unfortunately, some advertisers use this same technology to track user data and preferences around the web. Because of privacy concerns, Safari, Firefox, and Brave block all third-party cookies, which is great for protecting your privacy from these advertisers but also harms legitimate use-cases such as ours. This means that on Safari, Firefox, Brave, and on smartphones in general, we'll always show the standalone versions of our forms instead of the overlay.
Incognito / private windows are not supported in any browser, in part because in many cases they block third-party cookies, but also because of other limitations. We can only guarantee that Memberful will work in normal browser windows.
## Standalone desktop experience
The Memberful forms will open in a new browser window in Safari, Firefox, Brave, or when your members are accessing their account via a direct Memberful account link. We also default to the standalone experience on our [hosted subscription page.](/website-builder/pages/subscribe-page/)
***
***
In this standalone experience, visitors can go to your website by clicking your logo in the top left corner of the page, which features a left-facing arrow to indicate that this will take them back to your site.
From your Memberful dashboard, go to *Website → Checkout* to access our website editor, which will allow you to customize the payment form and see how it will look across different views and devices.
## Smartphone experience
The Memberful form will open in a new browser window on all smartphones.
From your Memberful dashboard, go to *Website → Checkout* to access our website editor, which lets you customize the payment form and see how it will look across different views and devices.
## Learn about email validation
Once you leave test mode and [go live with Memberful](/account-management/modes/manage-your-account-in-test-mode/), we'll check for common email address typos in both the Checkout and Gift forms (e.g. gmail.con, gnail.com, gmal.com, hotmal.com, hotmail.con), and suggest corrections. Email addresses in [free registration forms](/member-management/payments-and-access/give-free-access/#enable-free-registration) are not currently validated.
## Learn about address auto-completion
If you [collect addresses in checkout,](/plans/individual-plans/create-a-plan/#enable-address-and-phone-number-collection) your members will see an auto-complete suggestion as they type. This makes checkout faster and easier and lowers the likelihood of mistakes or inaccurate addresses.
## HTTPS and security recommendations
The Memberful service and the Memberful forms are served 100% over HTTPS. This means all Memberful payments are sent to Stripe over a secure connection. However, to protect your website from man-in-the-middle attacks, **we recommend serving the page containing the Memberful forms over HTTPS**. Customers are also generally more comfortable sharing sensitive information on pages visibly served over HTTPS, which can help increase your conversion rate.
See our [enabling SSL documentation](/wordpress-plugin/setup/enable-ssl/) for WordPress instructions and [Stripe's security guide](https://stripe.com/docs/security) for more general HTTPS / SSL instructions.
Memberful is PCI-compliant and secure. We don't store any sensitive customer credit card data and we use a 256-bit SSL connection across the entire service. We also keep geo-redundant backups of all your important customer data. [Learn more about Memberful
security](https://memberful.com/general/security/)