CINXE.COM

<!DOCTYPE html><html lang="en-US"><head><script type="text/javascript" src="https://web-static.archive.org/_static/js/bundle-playback.js?v=7YQSqjSh" charset="utf-8"></script> <script type="text/javascript" src="https://web-static.archive.org/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="https://web-static.archive.org/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("https://developer.paddle.com/guides/how-tos/checkout/paddle-checkout","20211018050537","https://web.archive.org/","web","https://web-static.archive.org/_static/", "1634533537"); </script> <link rel="stylesheet" type="text/css" href="https://web-static.archive.org/_static/css/banner-styles.css?v=p7PEIJWi" /> <link rel="stylesheet" type="text/css" href="https://web-static.archive.org/_static/css/iconochive.css?v=3PDvdIFv" />  <script async="" type="text/javascript">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://web.archive.org/web/20211018050537/https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-TNGJT5N');</script><script async="" id="gtm-script" type="text/javascript">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://web.archive.org/web/20211018050537/https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-5HSBV9H');</script><script defer="" async="" src="/web/20211018050537js_/https://developer.paddle.com/_/assets/js/bugsnag.min.js"></script><script type="text/javascript">try { document.addEventListener("DOMContentLoaded", function(){ // Handler when the DOM is fully loaded document.getElementsByClassName("prompt")[0].setAttribute("class", "st-default-search-input"); document.getElementsByClassName('HubHeaderMobile-sidebar-toggle')[1].addEventListener('click', function(e) {e.preventDefault(); e.stopPropagation()}, false); document.getElementsByClassName("fa-search")[0].classList.add("st-search-show-outputs"); (function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){ (w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t); e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e); })(window,document,'script','//web.archive.org/web/20211018050537/https://s.swiftypecdn.com/install/v2/st.js','_st'); _st('install','jusWYcy9XXtSTwowxhfn','2.0.0'); }); } catch (error) { console.log('Error running custom javascript', error); }</script><script type="text/javascript"> window.__SL = { config: {"ENV":"production","NODE_ENV":"production","RELEASE_STAGE":"production","DEFAULT_LOCALE":"en","APP_NAME":"hub-builder","GTM_KEY":"GTM-TNGJT5N","BUGSNAG_CLIENT":"68b2d22c41911b0c37104e17e26b753c","SL_API_HOST":"https://web.archive.org/web/20211018050537/https://next-api.stoplight.io","SL_PRISM_HOST":"https://web.archive.org/web/20211018050537/https://prism.stoplight.io","redirects":[{"from":"/guides/how-tos/checkout/branded-inline-checkout","to":"/guides/how-tos/checkout/inline-checkout#branded-inline-checkout"}]} }; false </script><script async="" src="/web/20211018050537js_/https://developer.paddle.com/_/assets/search/1.0.96348.js"></script><link rel="preload" as="script" href="/web/20211018050537/https://developer.paddle.com/_/assets/templates/vendors~client-containers-Login~client-containers-Page.58d3df14.js"/><link rel="preload" as="script" href="/web/20211018050537/https://developer.paddle.com/_/assets/templates/vendors~client-containers-Page.ef375bcd.js"/><link rel="preload" as="script" href="/web/20211018050537/https://developer.paddle.com/_/assets/templates/client-containers-Login~client-containers-Page.ac0fbd7d.js"/><link rel="preload" as="script" href="/web/20211018050537/https://developer.paddle.com/_/assets/templates/client-containers-Page.73b64b67.js"/><link rel="preload" as="script" href="/web/20211018050537/https://developer.paddle.com/_/assets/templates/styles.b34d5813.js"/><link rel="preload" as="script" href="/web/20211018050537/https://developer.paddle.com/_/assets/templates/vendors~main.246fd5b0.js"/><link rel="preload" as="script" href="/web/20211018050537/https://developer.paddle.com/_/assets/main.2b0831d0.js"/><link rel="stylesheet" href="/web/20211018050537cs_/https://developer.paddle.com/_/assets/css/semantic.min.css"/><link rel="preload" as="style" href="/web/20211018050537/https://developer.paddle.com/_/assets/main.20395c97.css"/><link rel="stylesheet" href="/web/20211018050537cs_/https://developer.paddle.com/_/assets/main.20395c97.css"/><link rel="preload" as="style" href="/web/20211018050537/https://developer.paddle.com/_/assets/styles.b34d5813.css"/><link rel="stylesheet" href="/web/20211018050537cs_/https://developer.paddle.com/_/assets/styles.b34d5813.css"/><meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><meta name="robots" content="index, follow"/><title>Overlay Checkout - Checkout - How Tos - Guides</title><meta name="application-name" content="" id="application-name"/><meta property="og:site_name" content="" id="og:site_name"/><meta property="og:title" content="Overlay Checkout - Checkout - How Tos - Guides" id="og:title" data-react-helmet="true"/><meta property="og:type" content="website" id="og:type"/><meta name="description" content="Overlay Checkout The Paddle checkout displays a simple and elegant overlay interface by default to take payments for your products or subscription plan..." id="description" data-react-helmet="true"/><meta property="og:description" content="Overlay Checkout The Paddle checkout displays a simple and elegant overlay interface by default to take payments for your products or subscription plan..." id="og:description" data-react-helmet="true"/><link rel="shortcut icon" href="https://web.archive.org/web/20211018050537im_/https://paddle.com/assets/images/favicons/favicon.ico"/><link rel="preload" href="/web/20211018050537/https://developer.paddle.com/_/assets/fonts/icons.woff2?v=5.0.6" as="font" type="font/woff2" crossorigin="anonymous"/><link href="/web/20211018050537/https://developer.paddle.com/_/assets/css/semantic.min.css" rel="preload" as="style"/><link href="/web/20211018050537/https://developer.paddle.com/_/assets/css/custom-theme.96348.css" rel="preload" as="style"/><link href="/web/20211018050537/https://developer.paddle.com/_/assets/css/custom-file.96348.css" rel="preload" as="style"/></head><body><noscript><iframe src="//web.archive.org/web/20211018050537if_/https://www.googletagmanager.com/ns.html?id=GTM-5HSBV9H" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><noscript><iframe src="//web.archive.org/web/20211018050537if_/https://www.googletagmanager.com/ns.html?id=GTM-TNGJT5N" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><link rel="stylesheet" href="/web/20211018050537cs_/https://developer.paddle.com/_/assets/css/custom-theme.96348.css"/><link rel="stylesheet" href="/web/20211018050537cs_/https://developer.paddle.com/_/assets/css/custom-file.96348.css"/><style type="text/css"> @font-face { font-family: 'Icons'; src: url('/web/20211018050537im_/https://developer.paddle.com/_/assets/fonts/icons.woff2?v=5.0.6') format('woff2'), url('/web/20211018050537im_/https://developer.paddle.com/_/assets/fonts/icons.woff?v=5.0.6') format('woff'); font-style: normal; font-weight: normal; font-variant: normal; text-decoration: inherit; text-transform: none; } </style><div id="root"><div class="Hub flex flex-col h-full"><div class="HubHeader print:hidden bg-white border-b border-grey-light"><div class="HubHeader-inner relative hidden sm:flex items-center h-16 p-0"><div class="HubHeaderMobile-sidebar-toggle h-16 w-16 flex items-center justify-center text-2xl is-light"><svg aria-hidden="true" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14 " role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg></div><div class="FormDropdown HubHeaderMobile-title flex-grow text-center font-bold text-xl"><div role="listbox" aria-expanded="false" class="ui floating dropdown FormDropdown-inner" tabindex="0"><div class="text" role="alert" aria-live="polite">Guides</div><i aria-hidden="true" class="dropdown icon"></i><div class="menu transition"><div style="pointer-events:all" role="option" aria-checked="false" aria-selected="false" class="item"><a class="text HubHeaderItem flex items-center text-lg mx-1 px-4 py-2 rounded font-bold with-image is-light hover:text-primary text-black cursor-pointer active" aria-current="true" href="/web/20211018050537/https://developer.paddle.com/"><div class="HubHeaderItem-image flex items-center"><img src="https://web.archive.org/web/20211018050537im_/https://paddle.com/assets/svg/logo-white.svg" alt="logo"/> </div></a></div><div style="pointer-events:all" role="option" aria-checked="false" aria-selected="false" class="item"><a class="text HubHeaderItem flex items-center text-lg mx-1 px-4 py-2 rounded font-bold without-image is-light hover:text-primary text-black cursor-pointer" aria-current="false" href="/web/20211018050537/https://developer.paddle.com/getting-started/intro"><div class="HubHeaderItem-name">Get Started</div></a></div><div style="pointer-events:all" role="option" aria-checked="true" aria-selected="true" class="active selected item"><a class="text HubHeaderItem flex items-center text-lg mx-1 px-4 py-2 rounded font-bold without-image is-light hover:text-primary text-black cursor-pointer active" aria-current="true" href="/web/20211018050537/https://developer.paddle.com/guides"><div class="HubHeaderItem-name">Guides</div></a></div><div style="pointer-events:all" role="option" aria-checked="false" aria-selected="false" class="item"><a class="text HubHeaderItem flex items-center text-lg mx-1 px-4 py-2 rounded font-bold without-image is-light hover:text-primary text-black cursor-pointer" aria-current="false" href="/web/20211018050537/https://developer.paddle.com/api-reference/intro"><div class="HubHeaderItem-name">APIs</div></a></div><div style="pointer-events:all" role="option" aria-checked="false" aria-selected="false" class="item"><a class="text HubHeaderItem flex items-center text-lg mx-1 px-4 py-2 rounded font-bold without-image is-light hover:text-primary text-black cursor-pointer" aria-current="false" href="/web/20211018050537/https://developer.paddle.com/webhook-reference/intro"><div class="HubHeaderItem-name">Webhooks</div></a></div><div style="pointer-events:all" role="option" aria-checked="false" aria-selected="false" class="item"><a class="text HubHeaderItem flex items-center text-lg mx-1 px-4 py-2 rounded font-bold without-image is-light hover:text-primary text-black cursor-pointer" aria-current="false" href="/web/20211018050537/https://developer.paddle.com/reference"><div class="HubHeaderItem-name">Reference</div></a></div></div></div></div><div class="HubHeaderMobile-sidebar-toggle h-16 w-16 flex items-center justify-center text-lg is-light"><svg aria-hidden="true" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16 " role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg></div></div><div class="HubHeader-inner sm:hidden flex items-center h-24"><div class="HubHeader-section flex items-center flex-grow is-left"><a class="HubHeaderItem flex items-center text-lg mx-1 px-4 py-2 rounded font-bold with-image is-light hover:text-primary text-black cursor-pointer active" aria-current="true" href="/web/20211018050537/https://developer.paddle.com/"><div class="HubHeaderItem-image flex items-center"><img src="https://web.archive.org/web/20211018050537im_/https://paddle.com/assets/svg/logo-white.svg" alt="logo"/> </div></a></div><div class="HubHeader-section flex items-center justify-end is-right flex-grow relative"><a class="HubHeaderItem flex items-center text-lg mx-1 px-4 py-2 rounded font-bold without-image is-light hover:text-primary text-black cursor-pointer" aria-current="false" href="/web/20211018050537/https://developer.paddle.com/getting-started/intro"><div class="HubHeaderItem-name">Get Started</div></a><a class="HubHeaderItem flex items-center text-lg mx-1 px-4 py-2 rounded font-bold without-image is-active is-light hover:text-primary text-primary cursor-pointer active" aria-current="true" href="/web/20211018050537/https://developer.paddle.com/guides"><div class="HubHeaderItem-name">Guides</div></a><a class="HubHeaderItem flex items-center text-lg mx-1 px-4 py-2 rounded font-bold without-image is-light hover:text-primary text-black cursor-pointer" aria-current="false" href="/web/20211018050537/https://developer.paddle.com/api-reference/intro"><div class="HubHeaderItem-name">APIs</div></a><a class="HubHeaderItem flex items-center text-lg mx-1 px-4 py-2 rounded font-bold without-image is-light hover:text-primary text-black cursor-pointer" aria-current="false" href="/web/20211018050537/https://developer.paddle.com/webhook-reference/intro"><div class="HubHeaderItem-name">Webhooks</div></a><a class="HubHeaderItem flex items-center text-lg mx-1 px-4 py-2 rounded font-bold without-image is-light hover:text-primary text-black cursor-pointer" aria-current="false" href="/web/20211018050537/https://developer.paddle.com/reference"><div class="HubHeaderItem-name">Reference</div></a><div class="HubHeader-search h-24 flex items-center"><div class="FormSearch HubSearch"><div class="ui category fluid search"><div class="ui icon input fluid"><input type="text" placeholder="Search..." value="" tabindex="0" class="prompt" autocomplete="off"/><i aria-hidden="true" class="search icon"></i></div><div class="results transition"><div class="message empty"><div class="header">No results found.</div></div></div></div></div></div></div></div></div><div class="HubMain flex flex-1 relative has-sidebar"><div role="presentation" class="HubSidebar-overlay pin fixed sm:block hidden isMobile-closed"></div><div class="HubSidebar-wrapper print:hidden flex flex-col items-end bg-grey-lightest border-r border-grey-light isMobile-closed"><div class="HubSidebar flex-1" style="max-height:auto"><div class="HubSidebar-inner flex flex-col"><div id="tree-list" class="TreeList TreeList--viewer"><div class="TreeList-items depth--0"><div class="TreeList-folder depth--0 child-active no-toggle"><div><div class="TreeList-folderInner hover:text-active has-children"><div class="flex items-center"><div class="TreeList-folderName flex-1 truncate font-bold mb-3 lg:mb-2 text-grey-dark uppercase tracking-wide text-sm lg:text-xs">How Tos</div></div></div></div><div class="TreeList-items depth--0"><div class="TreeList-folder depth--0 child-active"><div><div class="TreeList-folderInner hover:text-active has-children"><div class="flex items-center"><div class="TreeList-folderName flex-1 truncate font-bold select-none">Checkout</div><div class="TreeList-folderToggler text-right"><i aria-hidden="true" class="icon chevron down open"></i></div></div></div></div><div class="TreeList-items depth--1"><a class="TreeList-item hover:text-active text-active is-active cursor-pointer active" aria-current="true" href="/web/20211018050537/https://developer.paddle.com/guides/how-tos/checkout/paddle-checkout"><div class="flex" title="Overlay Checkout"><div class="SortableTree-itemName flex-1">Overlay Checkout</div></div></a><a class="TreeList-item hover:text-active cursor-pointer" aria-current="false" href="/web/20211018050537/https://developer.paddle.com/guides/how-tos/checkout/inline-checkout"><div class="flex" title="Inline Checkout"><div class="SortableTree-itemName flex-1">Inline Checkout</div></div></a><a class="TreeList-item hover:text-active cursor-pointer" aria-current="false" href="/web/20211018050537/https://developer.paddle.com/guides/how-tos/checkout/pass-parameters"><div class="flex" title="Pass Parameters"><div class="SortableTree-itemName flex-1">Pass Parameters</div></div></a><a class="TreeList-item hover:text-active cursor-pointer" aria-current="false" href="/web/20211018050537/https://developer.paddle.com/guides/how-tos/checkout/post-checkout"><div class="flex" title="Post-Checkout"><div class="SortableTree-itemName flex-1">Post-Checkout</div></div></a></div></div><div class="TreeList-folder depth--0"><div><div class="TreeList-folderInner hover:text-active has-children"><div class="flex items-center"><div class="TreeList-folderName flex-1 truncate font-bold select-none">Subscriptions</div><div class="TreeList-folderToggler opacity-35 text-right"><i aria-hidden="true" class="icon chevron right"></i></div></div></div></div></div><div class="TreeList-folder depth--0"><div><div class="TreeList-folderInner hover:text-active has-children"><div class="flex items-center"><div class="TreeList-folderName flex-1 truncate font-bold select-none">Prices & Discounts</div><div class="TreeList-folderToggler opacity-35 text-right"><i aria-hidden="true" class="icon chevron right"></i></div></div></div></div></div><div class="TreeList-folder depth--0"><div><div class="TreeList-folderInner hover:text-active has-children"><div class="flex items-center"><div class="TreeList-folderName flex-1 truncate font-bold select-none">Track & Report</div><div class="TreeList-folderToggler opacity-35 text-right"><i aria-hidden="true" class="icon chevron right"></i></div></div></div></div></div></div></div></div></div></div></div></div><div class="HubPage-wrapper flex-1 bg-white w-full overflow-y-scroll min-h-100"><div class="HubPage"><div class="HubPage-inner flex"><div class="HubPage-content flex-1 relative"><div class="HubPageBody"><div class="HubBlockList"><div class="HubBlock HubBlock--text flex is-viewing is-padded"><div class="HubBlock-inner flex-1 w-full"><div class="HubBlock-content"><div class="MarkdownViewer markdown-body"><div class="HtmlViewer"><h1>Overlay Checkout</h1> <h4>The Paddle checkout displays a simple and elegant overlay interface by default to take payments for your products or subscription plans on your web store. The checkout is powered by our <code>Paddle.js</code> JavaScript library, which is simple enough to integrate in a matter of minutes for simple applications, while being flexible enough to support highly customized setups.</h4> </div></div></div></div></div><div class="HubBlock HubBlock--callout flex is-viewing is-padded is-padded-inner is-standalone"><div class="HubBlock-inner flex-1 w-full CalloutBlock--info"><div class="HubBlock-content flex"><div class="flex-1"><div class="MarkdownViewer markdown-body HubBlock-content-body"><div class="HtmlViewer"><p>Implementing Paddle for the first time? Try our <a href="/web/20211018050537/https://developer.paddle.com/getting-started/build-a-paddle-checkout-in-10-minutes">10 minute setup guide</a> instead.</p> </div></div></div></div></div></div><div class="HubBlock HubBlock--text flex is-viewing is-padded"><div class="HubBlock-inner flex-1 w-full"><div class="HubBlock-content"><div class="MarkdownViewer markdown-body"><div class="HtmlViewer"><h2>Appearance</h2> <p>The quickest way to implement is by using our Overlay Checkout. This is an iframe that is displayed over your own webpage when the checkout is triggered. The checkout is customized with your product logo and brand color, and the user experience is optimized by us for maximum conversion.</p> </div></div></div></div></div><div class="HubBlock HubBlock--image flex is-viewing is-padded is-standalone"><div class="HubBlock-inner flex-1 w-full"><div class="HubBlock-content"><div class="justify-center text-center"><img style="max-width:383px" src="//web.archive.org/web/20211018050537im_/https://s3.amazonaws.com/user-content.stoplight.io/4762/1631896376548" alt="An example of an overlay checkout" class="ui centered image"/><div class="ImageBlock-subtitle">An example of an overlay checkout</div></div></div></div></div><div class="HubBlock HubBlock--text flex is-viewing is-padded"><div class="HubBlock-inner flex-1 w-full"><div class="HubBlock-content"><div class="MarkdownViewer markdown-body"><div class="HtmlViewer"><p>If you prefer not to use the Overlay Checkout, you can alternatively use the <a href="/web/20211018050537/https://developer.paddle.com/guides/how-tos/checkout/inline-checkout">Inline Checkout</a> (embedded in your page).</p> </div></div></div></div></div><div class="HubBlock HubBlock--callout flex is-viewing is-padded is-padded-inner is-standalone"><div class="HubBlock-inner flex-1 w-full CalloutBlock--info"><div class="HubBlock-content flex"><div class="flex-1"><div class="HubBlock-content-title">Before you continue make sure you've:</div><div class="MarkdownViewer markdown-body HubBlock-content-body"><div class="HtmlViewer"><p>1 - Created a <a href="/web/20211018050537/https://developer.paddle.com/getting-started/create-a-one-time-product">one-time product</a> or <a href="/web/20211018050537/https://developer.paddle.com/getting-started/create-a-subscription-plan">subscription plan</a> in your Paddle dashboard.</p> <p>2 - Added your approved domains in your Paddle vendor dashboard under <a href="https://web.archive.org/web/20211018050537/https://vendors.paddle.com/checkout-settings" target="_blank">Checkout > Checkout Settings > Approved Domains</a>. Please note, that you don鈥檛 need this if you鈥檙e just testing on your localhost. Learn more about approved domains <a href="https://web.archive.org/web/20211018050537/https://paddle.com/support/approved-domains-faqs/" target="_blank">here</a>.</p> </div></div></div></div></div></div><div class="HubBlock HubBlock--text flex is-viewing is-padded"><div class="HubBlock-inner flex-1 w-full"><div class="HubBlock-content"><div class="MarkdownViewer markdown-body"><div class="HtmlViewer"><h2>Import Paddle.js</h2> <p>The paddle.js library can be imported by linking to Paddle鈥檚 CDN resource. Following the inclusion of the library, you must call the <code>Paddle.Setup()</code> method with your Paddle Vendor ID.</p> </div></div></div></div></div><div class="HubBlock HubBlock--callout flex is-viewing is-padded is-padded-inner is-standalone"><div class="HubBlock-inner flex-1 w-full CalloutBlock--error"><div class="HubBlock-content flex"><div class="flex-1"><div class="MarkdownViewer markdown-body HubBlock-content-body"><div class="HtmlViewer"><p>Please <strong>do not self-host Paddle.js,</strong> this will prevent you from receiving bug fixes and new features.</p> </div></div></div></div></div></div><div class="HubBlock HubBlock--code flex is-viewing is-padded is-outlined is-standalone"><div class="HubBlock-inner flex-1 w-full"><div class="HubBlock-content"><div class="Highlight line-numbers"><pre class="line-numbers" data-line=""><code class="language-html"><script src=<span class="token string">"https://cdn.paddle.com/paddle/paddle.js"</span>></script> <script type=<span class="token string">"text/javascript"</span>> Paddle.Setup(<span class="token punctuation">{</span> vendor<span class="token operator">:</span> <span class="token number">1234567</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </script></code></pre></div></div></div></div><div class="HubBlock HubBlock--callout flex is-viewing is-padded is-padded-inner is-standalone"><div class="HubBlock-inner flex-1 w-full CalloutBlock--info"><div class="HubBlock-content flex"><div class="flex-1"><div class="MarkdownViewer markdown-body HubBlock-content-body"><div class="HtmlViewer"><p>Your Paddle Vendor ID can be found on the <a href="https://web.archive.org/web/20211018050537/https://vendors.paddle.com/authentication" target="_blank">Authentication page</a> in your Paddle dashboard.</p> </div></div></div></div></div></div><div class="HubBlock HubBlock--text flex is-viewing is-padded"><div class="HubBlock-inner flex-1 w-full"><div class="HubBlock-content"><div class="MarkdownViewer markdown-body"><div class="HtmlViewer"><h2>Invoking the basic checkout</h2> <p>You can make any clickable element on your page into a buy button, either by adding the <code>paddle_button</code> class or by calling the <code>Paddle.checkout.open()</code> method on a <code>click</code> event. Using a Paddle Button is the simplest way to trigger the checkout.</p> <p>By default, the buy button will be styled green. You can disable the styling by adding the property <code>data-theme</code> with the value <code>none</code>.</p> </div></div></div></div></div><div class="HubBlock HubBlock--tabs flex is-viewing is-padded is-standalone"><div class="HubBlock-inner flex-1 w-full"><div class="HubBlock-content"><div class="ui pointing secondary top attached HubBlock-tabs menu"><a class="active item HubBlock-tab hover:text-active">Styled</a><a class="item HubBlock-tab hover:text-active">Unstyled</a></div><div class="HubBlock-tab-content"><div class="HubBlockList"><div class="HubBlock HubBlock--code flex is-viewing is-nested is-solo is-last is-not-padded is-standalone"><div class="HubBlock-inner flex-1 w-full"><div class="HubBlock-content"><div class="Highlight line-numbers"><pre class="line-numbers" data-line=""><code class="language-html"><a href=<span class="token string">"#!"</span> class=<span class="token string">"paddle_button"</span> data-product=<span class="token string">"12345"</span>>Buy Now!</a></code></pre></div></div></div></div></div></div></div></div></div><div class="HubBlock HubBlock--text flex is-viewing is-padded"><div class="HubBlock-inner flex-1 w-full"><div class="HubBlock-content"><div class="MarkdownViewer markdown-body"><div class="HtmlViewer"><h2>Invoking the flexible checkout</h2> <p>Invoking the checkout with a JavaScript click event makes it easier to flexibly and dynamically add custom parameters to a checkout:</p> </div></div></div></div></div><div class="HubBlock HubBlock--tabs flex is-viewing is-padded is-standalone"><div class="HubBlock-inner flex-1 w-full"><div class="HubBlock-content"><div class="ui pointing secondary top attached HubBlock-tabs menu"><a class="active item HubBlock-tab hover:text-active">JS</a><a class="item HubBlock-tab hover:text-active">jQuery</a><a class="item HubBlock-tab hover:text-active">React</a></div><div class="HubBlock-tab-content"><div class="HubBlockList"><div class="HubBlock HubBlock--code flex is-viewing is-nested is-solo is-last is-not-padded is-standalone"><div class="HubBlock-inner flex-1 w-full"><div class="HubBlock-content"><div class="Highlight line-numbers"><pre class="line-numbers" data-line=""><code class="language-html"><a href=<span class="token string">"#!"</span> id=<span class="token string">"buy"</span>>Buy now!</a> <script type=<span class="token string">"text/javascript"</span>> function openCheckout(<span class="token punctuation">)</span> <span class="token punctuation">{</span> Paddle.Checkout.open(<span class="token punctuation">{</span> product<span class="token operator">:</span> <span class="token number">12345</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> document.getElementById('buy'<span class="token punctuation">)</span>.addEventListener('click'<span class="token punctuation">,</span> openCheckout<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </script></code></pre></div></div></div></div></div></div></div></div></div><div class="HubBlock HubBlock--callout flex is-viewing is-last is-padded is-padded-inner is-standalone"><div class="HubBlock-inner flex-1 w-full CalloutBlock--info"><div class="HubBlock-content flex"><div class="flex-1"><div class="HubBlock-content-title">Next</div><div class="MarkdownViewer markdown-body HubBlock-content-body"><div class="HtmlViewer"><p>Streamline the checkout process for buyers by <a href="/web/20211018050537/https://developer.paddle.com/guides/how-tos/checkout/pass-parameters">passing parameters</a> such as their email address.</p> </div></div></div></div></div></div></div></div></div></div></div></div></div><div class="pin absolute flex z--1" role="presentation"><div class="h-full flex-1 bg-grey-lightest"></div><div class="h-full flex-1 bg-white"></div></div></div><div class="s-alert-wrapper"></div></div><script type="text/javascript"> window.__routeInfo = {"path":"guides/how-tos/checkout/paddle-checkout","templateID":0,"sharedPropsHashes":{"nav":"1iW9ns","sidebarTree":"iOuhA","namespace":"20mHo2"},"localProps":null,"allProps":{"nav":{"left":[{"title":"","path":"/","image":"https://web.archive.org/web/20211018050537/https://paddle.com/assets/svg/logo-white.svg"}],"right":[{"path":"/getting-started/intro","title":"Get Started"},{"path":"/guides","title":"Guides"},{"path":"/api-reference/intro","title":"APIs"},{"path":"/webhook-reference/intro","title":"Webhooks"},{"path":"/reference","title":"Reference"}]},"version":"1.0","sidebarTree":[{"treeData":[{"name":"How Tos","noToggle":true,"openByDefault":true,"path":"/guides/how-tos","children":[{"name":"Checkout","path":"/guides/how-tos/checkout","children":[{"name":"Overlay Checkout","hasContent":true,"path":"/guides/how-tos/checkout/paddle-checkout","href":"/guides/how-tos/checkout/paddle-checkout"},{"name":"Inline Checkout","hasContent":true,"path":"/guides/how-tos/checkout/inline-checkout","href":"/guides/how-tos/checkout/inline-checkout"},{"name":"Pass Parameters","hasContent":true,"path":"/guides/how-tos/checkout/pass-parameters","href":"/guides/how-tos/checkout/pass-parameters"},{"name":"Post-Checkout","hasContent":true,"path":"/guides/how-tos/checkout/post-checkout","href":"/guides/how-tos/checkout/post-checkout"}]},{"name":"Subscriptions","path":"/guides/how-tos/subscriptions","children":[{"name":"Trials","hasContent":true,"path":"/guides/how-tos/subscriptions/trials","href":"/guides/how-tos/subscriptions/trials"},{"name":"Access Management","hasContent":true,"path":"/guides/how-tos/subscriptions/access-management","href":"/guides/how-tos/subscriptions/access-management"},{"name":"Per-seat Billing","hasContent":true,"path":"/guides/how-tos/subscriptions/per-seat-billing","href":"/guides/how-tos/subscriptions/per-seat-billing"},{"name":"Metered Billing","hasContent":true,"path":"/guides/how-tos/subscriptions/metered-billing","href":"/guides/how-tos/subscriptions/metered-billing"},{"name":"Update Payment Details","hasContent":true,"path":"/guides/how-tos/subscriptions/update-payment-details","href":"/guides/how-tos/subscriptions/update-payment-details"},{"name":"Upgrade & Downgrade ","hasContent":true,"path":"/guides/how-tos/subscriptions/upgrade-and-downgrade","href":"/guides/how-tos/subscriptions/upgrade-and-downgrade"},{"name":"Cancel & Pause","hasContent":true,"path":"/guides/how-tos/subscriptions/cancel-and-pause","href":"/guides/how-tos/subscriptions/cancel-and-pause"},{"name":"Payment Failures","hasContent":true,"path":"/guides/how-tos/subscriptions/payment-failures","href":"/guides/how-tos/subscriptions/payment-failures"}]},{"name":"Prices & Discounts","path":"/guides/how-tos/pricing","children":[{"name":"Display Localized Prices","hasContent":true,"path":"/guides/how-tos/pricing/display-localized-prices","href":"/guides/how-tos/pricing/display-localized-prices"},{"name":"Coupons","hasContent":true,"path":"/guides/how-tos/pricing/coupons","href":"/guides/how-tos/pricing/coupons"},{"name":"Volume Discounts","hasContent":true,"path":"/guides/how-tos/pricing/volume-discounts","href":"/guides/how-tos/pricing/volume-discounts"},{"name":"Override Checkout Prices","hasContent":true,"path":"/guides/how-tos/pricing/override-checkout-prices","href":"/guides/how-tos/pricing/override-checkout-prices"}]},{"name":"Track & Report","path":"/guides/how-tos/track-and-report","children":[{"name":"Measure Conversion","hasContent":true,"path":"/guides/how-tos/track-and-report/measure-conversion","href":"/guides/how-tos/track-and-report/measure-conversion"},{"name":"Affiliates","hasContent":true,"path":"/guides/how-tos/track-and-report/affiliate-tracking","href":"/guides/how-tos/track-and-report/affiliate-tracking"},{"name":"Downloads","hasContent":true,"path":"/guides/how-tos/track-and-report/download-tracking","href":"/guides/how-tos/track-and-report/download-tracking"},{"name":"Audience","hasContent":true,"path":"/guides/how-tos/track-and-report/audience","href":"/guides/how-tos/track-and-report/audience"}]}]}]}],"crumbs":[{"content":"Guides","to":"/guides"},{"content":"How Tos","to":"/guides/how-tos"},{"content":"Checkout","to":"/guides/how-tos/checkout"},{"content":"Overlay Checkout","to":"/guides/how-tos/checkout/paddle-checkout"}],"namespace":{"id":2216,"name":"Paddle","path":"paddle","kind":"group","full_path":"paddle","parent_id":null},"page":{"meta":{"title":"Overlay Checkout - Checkout - How Tos - Guides","url":"/guides/how-tos/checkout/paddle-checkout","description":"Overlay Checkout\n\nThe Paddle checkout displays a simple and elegant overlay interface by default to take payments for your products or subscription plan..."},"title":"Overlay Checkout","parsedPath":["pages","/guides","data","children",0,"data","children",0,"data","children",0],"rootPagePath":"/guides","path":"/guides/how-tos/checkout/paddle-checkout","isSubpage":true,"route":{"path":"/paddle-checkout"},"data":{"blocks":[{"type":"text","data":"# Overlay Checkout\n\n#### The Paddle checkout displays a simple and elegant overlay interface by default to take payments for your products or subscription plans on your web store. The checkout is powered by our `Paddle.js` JavaScript library, which is simple enough to integrate in a matter of minutes for simple applications, while being flexible enough to support highly customized setups."},{"type":"callout","data":{"type":"info","body":"Implementing Paddle for the first time? Try our [10 minute setup guide](/getting-started/build-a-paddle-checkout-in-10-minutes) instead."}},{"type":"text","data":"## Appearance\n\nThe quickest way to implement is by using our Overlay Checkout. This is an iframe that is displayed over your own webpage when the checkout is triggered. The checkout is customized with your product logo and brand color, and the user experience is optimized by us for maximum conversion.\n\n"},{"type":"image","data":"//web.archive.org/web/20211018050537/https://s3.amazonaws.com/user-content.stoplight.io/4762/1631896376548","config":{"centered":true,"maxWidth":"383"},"header":{"subtitle":"An example of an overlay checkout"}},{"type":"text","data":"If you prefer not to use the Overlay Checkout, you can alternatively use the [Inline Checkout](/guides/how-tos/checkout/inline-checkout) (embedded in your page)."},{"type":"callout","data":{"title":"Before you continue make sure you've:","body":"\n1 - Created a [one-time product](/getting-started/create-a-one-time-product) or [subscription plan](/getting-started/create-a-subscription-plan) in your Paddle dashboard.\n\n2 - Added your approved domains in your Paddle vendor dashboard under [Checkout > Checkout Settings > Approved Domains](https://vendors.paddle.com/checkout-settings). Please note, that you don't need this if you're just testing on your localhost. Learn more about approved domains [here](https://paddle.com/support/approved-domains-faqs/)."}},{"type":"text","data":"\n## Import Paddle.js\nThe paddle.js library can be imported by linking to Paddle鈥檚 CDN resource. Following the inclusion of the library, you must call the `Paddle.Setup()` method with your Paddle Vendor ID."},{"type":"callout","data":{"body":"Please **do not self-host Paddle.js,** this will prevent you from receiving bug fixes and new features.","type":"error"}},{"type":"code","data":"<"+"script src=\"https://cdn.paddle.com/paddle/paddle.js\"><"+"/script>\n<"+"script type=\"text/javascript\">\n\tPaddle.Setup({ vendor: 1234567 });\n<"+"/script>","header":{},"config":{"mode":"html"}},{"type":"callout","data":{"body":"Your Paddle Vendor ID can be found on the [Authentication page](https://vendors.paddle.com/authentication) in your Paddle dashboard."}},{"type":"text","data":"## Invoking the basic checkout\n\nYou can make any clickable element on your page into a buy button, either by adding the `paddle_button` class or by calling the `Paddle.checkout.open()` method on a `click` event. Using a Paddle Button is the simplest way to trigger the checkout.\n\nBy default, the buy button will be styled green. You can disable the styling by adding the property `data-theme` with the value `none`."},{"type":"tabs","data":{"children":[{"title":"Styled","blocks":[{"type":"code","data":"<a href=\"#!\" class=\"paddle_button\" data-product=\"12345\">Buy Now!</a>","config":{"mode":"html"}}]},{"title":"Unstyled","blocks":[{"type":"code","data":"<a href=\"#!\" class=\"paddle_button\" data-product=\"12345\" data-theme=\"none\">Buy Now!</a>","config":{"mode":"html"}}]}]}},{"type":"text","data":"## Invoking the flexible checkout\n\nInvoking the checkout with a JavaScript click event makes it easier to flexibly and dynamically add custom parameters to a checkout:\n\n"},{"type":"tabs","data":{"children":[{"title":"JS","blocks":[{"type":"code","data":"<a href=\"#!\" id=\"buy\">Buy now!</a>\n<"+"script type=\"text/javascript\">\n\tfunction openCheckout() {\n\t\tPaddle.Checkout.open({ product: 12345 });\n\t}\n\tdocument.getElementById('buy').addEventListener('click', openCheckout, false);\n<"+"/script>","header":{},"config":{"mode":"html"}}]},{"title":"jQuery","blocks":[{"type":"code","data":"<a href=\"#!\" id=\"buy\">Buy now!</a>\n<"+"script type=\"text/javascript\">\n\tfunction openCheckout() {\n\t\tPaddle.Checkout.open({ product: 12345 });\n\t}\n\t$('#buy').click(openCheckout);\n<"+"/script>","header":{},"config":{"mode":"html"}}]},{"title":"React","blocks":[{"type":"code","data":"function App() {\n const Paddle = window.Paddle;\n const openCheckout = () => { \n Paddle.Checkout.open({ product: 12345 });\n }\n return (\n <div className=\"App\">\n <header className=\"App-header\">\n <Button variant=\"primary\" onClick={openCheckout}>Subscribe Now!</Button>{' '}\n </header>\n </div>\n );\n}\nexport default App;","config":{"mode":"js"}}]}]}},{"type":"callout","data":{"title":"Next","body":"Streamline the checkout process for buyers by [passing parameters](/guides/how-tos/checkout/pass-parameters) such as their email address."}}],"children":[]}}},"siteData":{"metaTitle":"Paddle Developer","basePath":"/","theme":{"primary":"#3B99FC","secondary":"#38c172"},"googleAnalytics":null,"gtm":"GTM-5HSBV9H","intercom":null,"segment":null,"whitelabel":true}};</script><script defer="" type="text/javascript" src="/web/20211018050537js_/https://developer.paddle.com/_/assets/templates/vendors~client-containers-Login~client-containers-Page.58d3df14.js"></script><script defer="" type="text/javascript" src="/web/20211018050537js_/https://developer.paddle.com/_/assets/templates/vendors~client-containers-Page.ef375bcd.js"></script><script defer="" type="text/javascript" src="/web/20211018050537js_/https://developer.paddle.com/_/assets/templates/client-containers-Login~client-containers-Page.ac0fbd7d.js"></script><script defer="" type="text/javascript" src="/web/20211018050537js_/https://developer.paddle.com/_/assets/templates/client-containers-Page.73b64b67.js"></script><script defer="" type="text/javascript" src="/web/20211018050537js_/https://developer.paddle.com/_/assets/templates/styles.b34d5813.js"></script><script defer="" type="text/javascript" src="/web/20211018050537js_/https://developer.paddle.com/_/assets/templates/vendors~main.246fd5b0.js"></script><script defer="" type="text/javascript" src="/web/20211018050537js_/https://developer.paddle.com/_/assets/main.2b0831d0.js"></script></body></html>