CINXE.COM

<!DOCTYPE html><html lang="en"><head><title>Build an overlay checkout - Paddle Developer</title><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/><meta name="description" content="Get a step-by-step overview of how to build a complete overlay checkout — including initializing Paddle.js, passing settings and items, prefilling customer information, and next steps."/><meta property="og:logo" content="/cover-image.png"/><meta property="og:title" content="Build an overlay checkout - Paddle Developer"/><meta property="og:description" content="Get a step-by-step overview of how to build a complete overlay checkout — including initializing Paddle.js, passing settings and items, prefilling customer information, and next steps."/><meta property="og:type" content="website"/><meta property="og:url" content="https://developer.paddle.com/"/><meta property="og:image" content="/cover-image.png"/><meta name="twitter:image" content="/cover-image.png"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="@paddlehq"/><meta name="twitter:title" content="Build an overlay checkout - Paddle Developer"/><meta name="twitter:description" content="Get a step-by-step overview of how to build a complete overlay checkout — including initializing Paddle.js, passing settings and items, prefilling customer information, and next steps."/><link rel="shortcut icon" type="image/x-icon" href="/favicon.svg"/><link rel="apple-touch-icon-precomposed" href="/favicon.svg"/><link rel="apple-touch-icon" href="/favicon.svg"/><link rel="preload" as="image" href="/logo.svg"/><meta name="next-head-count" content="20"/><link rel="preload" href="/_next/static/css/6103320fb2a7c2cc.css" as="style"/><link rel="stylesheet" href="/_next/static/css/6103320fb2a7c2cc.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-41e4e2d1eb0c0667.js" defer=""></script><script src="/_next/static/chunks/framework-d6b15d8b3dd1dcdb.js" defer=""></script><script src="/_next/static/chunks/main-e40b5460469659f0.js" defer=""></script><script src="/_next/static/chunks/pages/_app-77ea457437251fbb.js" defer=""></script><script src="/_next/static/chunks/940-e36b5a77696c1ebb.js" defer=""></script><script src="/_next/static/chunks/221-1b55101c7483f795.js" defer=""></script><script src="/_next/static/chunks/pages/%5Bsection%5D/%5B%5B...slug%5D%5D-a9600ad76e77e04d.js" defer=""></script><script src="/_next/static/mrJjJqeVlmZxT_9DK3FAL/_buildManifest.js" defer=""></script><script src="/_next/static/mrJjJqeVlmZxT_9DK3FAL/_ssgManifest.js" defer=""></script><style data-test="extract"><style data-token-hash="1wmd7ff" data-css-hash="n6klc0">:where(.css-1me4733) a{color:#1677ff;text-decoration:none;background-color:transparent;outline:none;cursor:pointer;transition:color 0.3s;-webkit-text-decoration-skip:objects;}:where(.css-1me4733) a:hover{color:#69b1ff;}:where(.css-1me4733) a:active{color:#0958d9;}:where(.css-1me4733) a:active,:where(.css-1me4733) a:hover{text-decoration:none;outline:0;}:where(.css-1me4733) a:focus{text-decoration:none;outline:0;}:where(.css-1me4733) a[disabled]{color:rgba(0, 0, 0, 0.25);cursor:not-allowed;}</style><style data-token-hash="1wmd7ff" data-css-hash="4m029j">:where(.css-1me4733)[class^="ant-skeleton"],:where(.css-1me4733)[class*=" ant-skeleton"]{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';font-size:14px;box-sizing:border-box;}:where(.css-1me4733)[class^="ant-skeleton"]::before,:where(.css-1me4733)[class*=" ant-skeleton"]::before,:where(.css-1me4733)[class^="ant-skeleton"]::after,:where(.css-1me4733)[class*=" ant-skeleton"]::after{box-sizing:border-box;}:where(.css-1me4733)[class^="ant-skeleton"] [class^="ant-skeleton"],:where(.css-1me4733)[class*=" ant-skeleton"] [class^="ant-skeleton"],:where(.css-1me4733)[class^="ant-skeleton"] [class*=" ant-skeleton"],:where(.css-1me4733)[class*=" ant-skeleton"] [class*=" ant-skeleton"]{box-sizing:border-box;}:where(.css-1me4733)[class^="ant-skeleton"] [class^="ant-skeleton"]::before,:where(.css-1me4733)[class*=" ant-skeleton"] [class^="ant-skeleton"]::before,:where(.css-1me4733)[class^="ant-skeleton"] [class*=" ant-skeleton"]::before,:where(.css-1me4733)[class*=" ant-skeleton"] [class*=" ant-skeleton"]::before,:where(.css-1me4733)[class^="ant-skeleton"] [class^="ant-skeleton"]::after,:where(.css-1me4733)[class*=" ant-skeleton"] [class^="ant-skeleton"]::after,:where(.css-1me4733)[class^="ant-skeleton"] [class*=" ant-skeleton"]::after,:where(.css-1me4733)[class*=" ant-skeleton"] [class*=" ant-skeleton"]::after{box-sizing:border-box;}:where(.css-1me4733).ant-skeleton{display:table;width:100%;}:where(.css-1me4733).ant-skeleton .ant-skeleton-header{display:table-cell;padding-inline-end:16px;vertical-align:top;}:where(.css-1me4733).ant-skeleton .ant-skeleton-header .ant-skeleton-avatar{display:inline-block;vertical-align:top;background:rgba(0, 0, 0, 0.06);width:32px;height:32px;line-height:32px;}:where(.css-1me4733).ant-skeleton .ant-skeleton-header .ant-skeleton-avatar-circle{border-radius:50%;}:where(.css-1me4733).ant-skeleton .ant-skeleton-header .ant-skeleton-avatar-lg{width:40px;height:40px;line-height:40px;}:where(.css-1me4733).ant-skeleton .ant-skeleton-header .ant-skeleton-avatar-sm{width:24px;height:24px;line-height:24px;}:where(.css-1me4733).ant-skeleton .ant-skeleton-content{display:table-cell;width:100%;vertical-align:top;}:where(.css-1me4733).ant-skeleton .ant-skeleton-content .ant-skeleton-title{width:100%;height:16px;background:rgba(0, 0, 0, 0.06);border-radius:4px;}:where(.css-1me4733).ant-skeleton .ant-skeleton-content .ant-skeleton-title +.ant-skeleton-paragraph{margin-block-start:24px;}:where(.css-1me4733).ant-skeleton .ant-skeleton-content .ant-skeleton-paragraph{padding:0;}:where(.css-1me4733).ant-skeleton .ant-skeleton-content .ant-skeleton-paragraph >li{width:100%;height:16px;list-style:none;background:rgba(0, 0, 0, 0.06);border-radius:4px;}:where(.css-1me4733).ant-skeleton .ant-skeleton-content .ant-skeleton-paragraph >li +li{margin-block-start:16px;}:where(.css-1me4733).ant-skeleton .ant-skeleton-content .ant-skeleton-paragraph>li:last-child:not(:first-child):not(:nth-child(2)){width:61%;}:where(.css-1me4733).ant-skeleton-round .ant-skeleton-content .ant-skeleton-title,:where(.css-1me4733).ant-skeleton-round .ant-skeleton-content .ant-skeleton-paragraph>li{border-radius:100px;}:where(.css-1me4733).ant-skeleton-with-avatar .ant-skeleton-content .ant-skeleton-title{margin-block-start:12px;}:where(.css-1me4733).ant-skeleton-with-avatar .ant-skeleton-content .ant-skeleton-title +.ant-skeleton-paragraph{margin-block-start:28px;}:where(.css-1me4733).ant-skeleton.ant-skeleton-element{display:inline-block;width:auto;}:where(.css-1me4733).ant-skeleton.ant-skeleton-element .ant-skeleton-button{display:inline-block;vertical-align:top;background:rgba(0, 0, 0, 0.06);border-radius:4px;width:64px;min-width:64px;height:32px;line-height:32px;}:where(.css-1me4733).ant-skeleton.ant-skeleton-element .ant-skeleton-button.ant-skeleton-button-circle{width:32px;min-width:32px;border-radius:50%;}:where(.css-1me4733).ant-skeleton.ant-skeleton-element .ant-skeleton-button.ant-skeleton-button-round{border-radius:32px;}:where(.css-1me4733).ant-skeleton.ant-skeleton-element .ant-skeleton-button-lg{width:80px;min-width:80px;height:40px;line-height:40px;}:where(.css-1me4733).ant-skeleton.ant-skeleton-element .ant-skeleton-button-lg.ant-skeleton-button-circle{width:40px;min-width:40px;border-radius:50%;}:where(.css-1me4733).ant-skeleton.ant-skeleton-element .ant-skeleton-button-lg.ant-skeleton-button-round{border-radius:40px;}:where(.css-1me4733).ant-skeleton.ant-skeleton-element .ant-skeleton-button-sm{width:48px;min-width:48px;height:24px;line-height:24px;}:where(.css-1me4733).ant-skeleton.ant-skeleton-element .ant-skeleton-button-sm.ant-skeleton-button-circle{width:24px;min-width:24px;border-radius:50%;}:where(.css-1me4733).ant-skeleton.ant-skeleton-element .ant-skeleton-button-sm.ant-skeleton-button-round{border-radius:24px;}:where(.css-1me4733).ant-skeleton.ant-skeleton-element .ant-skeleton-avatar{display:inline-block;vertical-align:top;background:rgba(0, 0, 0, 0.06);width:32px;height:32px;line-height:32px;}:where(.css-1me4733).ant-skeleton.ant-skeleton-element .ant-skeleton-avatar.ant-skeleton-avatar-circle{border-radius:50%;}:where(.css-1me4733).ant-skeleton.ant-skeleton-element .ant-skeleton-avatar.ant-skeleton-avatar-lg{width:40px;height:40px;line-height:40px;}:where(.css-1me4733).ant-skeleton.ant-skeleton-element .ant-skeleton-avatar.ant-skeleton-avatar-sm{width:24px;height:24px;line-height:24px;}:where(.css-1me4733).ant-skeleton.ant-skeleton-element .ant-skeleton-input{display:inline-block;vertical-align:top;background:rgba(0, 0, 0, 0.06);border-radius:4px;width:160px;min-width:160px;height:32px;line-height:32px;}:where(.css-1me4733).ant-skeleton.ant-skeleton-element .ant-skeleton-input-lg{width:200px;min-width:200px;height:40px;line-height:40px;}:where(.css-1me4733).ant-skeleton.ant-skeleton-element .ant-skeleton-input-sm{width:120px;min-width:120px;height:24px;line-height:24px;}:where(.css-1me4733).ant-skeleton.ant-skeleton-element .ant-skeleton-image{display:flex;align-items:center;justify-content:center;vertical-align:top;background:rgba(0, 0, 0, 0.06);border-radius:4px;width:96px;height:96px;line-height:96px;}:where(.css-1me4733).ant-skeleton.ant-skeleton-element .ant-skeleton-image .ant-skeleton-image-path{fill:#bfbfbf;}:where(.css-1me4733).ant-skeleton.ant-skeleton-element .ant-skeleton-image .ant-skeleton-image-svg{width:48px;height:48px;line-height:48px;max-width:192px;max-height:192px;}:where(.css-1me4733).ant-skeleton.ant-skeleton-element .ant-skeleton-image .ant-skeleton-image-svg.ant-skeleton-image-svg-circle{border-radius:50%;}:where(.css-1me4733).ant-skeleton.ant-skeleton-element .ant-skeleton-image.ant-skeleton-image-circle{border-radius:50%;}:where(.css-1me4733).ant-skeleton.ant-skeleton-block{width:100%;}:where(.css-1me4733).ant-skeleton.ant-skeleton-block .ant-skeleton-button{width:100%;}:where(.css-1me4733).ant-skeleton.ant-skeleton-block .ant-skeleton-input{width:100%;}:where(.css-1me4733).ant-skeleton.ant-skeleton-active .ant-skeleton-title,:where(.css-1me4733).ant-skeleton.ant-skeleton-active .ant-skeleton-paragraph>li,:where(.css-1me4733).ant-skeleton.ant-skeleton-active .ant-skeleton-avatar,:where(.css-1me4733).ant-skeleton.ant-skeleton-active .ant-skeleton-button,:where(.css-1me4733).ant-skeleton.ant-skeleton-active .ant-skeleton-input,:where(.css-1me4733).ant-skeleton.ant-skeleton-active .ant-skeleton-image{background:linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.15) 37%, rgba(0, 0, 0, 0.06) 63%);background-size:400% 100%;animation-name:css-1me4733-ant-skeleton-loading;animation-duration:1.4s;animation-timing-function:ease;animation-iteration-count:infinite;}</style><style data-token-hash="1wmd7ff" data-css-hash="7c59u4">:where(.css-1me4733)[class^="ant-dropdown"],:where(.css-1me4733)[class*=" ant-dropdown"]{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';font-size:14px;box-sizing:border-box;}:where(.css-1me4733)[class^="ant-dropdown"]::before,:where(.css-1me4733)[class*=" ant-dropdown"]::before,:where(.css-1me4733)[class^="ant-dropdown"]::after,:where(.css-1me4733)[class*=" ant-dropdown"]::after{box-sizing:border-box;}:where(.css-1me4733)[class^="ant-dropdown"] [class^="ant-dropdown"],:where(.css-1me4733)[class*=" ant-dropdown"] [class^="ant-dropdown"],:where(.css-1me4733)[class^="ant-dropdown"] [class*=" ant-dropdown"],:where(.css-1me4733)[class*=" ant-dropdown"] [class*=" ant-dropdown"]{box-sizing:border-box;}:where(.css-1me4733)[class^="ant-dropdown"] [class^="ant-dropdown"]::before,:where(.css-1me4733)[class*=" ant-dropdown"] [class^="ant-dropdown"]::before,:where(.css-1me4733)[class^="ant-dropdown"] [class*=" ant-dropdown"]::before,:where(.css-1me4733)[class*=" ant-dropdown"] [class*=" ant-dropdown"]::before,:where(.css-1me4733)[class^="ant-dropdown"] [class^="ant-dropdown"]::after,:where(.css-1me4733)[class*=" ant-dropdown"] [class^="ant-dropdown"]::after,:where(.css-1me4733)[class^="ant-dropdown"] [class*=" ant-dropdown"]::after,:where(.css-1me4733)[class*=" ant-dropdown"] [class*=" ant-dropdown"]::after{box-sizing:border-box;}:where(.css-1me4733).ant-dropdown{box-sizing:border-box;margin:0;padding:0;color:rgba(0, 0, 0, 0.88);font-size:14px;line-height:1.5714285714285714;list-style:none;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';position:absolute;top:-9999px;left:-9999px;z-index:1050;display:block;}:where(.css-1me4733).ant-dropdown::before{position:absolute;inset-block:-4px;z-index:-9999;opacity:0.0001;content:"";}:where(.css-1me4733).ant-dropdown .ant-dropdown-wrap{position:relative;}:where(.css-1me4733).ant-dropdown .ant-dropdown-wrap .ant-btn>.anticon-down{font-size:12px;}:where(.css-1me4733).ant-dropdown .ant-dropdown-wrap .anticon-down::before{transition:transform 0.2s;}:where(.css-1me4733).ant-dropdown .ant-dropdown-wrap-open .anticon-down::before{transform:rotate(180deg);}:where(.css-1me4733).ant-dropdown-hidden,:where(.css-1me4733).ant-dropdown-menu-hidden,:where(.css-1me4733).ant-dropdown-menu-submenu-hidden{display:none;}:where(.css-1me4733).ant-dropdown.ant-slide-down-enter.ant-slide-down-enter-active.ant-dropdown-placement-bottomLeft,:where(.css-1me4733).ant-dropdown.ant-slide-down-appear.ant-slide-down-appear-active.ant-dropdown-placement-bottomLeft,:where(.css-1me4733).ant-dropdown.ant-slide-down-enter.ant-slide-down-enter-active.ant-dropdown-placement-bottom,:where(.css-1me4733).ant-dropdown.ant-slide-down-appear.ant-slide-down-appear-active.ant-dropdown-placement-bottom,:where(.css-1me4733).ant-dropdown.ant-slide-down-enter.ant-slide-down-enter-active.ant-dropdown-placement-bottomRight,:where(.css-1me4733).ant-dropdown.ant-slide-down-appear.ant-slide-down-appear-active.ant-dropdown-placement-bottomRight{animation-name:css-1me4733-antSlideUpIn;}:where(.css-1me4733).ant-dropdown.ant-slide-up-enter.ant-slide-up-enter-active.ant-dropdown-placement-topLeft,:where(.css-1me4733).ant-dropdown.ant-slide-up-appear.ant-slide-up-appear-active.ant-dropdown-placement-topLeft,:where(.css-1me4733).ant-dropdown.ant-slide-up-enter.ant-slide-up-enter-active.ant-dropdown-placement-top,:where(.css-1me4733).ant-dropdown.ant-slide-up-appear.ant-slide-up-appear-active.ant-dropdown-placement-top,:where(.css-1me4733).ant-dropdown.ant-slide-up-enter.ant-slide-up-enter-active.ant-dropdown-placement-topRight,:where(.css-1me4733).ant-dropdown.ant-slide-up-appear.ant-slide-up-appear-active.ant-dropdown-placement-topRight{animation-name:css-1me4733-antSlideDownIn;}:where(.css-1me4733).ant-dropdown.ant-slide-down-leave.ant-slide-down-leave-active.ant-dropdown-placement-bottomLeft,:where(.css-1me4733).ant-dropdown.ant-slide-down-leave.ant-slide-down-leave-active.ant-dropdown-placement-bottom,:where(.css-1me4733).ant-dropdown.ant-slide-down-leave.ant-slide-down-leave-active.ant-dropdown-placement-bottomRight{animation-name:css-1me4733-antSlideUpOut;}:where(.css-1me4733).ant-dropdown.ant-slide-up-leave.ant-slide-up-leave-active.ant-dropdown-placement-topLeft,:where(.css-1me4733).ant-dropdown.ant-slide-up-leave.ant-slide-up-leave-active.ant-dropdown-placement-top,:where(.css-1me4733).ant-dropdown.ant-slide-up-leave.ant-slide-up-leave-active.ant-dropdown-placement-topRight{animation-name:css-1me4733-antSlideDownOut;}:where(.css-1me4733).ant-dropdown .ant-dropdown-arrow{position:absolute;z-index:1;display:block;pointer-events:none;width:16px;height:16px;overflow:hidden;}:where(.css-1me4733).ant-dropdown .ant-dropdown-arrow::before{position:absolute;bottom:0;inset-inline-start:0;width:16px;height:8px;background:#ffffff;clip-path:path('M 0 8 A 4 4 0 0 0 2.82842712474619 6.82842712474619 L 6.585786437626905 3.0710678118654755 A 2 2 0 0 1 9.414213562373096 3.0710678118654755 L 13.17157287525381 6.82842712474619 A 4 4 0 0 0 16 8 Z');content:"";}:where(.css-1me4733).ant-dropdown .ant-dropdown-arrow::after{content:"";position:absolute;width:8.970562748477143px;height:8.970562748477143px;bottom:0;inset-inline:0;margin:auto;border-radius:0 0 2px 0;transform:translateY(50%) rotate(-135deg);box-shadow:2px 2px 5px rgba(0, 0, 0, 0.05);z-index:0;background:transparent;}:where(.css-1me4733).ant-dropdown .ant-dropdown-arrow:before{background:#ffffff;}:where(.css-1me4733).ant-dropdown-placement-top .ant-dropdown-arrow,:where(.css-1me4733).ant-dropdown-placement-topLeft .ant-dropdown-arrow,:where(.css-1me4733).ant-dropdown-placement-topRight .ant-dropdown-arrow{bottom:0;transform:translateY(100%) rotate(180deg);}:where(.css-1me4733).ant-dropdown-placement-top .ant-dropdown-arrow{left:50%;transform:translateX(-50%) translateY(100%) rotate(180deg);}:where(.css-1me4733).ant-dropdown-placement-topLeft .ant-dropdown-arrow{left:12px;}:where(.css-1me4733).ant-dropdown-placement-topRight .ant-dropdown-arrow{right:12px;}:where(.css-1me4733).ant-dropdown-placement-bottom .ant-dropdown-arrow,:where(.css-1me4733).ant-dropdown-placement-bottomLeft .ant-dropdown-arrow,:where(.css-1me4733).ant-dropdown-placement-bottomRight .ant-dropdown-arrow{top:0;transform:translateY(-100%);}:where(.css-1me4733).ant-dropdown-placement-bottom .ant-dropdown-arrow{left:50%;transform:translateX(-50%) translateY(-100%);}:where(.css-1me4733).ant-dropdown-placement-bottomLeft .ant-dropdown-arrow{left:12px;}:where(.css-1me4733).ant-dropdown-placement-bottomRight .ant-dropdown-arrow{right:12px;}:where(.css-1me4733).ant-dropdown .ant-dropdown-menu{position:relative;margin:0;}:where(.css-1me4733).ant-dropdown-menu-submenu-popup{position:absolute;z-index:1050;background:transparent;box-shadow:none;transform-origin:0 0;}:where(.css-1me4733).ant-dropdown-menu-submenu-popup ul,:where(.css-1me4733).ant-dropdown-menu-submenu-popup li{list-style:none;margin:0;}:where(.css-1me4733).ant-dropdown .ant-dropdown-menu,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu{padding:4px;list-style-type:none;background-color:#ffffff;background-clip:padding-box;border-radius:8px;outline:none;box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08),0 3px 6px -4px rgba(0, 0, 0, 0.12),0 9px 28px 8px rgba(0, 0, 0, 0.05);}:where(.css-1me4733).ant-dropdown .ant-dropdown-menu:focus-visible,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu:focus-visible{outline:4px solid #91caff;outline-offset:1px;transition:outline-offset 0s,outline 0s;}:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item-group-title,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-item-group-title{padding:5px 12px;color:rgba(0, 0, 0, 0.45);transition:all 0.2s;}:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-item{position:relative;display:flex;align-items:center;}:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item-icon,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-item-icon{min-width:14px;margin-inline-end:8px;font-size:12px;}:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-title-content,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-title-content{flex:auto;}:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-title-content >a,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-title-content >a{color:inherit;transition:all 0.2s;}:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-title-content >a:hover,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-title-content >a:hover{color:inherit;}:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-title-content >a::after,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-title-content >a::after{position:absolute;inset:0;content:"";}:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-item,:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu-title,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-submenu-title{clear:both;margin:0;padding:5px 12px;color:rgba(0, 0, 0, 0.88);font-weight:normal;font-size:14px;line-height:1.5714285714285714;cursor:pointer;transition:all 0.2s;border-radius:4px;}:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item:hover,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-item:hover,:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu-title:hover,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-submenu-title:hover,:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item-active,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-item-active,:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu-title-active,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-submenu-title-active{background-color:rgba(0, 0, 0, 0.04);}:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item:focus-visible,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-item:focus-visible,:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu-title:focus-visible,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-submenu-title:focus-visible{outline:4px solid #91caff;outline-offset:1px;transition:outline-offset 0s,outline 0s;}:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item-selected,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-item-selected,:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu-title-selected,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-submenu-title-selected{color:#1677ff;background-color:#e6f4ff;}:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item-selected:hover,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-item-selected:hover,:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu-title-selected:hover,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-submenu-title-selected:hover,:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item-selected-active,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-item-selected-active,:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu-title-selected-active,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-submenu-title-selected-active{background-color:#bae0ff;}:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item-disabled,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-item-disabled,:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu-title-disabled,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-submenu-title-disabled{color:rgba(0, 0, 0, 0.25);cursor:not-allowed;}:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item-disabled:hover,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-item-disabled:hover,:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu-title-disabled:hover,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-submenu-title-disabled:hover{color:rgba(0, 0, 0, 0.25);background-color:#ffffff;cursor:not-allowed;}:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item-disabled a,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-item-disabled a,:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu-title-disabled a,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-submenu-title-disabled a{pointer-events:none;}:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item-divider,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-item-divider,:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu-title-divider,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-submenu-title-divider{height:1px;margin:4px 0;overflow:hidden;line-height:0;background-color:rgba(5, 5, 5, 0.06);}:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item .ant-dropdown-menu-submenu-expand-icon,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-item .ant-dropdown-menu-submenu-expand-icon,:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-expand-icon,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-expand-icon{position:absolute;inset-inline-end:8px;}:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item .ant-dropdown-menu-submenu-expand-icon .ant-dropdown-menu-submenu-arrow-icon,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-item .ant-dropdown-menu-submenu-expand-icon .ant-dropdown-menu-submenu-arrow-icon,:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-expand-icon .ant-dropdown-menu-submenu-arrow-icon,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-expand-icon .ant-dropdown-menu-submenu-arrow-icon{margin-inline-end:0!important;color:rgba(0, 0, 0, 0.45);font-size:12px;font-style:normal;}:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item-group-list,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-item-group-list{margin:0 8px;padding:0;list-style:none;}:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu-title,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-submenu-title{padding-inline-end:24px;}:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu-vertical,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-submenu-vertical{position:relative;}:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu.ant-dropdown-menu-submenu-disabled .ant-dropdown-menu-submenu-title,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-submenu.ant-dropdown-menu-submenu-disabled .ant-dropdown-menu-submenu-title,:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu.ant-dropdown-menu-submenu-disabled .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow-icon,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-submenu.ant-dropdown-menu-submenu-disabled .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow-icon{color:rgba(0, 0, 0, 0.25);background-color:#ffffff;cursor:not-allowed;}:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu-selected .ant-dropdown-menu-submenu-title,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-submenu-selected .ant-dropdown-menu-submenu-title{color:#1677ff;}:where(.css-1me4733).ant-slide-up-enter,:where(.css-1me4733).ant-slide-up-appear{animation-duration:0.2s;animation-fill-mode:both;animation-play-state:paused;}:where(.css-1me4733).ant-slide-up-leave{animation-duration:0.2s;animation-fill-mode:both;animation-play-state:paused;}:where(.css-1me4733).ant-slide-up-enter.ant-slide-up-enter-active,:where(.css-1me4733).ant-slide-up-appear.ant-slide-up-appear-active{animation-name:css-1me4733-antSlideUpIn;animation-play-state:running;}:where(.css-1me4733).ant-slide-up-leave.ant-slide-up-leave-active{animation-name:css-1me4733-antSlideUpOut;animation-play-state:running;pointer-events:none;}:where(.css-1me4733).ant-slide-up-enter,:where(.css-1me4733).ant-slide-up-appear{transform:scale(0);transform-origin:0% 0%;opacity:0;animation-timing-function:cubic-bezier(0.23, 1, 0.32, 1);}:where(.css-1me4733).ant-slide-up-enter-prepare,:where(.css-1me4733).ant-slide-up-appear-prepare{transform:scale(1);}:where(.css-1me4733).ant-slide-up-leave{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);}:where(.css-1me4733).ant-slide-down-enter,:where(.css-1me4733).ant-slide-down-appear{animation-duration:0.2s;animation-fill-mode:both;animation-play-state:paused;}:where(.css-1me4733).ant-slide-down-leave{animation-duration:0.2s;animation-fill-mode:both;animation-play-state:paused;}:where(.css-1me4733).ant-slide-down-enter.ant-slide-down-enter-active,:where(.css-1me4733).ant-slide-down-appear.ant-slide-down-appear-active{animation-name:css-1me4733-antSlideDownIn;animation-play-state:running;}:where(.css-1me4733).ant-slide-down-leave.ant-slide-down-leave-active{animation-name:css-1me4733-antSlideDownOut;animation-play-state:running;pointer-events:none;}:where(.css-1me4733).ant-slide-down-enter,:where(.css-1me4733).ant-slide-down-appear{transform:scale(0);transform-origin:0% 0%;opacity:0;animation-timing-function:cubic-bezier(0.23, 1, 0.32, 1);}:where(.css-1me4733).ant-slide-down-enter-prepare,:where(.css-1me4733).ant-slide-down-appear-prepare{transform:scale(1);}:where(.css-1me4733).ant-slide-down-leave{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);}:where(.css-1me4733).ant-move-up-enter,:where(.css-1me4733).ant-move-up-appear{animation-duration:0.2s;animation-fill-mode:both;animation-play-state:paused;}:where(.css-1me4733).ant-move-up-leave{animation-duration:0.2s;animation-fill-mode:both;animation-play-state:paused;}:where(.css-1me4733).ant-move-up-enter.ant-move-up-enter-active,:where(.css-1me4733).ant-move-up-appear.ant-move-up-appear-active{animation-name:css-1me4733-antMoveUpIn;animation-play-state:running;}:where(.css-1me4733).ant-move-up-leave.ant-move-up-leave-active{animation-name:css-1me4733-antMoveUpOut;animation-play-state:running;pointer-events:none;}:where(.css-1me4733).ant-move-up-enter,:where(.css-1me4733).ant-move-up-appear{opacity:0;animation-timing-function:cubic-bezier(0.08, 0.82, 0.17, 1);}:where(.css-1me4733).ant-move-up-leave{animation-timing-function:cubic-bezier(0.78, 0.14, 0.15, 0.86);}:where(.css-1me4733).ant-move-down-enter,:where(.css-1me4733).ant-move-down-appear{animation-duration:0.2s;animation-fill-mode:both;animation-play-state:paused;}:where(.css-1me4733).ant-move-down-leave{animation-duration:0.2s;animation-fill-mode:both;animation-play-state:paused;}:where(.css-1me4733).ant-move-down-enter.ant-move-down-enter-active,:where(.css-1me4733).ant-move-down-appear.ant-move-down-appear-active{animation-name:css-1me4733-antMoveDownIn;animation-play-state:running;}:where(.css-1me4733).ant-move-down-leave.ant-move-down-leave-active{animation-name:css-1me4733-antMoveDownOut;animation-play-state:running;pointer-events:none;}:where(.css-1me4733).ant-move-down-enter,:where(.css-1me4733).ant-move-down-appear{opacity:0;animation-timing-function:cubic-bezier(0.08, 0.82, 0.17, 1);}:where(.css-1me4733).ant-move-down-leave{animation-timing-function:cubic-bezier(0.78, 0.14, 0.15, 0.86);}:where(.css-1me4733).ant-zoom-big-enter,:where(.css-1me4733).ant-zoom-big-appear{animation-duration:0.2s;animation-fill-mode:both;animation-play-state:paused;}:where(.css-1me4733).ant-zoom-big-leave{animation-duration:0.2s;animation-fill-mode:both;animation-play-state:paused;}:where(.css-1me4733).ant-zoom-big-enter.ant-zoom-big-enter-active,:where(.css-1me4733).ant-zoom-big-appear.ant-zoom-big-appear-active{animation-name:css-1me4733-antZoomBigIn;animation-play-state:running;}:where(.css-1me4733).ant-zoom-big-leave.ant-zoom-big-leave-active{animation-name:css-1me4733-antZoomBigOut;animation-play-state:running;pointer-events:none;}:where(.css-1me4733).ant-zoom-big-enter,:where(.css-1me4733).ant-zoom-big-appear{transform:scale(0);opacity:0;animation-timing-function:cubic-bezier(0.08, 0.82, 0.17, 1);}:where(.css-1me4733).ant-zoom-big-enter-prepare,:where(.css-1me4733).ant-zoom-big-appear-prepare{transform:none;}:where(.css-1me4733).ant-zoom-big-leave{animation-timing-function:cubic-bezier(0.78, 0.14, 0.15, 0.86);}:where(.css-1me4733).ant-dropdown-button{white-space:nowrap;}:where(.css-1me4733).ant-dropdown-button.ant-btn-group>.ant-btn-loading,:where(.css-1me4733).ant-dropdown-button.ant-btn-group>.ant-btn-loading+.ant-btn{cursor:default;pointer-events:none;opacity:0.65;}:where(.css-1me4733).ant-dropdown-button.ant-btn-group>.ant-btn:last-child:not(:first-child):not(.ant-btn-icon-only){padding-inline:8px;}:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item.ant-dropdown-menu-item-danger:not(.ant-dropdown-menu-item-disabled),:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-item.ant-dropdown-menu-item-danger:not(.ant-dropdown-menu-item-disabled){color:#ff4d4f;}:where(.css-1me4733).ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item.ant-dropdown-menu-item-danger:not(.ant-dropdown-menu-item-disabled):hover,:where(.css-1me4733).ant-dropdown-menu-submenu .ant-dropdown-menu .ant-dropdown-menu-item.ant-dropdown-menu-item-danger:not(.ant-dropdown-menu-item-disabled):hover{color:#fff;background-color:#ff4d4f;}</style><style data-token-hash="1wmd7ff" data-css-hash="1wdrc00">:where(.css-1me4733)[class^="ant-space"],:where(.css-1me4733)[class*=" ant-space"]{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';font-size:14px;box-sizing:border-box;}:where(.css-1me4733)[class^="ant-space"]::before,:where(.css-1me4733)[class*=" ant-space"]::before,:where(.css-1me4733)[class^="ant-space"]::after,:where(.css-1me4733)[class*=" ant-space"]::after{box-sizing:border-box;}:where(.css-1me4733)[class^="ant-space"] [class^="ant-space"],:where(.css-1me4733)[class*=" ant-space"] [class^="ant-space"],:where(.css-1me4733)[class^="ant-space"] [class*=" ant-space"],:where(.css-1me4733)[class*=" ant-space"] [class*=" ant-space"]{box-sizing:border-box;}:where(.css-1me4733)[class^="ant-space"] [class^="ant-space"]::before,:where(.css-1me4733)[class*=" ant-space"] [class^="ant-space"]::before,:where(.css-1me4733)[class^="ant-space"] [class*=" ant-space"]::before,:where(.css-1me4733)[class*=" ant-space"] [class*=" ant-space"]::before,:where(.css-1me4733)[class^="ant-space"] [class^="ant-space"]::after,:where(.css-1me4733)[class*=" ant-space"] [class^="ant-space"]::after,:where(.css-1me4733)[class^="ant-space"] [class*=" ant-space"]::after,:where(.css-1me4733)[class*=" ant-space"] [class*=" ant-space"]::after{box-sizing:border-box;}:where(.css-1me4733).ant-space{display:inline-flex;}:where(.css-1me4733).ant-space-rtl{direction:rtl;}:where(.css-1me4733).ant-space-vertical{flex-direction:column;}:where(.css-1me4733).ant-space-align{flex-direction:column;}:where(.css-1me4733).ant-space-align-center{align-items:center;}:where(.css-1me4733).ant-space-align-start{align-items:flex-start;}:where(.css-1me4733).ant-space-align-end{align-items:flex-end;}:where(.css-1me4733).ant-space-align-baseline{align-items:baseline;}:where(.css-1me4733).ant-space .ant-space-item:empty{display:none;}:where(.css-1me4733).ant-space{display:inline-flex;}:where(.css-1me4733).ant-space-block{display:flex;width:100%;}:where(.css-1me4733).ant-space-vertical{flex-direction:column;}</style><style data-token-hash="1wmd7ff" data-css-hash="j17nxn">:where(.css-1me4733)[class^="ant-popover"],:where(.css-1me4733)[class*=" ant-popover"]{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';font-size:14px;box-sizing:border-box;}:where(.css-1me4733)[class^="ant-popover"]::before,:where(.css-1me4733)[class*=" ant-popover"]::before,:where(.css-1me4733)[class^="ant-popover"]::after,:where(.css-1me4733)[class*=" ant-popover"]::after{box-sizing:border-box;}:where(.css-1me4733)[class^="ant-popover"] [class^="ant-popover"],:where(.css-1me4733)[class*=" ant-popover"] [class^="ant-popover"],:where(.css-1me4733)[class^="ant-popover"] [class*=" ant-popover"],:where(.css-1me4733)[class*=" ant-popover"] [class*=" ant-popover"]{box-sizing:border-box;}:where(.css-1me4733)[class^="ant-popover"] [class^="ant-popover"]::before,:where(.css-1me4733)[class*=" ant-popover"] [class^="ant-popover"]::before,:where(.css-1me4733)[class^="ant-popover"] [class*=" ant-popover"]::before,:where(.css-1me4733)[class*=" ant-popover"] [class*=" ant-popover"]::before,:where(.css-1me4733)[class^="ant-popover"] [class^="ant-popover"]::after,:where(.css-1me4733)[class*=" ant-popover"] [class^="ant-popover"]::after,:where(.css-1me4733)[class^="ant-popover"] [class*=" ant-popover"]::after,:where(.css-1me4733)[class*=" ant-popover"] [class*=" ant-popover"]::after{box-sizing:border-box;}:where(.css-1me4733).ant-popover{box-sizing:border-box;margin:0;padding:0;color:rgba(0, 0, 0, 0.88);font-size:14px;line-height:1.5714285714285714;list-style:none;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';position:absolute;top:0;left:0;z-index:1030;font-weight:normal;white-space:normal;text-align:start;cursor:auto;user-select:text;--antd-arrow-background-color:#ffffff;}:where(.css-1me4733).ant-popover-rtl{direction:rtl;}:where(.css-1me4733).ant-popover-hidden{display:none;}:where(.css-1me4733).ant-popover .ant-popover-content{position:relative;}:where(.css-1me4733).ant-popover .ant-popover-inner{background-color:#ffffff;background-clip:padding-box;border-radius:8px;box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08),0 3px 6px -4px rgba(0, 0, 0, 0.12),0 9px 28px 8px rgba(0, 0, 0, 0.05);padding:12px;}:where(.css-1me4733).ant-popover .ant-popover-title{min-width:177px;margin-bottom:8px;color:rgba(0, 0, 0, 0.88);font-weight:600;}:where(.css-1me4733).ant-popover .ant-popover-inner-content{color:rgba(0, 0, 0, 0.88);}:where(.css-1me4733).ant-popover .ant-popover-arrow{position:absolute;z-index:1;display:block;pointer-events:none;width:16px;height:16px;overflow:hidden;}:where(.css-1me4733).ant-popover .ant-popover-arrow::before{position:absolute;bottom:0;inset-inline-start:0;width:16px;height:8px;background:var(--antd-arrow-background-color);clip-path:path('M 0 8 A 4 4 0 0 0 2.82842712474619 6.82842712474619 L 6.585786437626905 3.0710678118654755 A 2 2 0 0 1 9.414213562373096 3.0710678118654755 L 13.17157287525381 6.82842712474619 A 4 4 0 0 0 16 8 Z');content:"";}:where(.css-1me4733).ant-popover .ant-popover-arrow::after{content:"";position:absolute;width:8.970562748477143px;height:8.970562748477143px;bottom:0;inset-inline:0;margin:auto;border-radius:0 0 2px 0;transform:translateY(50%) rotate(-135deg);box-shadow:2px 2px 5px rgba(0, 0, 0, 0.05);z-index:0;background:transparent;}:where(.css-1me4733).ant-popover .ant-popover-arrow:before{background:var(--antd-arrow-background-color);}:where(.css-1me4733).ant-popover-placement-top .ant-popover-arrow,:where(.css-1me4733).ant-popover-placement-topLeft .ant-popover-arrow,:where(.css-1me4733).ant-popover-placement-topRight .ant-popover-arrow{bottom:0;transform:translateY(100%) rotate(180deg);}:where(.css-1me4733).ant-popover-placement-top .ant-popover-arrow{left:50%;transform:translateX(-50%) translateY(100%) rotate(180deg);}:where(.css-1me4733).ant-popover-placement-topLeft .ant-popover-arrow{left:12px;}:where(.css-1me4733).ant-popover-placement-topRight .ant-popover-arrow{right:12px;}:where(.css-1me4733).ant-popover-placement-bottom .ant-popover-arrow,:where(.css-1me4733).ant-popover-placement-bottomLeft .ant-popover-arrow,:where(.css-1me4733).ant-popover-placement-bottomRight .ant-popover-arrow{top:0;transform:translateY(-100%);}:where(.css-1me4733).ant-popover-placement-bottom .ant-popover-arrow{left:50%;transform:translateX(-50%) translateY(-100%);}:where(.css-1me4733).ant-popover-placement-bottomLeft .ant-popover-arrow{left:12px;}:where(.css-1me4733).ant-popover-placement-bottomRight .ant-popover-arrow{right:12px;}:where(.css-1me4733).ant-popover-placement-left .ant-popover-arrow,:where(.css-1me4733).ant-popover-placement-leftTop .ant-popover-arrow,:where(.css-1me4733).ant-popover-placement-leftBottom .ant-popover-arrow{right:0;transform:translateX(100%) rotate(90deg);}:where(.css-1me4733).ant-popover-placement-left .ant-popover-arrow{top:50%;transform:translateY(-50%) translateX(100%) rotate(90deg);}:where(.css-1me4733).ant-popover-placement-leftTop .ant-popover-arrow{top:12px;}:where(.css-1me4733).ant-popover-placement-leftBottom .ant-popover-arrow{bottom:12px;}:where(.css-1me4733).ant-popover-placement-right .ant-popover-arrow,:where(.css-1me4733).ant-popover-placement-rightTop .ant-popover-arrow,:where(.css-1me4733).ant-popover-placement-rightBottom .ant-popover-arrow{left:0;transform:translateX(-100%) rotate(-90deg);}:where(.css-1me4733).ant-popover-placement-right .ant-popover-arrow{top:50%;transform:translateY(-50%) translateX(-100%) rotate(-90deg);}:where(.css-1me4733).ant-popover-placement-rightTop .ant-popover-arrow{top:12px;}:where(.css-1me4733).ant-popover-placement-rightBottom .ant-popover-arrow{bottom:12px;}:where(.css-1me4733).ant-popover-pure{position:relative;max-width:none;margin:16px;display:inline-block;}:where(.css-1me4733).ant-popover-pure .ant-popover-content{display:inline-block;}:where(.css-1me4733).ant-popover.ant-popover-blue{--antd-arrow-background-color:#1677ff;}:where(.css-1me4733).ant-popover.ant-popover-blue .ant-popover-inner{background-color:#1677ff;}:where(.css-1me4733).ant-popover.ant-popover-blue .ant-popover-arrow{background:transparent;}:where(.css-1me4733).ant-popover.ant-popover-purple{--antd-arrow-background-color:#722ed1;}:where(.css-1me4733).ant-popover.ant-popover-purple .ant-popover-inner{background-color:#722ed1;}:where(.css-1me4733).ant-popover.ant-popover-purple .ant-popover-arrow{background:transparent;}:where(.css-1me4733).ant-popover.ant-popover-cyan{--antd-arrow-background-color:#13c2c2;}:where(.css-1me4733).ant-popover.ant-popover-cyan .ant-popover-inner{background-color:#13c2c2;}:where(.css-1me4733).ant-popover.ant-popover-cyan .ant-popover-arrow{background:transparent;}:where(.css-1me4733).ant-popover.ant-popover-green{--antd-arrow-background-color:#52c41a;}:where(.css-1me4733).ant-popover.ant-popover-green .ant-popover-inner{background-color:#52c41a;}:where(.css-1me4733).ant-popover.ant-popover-green .ant-popover-arrow{background:transparent;}:where(.css-1me4733).ant-popover.ant-popover-magenta{--antd-arrow-background-color:#eb2f96;}:where(.css-1me4733).ant-popover.ant-popover-magenta .ant-popover-inner{background-color:#eb2f96;}:where(.css-1me4733).ant-popover.ant-popover-magenta .ant-popover-arrow{background:transparent;}:where(.css-1me4733).ant-popover.ant-popover-pink{--antd-arrow-background-color:#eb2f96;}:where(.css-1me4733).ant-popover.ant-popover-pink .ant-popover-inner{background-color:#eb2f96;}:where(.css-1me4733).ant-popover.ant-popover-pink .ant-popover-arrow{background:transparent;}:where(.css-1me4733).ant-popover.ant-popover-red{--antd-arrow-background-color:#f5222d;}:where(.css-1me4733).ant-popover.ant-popover-red .ant-popover-inner{background-color:#f5222d;}:where(.css-1me4733).ant-popover.ant-popover-red .ant-popover-arrow{background:transparent;}:where(.css-1me4733).ant-popover.ant-popover-orange{--antd-arrow-background-color:#fa8c16;}:where(.css-1me4733).ant-popover.ant-popover-orange .ant-popover-inner{background-color:#fa8c16;}:where(.css-1me4733).ant-popover.ant-popover-orange .ant-popover-arrow{background:transparent;}:where(.css-1me4733).ant-popover.ant-popover-yellow{--antd-arrow-background-color:#fadb14;}:where(.css-1me4733).ant-popover.ant-popover-yellow .ant-popover-inner{background-color:#fadb14;}:where(.css-1me4733).ant-popover.ant-popover-yellow .ant-popover-arrow{background:transparent;}:where(.css-1me4733).ant-popover.ant-popover-volcano{--antd-arrow-background-color:#fa541c;}:where(.css-1me4733).ant-popover.ant-popover-volcano .ant-popover-inner{background-color:#fa541c;}:where(.css-1me4733).ant-popover.ant-popover-volcano .ant-popover-arrow{background:transparent;}:where(.css-1me4733).ant-popover.ant-popover-geekblue{--antd-arrow-background-color:#2f54eb;}:where(.css-1me4733).ant-popover.ant-popover-geekblue .ant-popover-inner{background-color:#2f54eb;}:where(.css-1me4733).ant-popover.ant-popover-geekblue .ant-popover-arrow{background:transparent;}:where(.css-1me4733).ant-popover.ant-popover-lime{--antd-arrow-background-color:#a0d911;}:where(.css-1me4733).ant-popover.ant-popover-lime .ant-popover-inner{background-color:#a0d911;}:where(.css-1me4733).ant-popover.ant-popover-lime .ant-popover-arrow{background:transparent;}:where(.css-1me4733).ant-popover.ant-popover-gold{--antd-arrow-background-color:#faad14;}:where(.css-1me4733).ant-popover.ant-popover-gold .ant-popover-inner{background-color:#faad14;}:where(.css-1me4733).ant-popover.ant-popover-gold .ant-popover-arrow{background:transparent;}:where(.css-1me4733).ant-zoom-big-enter,:where(.css-1me4733).ant-zoom-big-appear{animation-duration:0.2s;animation-fill-mode:both;animation-play-state:paused;}:where(.css-1me4733).ant-zoom-big-leave{animation-duration:0.2s;animation-fill-mode:both;animation-play-state:paused;}:where(.css-1me4733).ant-zoom-big-enter.ant-zoom-big-enter-active,:where(.css-1me4733).ant-zoom-big-appear.ant-zoom-big-appear-active{animation-name:css-1me4733-antZoomBigIn;animation-play-state:running;}:where(.css-1me4733).ant-zoom-big-leave.ant-zoom-big-leave-active{animation-name:css-1me4733-antZoomBigOut;animation-play-state:running;pointer-events:none;}:where(.css-1me4733).ant-zoom-big-enter,:where(.css-1me4733).ant-zoom-big-appear{transform:scale(0);opacity:0;animation-timing-function:cubic-bezier(0.08, 0.82, 0.17, 1);}:where(.css-1me4733).ant-zoom-big-enter-prepare,:where(.css-1me4733).ant-zoom-big-appear-prepare{transform:none;}:where(.css-1me4733).ant-zoom-big-leave{animation-timing-function:cubic-bezier(0.78, 0.14, 0.15, 0.86);}</style><style data-token-hash="1wmd7ff" data-css-hash="15wyyg7">:where(.css-1me4733)[class^="ant-popover"],:where(.css-1me4733)[class*=" ant-popover"]{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';font-size:14px;box-sizing:border-box;}:where(.css-1me4733)[class^="ant-popover"]::before,:where(.css-1me4733)[class*=" ant-popover"]::before,:where(.css-1me4733)[class^="ant-popover"]::after,:where(.css-1me4733)[class*=" ant-popover"]::after{box-sizing:border-box;}:where(.css-1me4733)[class^="ant-popover"] [class^="ant-popover"],:where(.css-1me4733)[class*=" ant-popover"] [class^="ant-popover"],:where(.css-1me4733)[class^="ant-popover"] [class*=" ant-popover"],:where(.css-1me4733)[class*=" ant-popover"] [class*=" ant-popover"]{box-sizing:border-box;}:where(.css-1me4733)[class^="ant-popover"] [class^="ant-popover"]::before,:where(.css-1me4733)[class*=" ant-popover"] [class^="ant-popover"]::before,:where(.css-1me4733)[class^="ant-popover"] [class*=" ant-popover"]::before,:where(.css-1me4733)[class*=" ant-popover"] [class*=" ant-popover"]::before,:where(.css-1me4733)[class^="ant-popover"] [class^="ant-popover"]::after,:where(.css-1me4733)[class*=" ant-popover"] [class^="ant-popover"]::after,:where(.css-1me4733)[class^="ant-popover"] [class*=" ant-popover"]::after,:where(.css-1me4733)[class*=" ant-popover"] [class*=" ant-popover"]::after{box-sizing:border-box;}</style><style data-token-hash="1wmd7ff" data-css-hash="103sp0z">:where(.css-1me4733)[class^="ant-btn"],:where(.css-1me4733)[class*=" ant-btn"]{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';font-size:14px;box-sizing:border-box;}:where(.css-1me4733)[class^="ant-btn"]::before,:where(.css-1me4733)[class*=" ant-btn"]::before,:where(.css-1me4733)[class^="ant-btn"]::after,:where(.css-1me4733)[class*=" ant-btn"]::after{box-sizing:border-box;}:where(.css-1me4733)[class^="ant-btn"] [class^="ant-btn"],:where(.css-1me4733)[class*=" ant-btn"] [class^="ant-btn"],:where(.css-1me4733)[class^="ant-btn"] [class*=" ant-btn"],:where(.css-1me4733)[class*=" ant-btn"] [class*=" ant-btn"]{box-sizing:border-box;}:where(.css-1me4733)[class^="ant-btn"] [class^="ant-btn"]::before,:where(.css-1me4733)[class*=" ant-btn"] [class^="ant-btn"]::before,:where(.css-1me4733)[class^="ant-btn"] [class*=" ant-btn"]::before,:where(.css-1me4733)[class*=" ant-btn"] [class*=" ant-btn"]::before,:where(.css-1me4733)[class^="ant-btn"] [class^="ant-btn"]::after,:where(.css-1me4733)[class*=" ant-btn"] [class^="ant-btn"]::after,:where(.css-1me4733)[class^="ant-btn"] [class*=" ant-btn"]::after,:where(.css-1me4733)[class*=" ant-btn"] [class*=" ant-btn"]::after{box-sizing:border-box;}:where(.css-1me4733).ant-btn{outline:none;position:relative;display:inline-block;font-weight:400;white-space:nowrap;text-align:center;background-image:none;background-color:transparent;border:1px solid transparent;cursor:pointer;transition:all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);user-select:none;touch-action:manipulation;line-height:1.5714285714285714;color:rgba(0, 0, 0, 0.88);}:where(.css-1me4733).ant-btn >span{display:inline-block;}:where(.css-1me4733).ant-btn >.anticon+span,:where(.css-1me4733).ant-btn >span+.anticon{margin-inline-start:8px;}:where(.css-1me4733).ant-btn >a{color:currentColor;}:where(.css-1me4733).ant-btn:not(:disabled):focus-visible{outline:4px solid #91caff;outline-offset:1px;transition:outline-offset 0s,outline 0s;}:where(.css-1me4733).ant-btn-icon-only.ant-btn-compact-item{flex:none;}:where(.css-1me4733).ant-btn-compact-item.ant-btn-primary:not([disabled])+.ant-btn-compact-item.ant-btn-primary:not([disabled]){position:relative;}:where(.css-1me4733).ant-btn-compact-item.ant-btn-primary:not([disabled])+.ant-btn-compact-item.ant-btn-primary:not([disabled]):before{position:absolute;top:-1px;inset-inline-start:-1px;display:inline-block;width:1px;height:calc(100% + 2px);background-color:#4096ff;content:"";}:where(.css-1me4733).ant-btn-compact-vertical-item.ant-btn-primary:not([disabled])+.ant-btn-compact-vertical-item.ant-btn-primary:not([disabled]){position:relative;}:where(.css-1me4733).ant-btn-compact-vertical-item.ant-btn-primary:not([disabled])+.ant-btn-compact-vertical-item.ant-btn-primary:not([disabled]):before{position:absolute;top:-1px;inset-inline-start:-1px;display:inline-block;width:calc(100% + 2px);height:1px;background-color:#4096ff;content:"";}:where(.css-1me4733).ant-btn.ant-btn-sm{font-size:14px;height:24px;padding:0px 7px;border-radius:4px;}:where(.css-1me4733).ant-btn.ant-btn-sm.ant-btn-icon-only{width:24px;padding-inline-start:0;padding-inline-end:0;}:where(.css-1me4733).ant-btn.ant-btn-sm.ant-btn-icon-only.ant-btn-round{width:auto;}:where(.css-1me4733).ant-btn.ant-btn-sm.ant-btn-icon-only >span{transform:scale(1.143);}:where(.css-1me4733).ant-btn.ant-btn-sm.ant-btn-loading{opacity:0.65;cursor:default;}:where(.css-1me4733).ant-btn.ant-btn-sm .ant-btn-loading-icon{transition:width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);}:where(.css-1me4733).ant-btn.ant-btn-sm:not(.ant-btn-icon-only) .ant-btn-loading-icon>.anticon{margin-inline-end:8px;}:where(.css-1me4733).ant-btn.ant-btn-circle.ant-btn-sm{min-width:24px;padding-inline-start:0;padding-inline-end:0;border-radius:50%;}:where(.css-1me4733).ant-btn.ant-btn-round.ant-btn-sm{border-radius:24px;padding-inline-start:12px;padding-inline-end:12px;}:where(.css-1me4733).ant-btn{font-size:14px;height:32px;padding:4px 15px;border-radius:6px;}:where(.css-1me4733).ant-btn.ant-btn-icon-only{width:32px;padding-inline-start:0;padding-inline-end:0;}:where(.css-1me4733).ant-btn.ant-btn-icon-only.ant-btn-round{width:auto;}:where(.css-1me4733).ant-btn.ant-btn-icon-only >span{transform:scale(1.143);}:where(.css-1me4733).ant-btn.ant-btn-loading{opacity:0.65;cursor:default;}:where(.css-1me4733).ant-btn .ant-btn-loading-icon{transition:width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);}:where(.css-1me4733).ant-btn:not(.ant-btn-icon-only) .ant-btn-loading-icon>.anticon{margin-inline-end:8px;}:where(.css-1me4733).ant-btn.ant-btn-circle{min-width:32px;padding-inline-start:0;padding-inline-end:0;border-radius:50%;}:where(.css-1me4733).ant-btn.ant-btn-round{border-radius:32px;padding-inline-start:16px;padding-inline-end:16px;}:where(.css-1me4733).ant-btn.ant-btn-lg{font-size:16px;height:40px;padding:6.428571428571429px 15px;border-radius:8px;}:where(.css-1me4733).ant-btn.ant-btn-lg.ant-btn-icon-only{width:40px;padding-inline-start:0;padding-inline-end:0;}:where(.css-1me4733).ant-btn.ant-btn-lg.ant-btn-icon-only.ant-btn-round{width:auto;}:where(.css-1me4733).ant-btn.ant-btn-lg.ant-btn-icon-only >span{transform:scale(1.143);}:where(.css-1me4733).ant-btn.ant-btn-lg.ant-btn-loading{opacity:0.65;cursor:default;}:where(.css-1me4733).ant-btn.ant-btn-lg .ant-btn-loading-icon{transition:width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);}:where(.css-1me4733).ant-btn.ant-btn-lg:not(.ant-btn-icon-only) .ant-btn-loading-icon>.anticon{margin-inline-end:8px;}:where(.css-1me4733).ant-btn.ant-btn-circle.ant-btn-lg{min-width:40px;padding-inline-start:0;padding-inline-end:0;border-radius:50%;}:where(.css-1me4733).ant-btn.ant-btn-round.ant-btn-lg{border-radius:40px;padding-inline-start:20px;padding-inline-end:20px;}:where(.css-1me4733).ant-btn.ant-btn-block{width:100%;}:where(.css-1me4733).ant-btn-default{background-color:#ffffff;border-color:#d9d9d9;box-shadow:0 2px 0 rgba(0, 0, 0, 0.02);}:where(.css-1me4733).ant-btn-default:disabled{cursor:not-allowed;border-color:#d9d9d9;color:rgba(0, 0, 0, 0.25);background-color:rgba(0, 0, 0, 0.04);box-shadow:none;}:where(.css-1me4733).ant-btn-default:not(:disabled):hover{color:#4096ff;border-color:#4096ff;}:where(.css-1me4733).ant-btn-default:not(:disabled):active{color:#0958d9;border-color:#0958d9;}:where(.css-1me4733).ant-btn-default.ant-btn-background-ghost{color:#ffffff;background-color:transparent;border-color:#ffffff;box-shadow:none;}:where(.css-1me4733).ant-btn-default.ant-btn-background-ghost:not(:disabled):hover{background-color:transparent;}:where(.css-1me4733).ant-btn-default.ant-btn-background-ghost:not(:disabled):active{background-color:transparent;}:where(.css-1me4733).ant-btn-default.ant-btn-background-ghost:disabled{cursor:not-allowed;color:rgba(0, 0, 0, 0.25);border-color:#d9d9d9;}:where(.css-1me4733).ant-btn-default.ant-btn-dangerous{color:#ff4d4f;border-color:#ff4d4f;}:where(.css-1me4733).ant-btn-default.ant-btn-dangerous:not(:disabled):hover{color:#ff7875;border-color:#ffa39e;}:where(.css-1me4733).ant-btn-default.ant-btn-dangerous:not(:disabled):active{color:#d9363e;border-color:#d9363e;}:where(.css-1me4733).ant-btn-default.ant-btn-dangerous.ant-btn-background-ghost{color:#ff4d4f;background-color:transparent;border-color:#ff4d4f;box-shadow:none;}:where(.css-1me4733).ant-btn-default.ant-btn-dangerous.ant-btn-background-ghost:not(:disabled):hover{background-color:transparent;}:where(.css-1me4733).ant-btn-default.ant-btn-dangerous.ant-btn-background-ghost:not(:disabled):active{background-color:transparent;}:where(.css-1me4733).ant-btn-default.ant-btn-dangerous.ant-btn-background-ghost:disabled{cursor:not-allowed;color:rgba(0, 0, 0, 0.25);border-color:#d9d9d9;}:where(.css-1me4733).ant-btn-default.ant-btn-dangerous:disabled{cursor:not-allowed;border-color:#d9d9d9;color:rgba(0, 0, 0, 0.25);background-color:rgba(0, 0, 0, 0.04);box-shadow:none;}:where(.css-1me4733).ant-btn-primary{color:#fff;background-color:#1677ff;box-shadow:0 2px 0 rgba(5, 145, 255, 0.1);}:where(.css-1me4733).ant-btn-primary:disabled{cursor:not-allowed;border-color:#d9d9d9;color:rgba(0, 0, 0, 0.25);background-color:rgba(0, 0, 0, 0.04);box-shadow:none;}:where(.css-1me4733).ant-btn-primary:not(:disabled):hover{color:#fff;background-color:#4096ff;}:where(.css-1me4733).ant-btn-primary:not(:disabled):active{color:#fff;background-color:#0958d9;}:where(.css-1me4733).ant-btn-primary.ant-btn-background-ghost{color:#1677ff;background-color:transparent;border-color:#1677ff;box-shadow:none;}:where(.css-1me4733).ant-btn-primary.ant-btn-background-ghost:not(:disabled):hover{background-color:transparent;color:#4096ff;border-color:#4096ff;}:where(.css-1me4733).ant-btn-primary.ant-btn-background-ghost:not(:disabled):active{background-color:transparent;color:#0958d9;border-color:#0958d9;}:where(.css-1me4733).ant-btn-primary.ant-btn-background-ghost:disabled{cursor:not-allowed;color:rgba(0, 0, 0, 0.25);border-color:#d9d9d9;}:where(.css-1me4733).ant-btn-primary.ant-btn-dangerous{background-color:#ff4d4f;box-shadow:0 2px 0 rgba(255, 38, 5, 0.06);}:where(.css-1me4733).ant-btn-primary.ant-btn-dangerous:not(:disabled):hover{background-color:#ff7875;}:where(.css-1me4733).ant-btn-primary.ant-btn-dangerous:not(:disabled):active{background-color:#d9363e;}:where(.css-1me4733).ant-btn-primary.ant-btn-dangerous.ant-btn-background-ghost{color:#ff4d4f;background-color:transparent;border-color:#ff4d4f;box-shadow:none;}:where(.css-1me4733).ant-btn-primary.ant-btn-dangerous.ant-btn-background-ghost:not(:disabled):hover{background-color:transparent;color:#ff7875;border-color:#ff7875;}:where(.css-1me4733).ant-btn-primary.ant-btn-dangerous.ant-btn-background-ghost:not(:disabled):active{background-color:transparent;color:#d9363e;border-color:#d9363e;}:where(.css-1me4733).ant-btn-primary.ant-btn-dangerous.ant-btn-background-ghost:disabled{cursor:not-allowed;color:rgba(0, 0, 0, 0.25);border-color:#d9d9d9;}:where(.css-1me4733).ant-btn-primary.ant-btn-dangerous:disabled{cursor:not-allowed;border-color:#d9d9d9;color:rgba(0, 0, 0, 0.25);background-color:rgba(0, 0, 0, 0.04);box-shadow:none;}:where(.css-1me4733).ant-btn-dashed{background-color:#ffffff;border-color:#d9d9d9;box-shadow:0 2px 0 rgba(0, 0, 0, 0.02);border-style:dashed;}:where(.css-1me4733).ant-btn-dashed:disabled{cursor:not-allowed;border-color:#d9d9d9;color:rgba(0, 0, 0, 0.25);background-color:rgba(0, 0, 0, 0.04);box-shadow:none;}:where(.css-1me4733).ant-btn-dashed:not(:disabled):hover{color:#4096ff;border-color:#4096ff;}:where(.css-1me4733).ant-btn-dashed:not(:disabled):active{color:#0958d9;border-color:#0958d9;}:where(.css-1me4733).ant-btn-dashed.ant-btn-background-ghost{color:#ffffff;background-color:transparent;border-color:#ffffff;box-shadow:none;}:where(.css-1me4733).ant-btn-dashed.ant-btn-background-ghost:not(:disabled):hover{background-color:transparent;}:where(.css-1me4733).ant-btn-dashed.ant-btn-background-ghost:not(:disabled):active{background-color:transparent;}:where(.css-1me4733).ant-btn-dashed.ant-btn-background-ghost:disabled{cursor:not-allowed;color:rgba(0, 0, 0, 0.25);border-color:#d9d9d9;}:where(.css-1me4733).ant-btn-dashed.ant-btn-dangerous{color:#ff4d4f;border-color:#ff4d4f;}:where(.css-1me4733).ant-btn-dashed.ant-btn-dangerous:not(:disabled):hover{color:#ff7875;border-color:#ffa39e;}:where(.css-1me4733).ant-btn-dashed.ant-btn-dangerous:not(:disabled):active{color:#d9363e;border-color:#d9363e;}:where(.css-1me4733).ant-btn-dashed.ant-btn-dangerous.ant-btn-background-ghost{color:#ff4d4f;background-color:transparent;border-color:#ff4d4f;box-shadow:none;}:where(.css-1me4733).ant-btn-dashed.ant-btn-dangerous.ant-btn-background-ghost:not(:disabled):hover{background-color:transparent;}:where(.css-1me4733).ant-btn-dashed.ant-btn-dangerous.ant-btn-background-ghost:not(:disabled):active{background-color:transparent;}:where(.css-1me4733).ant-btn-dashed.ant-btn-dangerous.ant-btn-background-ghost:disabled{cursor:not-allowed;color:rgba(0, 0, 0, 0.25);border-color:#d9d9d9;}:where(.css-1me4733).ant-btn-dashed.ant-btn-dangerous:disabled{cursor:not-allowed;border-color:#d9d9d9;color:rgba(0, 0, 0, 0.25);background-color:rgba(0, 0, 0, 0.04);box-shadow:none;}:where(.css-1me4733).ant-btn-link{color:#1677ff;}:where(.css-1me4733).ant-btn-link:not(:disabled):hover{color:#69b1ff;}:where(.css-1me4733).ant-btn-link:not(:disabled):active{color:#0958d9;}:where(.css-1me4733).ant-btn-link:disabled{cursor:not-allowed;color:rgba(0, 0, 0, 0.25);}:where(.css-1me4733).ant-btn-link.ant-btn-dangerous{color:#ff4d4f;}:where(.css-1me4733).ant-btn-link.ant-btn-dangerous:not(:disabled):hover{color:#ff7875;}:where(.css-1me4733).ant-btn-link.ant-btn-dangerous:not(:disabled):active{color:#d9363e;}:where(.css-1me4733).ant-btn-link.ant-btn-dangerous:disabled{cursor:not-allowed;color:rgba(0, 0, 0, 0.25);}:where(.css-1me4733).ant-btn-text:not(:disabled):hover{color:rgba(0, 0, 0, 0.88);background-color:rgba(0, 0, 0, 0.06);}:where(.css-1me4733).ant-btn-text:not(:disabled):active{color:rgba(0, 0, 0, 0.88);background-color:rgba(0, 0, 0, 0.15);}:where(.css-1me4733).ant-btn-text:disabled{cursor:not-allowed;color:rgba(0, 0, 0, 0.25);}:where(.css-1me4733).ant-btn-text.ant-btn-dangerous{color:#ff4d4f;}:where(.css-1me4733).ant-btn-text.ant-btn-dangerous:disabled{cursor:not-allowed;color:rgba(0, 0, 0, 0.25);}:where(.css-1me4733).ant-btn-text.ant-btn-dangerous:not(:disabled):hover{color:#ff7875;background-color:#fff2f0;}:where(.css-1me4733).ant-btn-text.ant-btn-dangerous:not(:disabled):active{color:#ff7875;background-color:#fff2f0;}:where(.css-1me4733).ant-btn-disabled{cursor:not-allowed;border-color:#d9d9d9;color:rgba(0, 0, 0, 0.25);background-color:rgba(0, 0, 0, 0.04);box-shadow:none;}:where(.css-1me4733).ant-btn-disabled.ant-btn:hover{cursor:not-allowed;border-color:#d9d9d9;color:rgba(0, 0, 0, 0.25);background-color:rgba(0, 0, 0, 0.04);box-shadow:none;}:where(.css-1me4733).ant-btn-group{position:relative;display:inline-flex;}:where(.css-1me4733).ant-btn-group >span:not(:last-child),:where(.css-1me4733).ant-btn-group >.ant-btn:not(:last-child),:where(.css-1me4733).ant-btn-group >span:not(:last-child)>.ant-btn,:where(.css-1me4733).ant-btn-group >.ant-btn:not(:last-child)>.ant-btn{border-start-end-radius:0;border-end-end-radius:0;}:where(.css-1me4733).ant-btn-group >span:not(:first-child),:where(.css-1me4733).ant-btn-group >.ant-btn:not(:first-child){margin-inline-start:-1px;}:where(.css-1me4733).ant-btn-group >span:not(:first-child),:where(.css-1me4733).ant-btn-group >.ant-btn:not(:first-child),:where(.css-1me4733).ant-btn-group >span:not(:first-child)>.ant-btn,:where(.css-1me4733).ant-btn-group >.ant-btn:not(:first-child)>.ant-btn{border-start-start-radius:0;border-end-start-radius:0;}:where(.css-1me4733).ant-btn-group .ant-btn{position:relative;z-index:1;}:where(.css-1me4733).ant-btn-group .ant-btn:hover,:where(.css-1me4733).ant-btn-group .ant-btn:focus,:where(.css-1me4733).ant-btn-group .ant-btn:active{z-index:2;}:where(.css-1me4733).ant-btn-group .ant-btn[disabled]{z-index:0;}:where(.css-1me4733).ant-btn-group .ant-btn-icon-only{font-size:14px;}:where(.css-1me4733).ant-btn-group >span:not(:last-child):not(:disabled),:where(.css-1me4733).ant-btn-group >.ant-btn-primary:not(:last-child):not(:disabled),:where(.css-1me4733).ant-btn-group >span:not(:last-child)>.ant-btn-primary:not(:disabled),:where(.css-1me4733).ant-btn-group >.ant-btn-primary:not(:last-child)>.ant-btn-primary:not(:disabled){border-inline-end-color:#4096ff;}:where(.css-1me4733).ant-btn-group >span:not(:first-child):not(:disabled),:where(.css-1me4733).ant-btn-group >.ant-btn-primary:not(:first-child):not(:disabled),:where(.css-1me4733).ant-btn-group >span:not(:first-child)>.ant-btn-primary:not(:disabled),:where(.css-1me4733).ant-btn-group >.ant-btn-primary:not(:first-child)>.ant-btn-primary:not(:disabled){border-inline-start-color:#4096ff;}:where(.css-1me4733).ant-btn-group >span:not(:last-child):not(:disabled),:where(.css-1me4733).ant-btn-group >.ant-btn-danger:not(:last-child):not(:disabled),:where(.css-1me4733).ant-btn-group >span:not(:last-child)>.ant-btn-danger:not(:disabled),:where(.css-1me4733).ant-btn-group >.ant-btn-danger:not(:last-child)>.ant-btn-danger:not(:disabled){border-inline-end-color:#ff7875;}:where(.css-1me4733).ant-btn-group >span:not(:first-child):not(:disabled),:where(.css-1me4733).ant-btn-group >.ant-btn-danger:not(:first-child):not(:disabled),:where(.css-1me4733).ant-btn-group >span:not(:first-child)>.ant-btn-danger:not(:disabled),:where(.css-1me4733).ant-btn-group >.ant-btn-danger:not(:first-child)>.ant-btn-danger:not(:disabled){border-inline-start-color:#ff7875;}:where(.css-1me4733).ant-btn-compact-item:not(.ant-btn-compact-last-item){margin-inline-end:-1px;}:where(.css-1me4733).ant-btn-compact-item:hover,:where(.css-1me4733).ant-btn-compact-item:active{z-index:2;}:where(.css-1me4733).ant-btn-compact-item[disabled]{z-index:0;}:where(.css-1me4733).ant-btn-compact-item:not(.ant-btn-compact-first-item):not(.ant-btn-compact-last-item){border-radius:0;}:where(.css-1me4733).ant-btn-compact-item:not(.ant-btn-compact-last-item).ant-btn-compact-first-item,:where(.css-1me4733).ant-btn-compact-item:not(.ant-btn-compact-last-item).ant-btn-compact-first-item.ant-btn-sm,:where(.css-1me4733).ant-btn-compact-item:not(.ant-btn-compact-last-item).ant-btn-compact-first-item.ant-btn-lg{border-start-end-radius:0;border-end-end-radius:0;}:where(.css-1me4733).ant-btn-compact-item:not(.ant-btn-compact-first-item).ant-btn-compact-last-item,:where(.css-1me4733).ant-btn-compact-item:not(.ant-btn-compact-first-item).ant-btn-compact-last-item.ant-btn-sm,:where(.css-1me4733).ant-btn-compact-item:not(.ant-btn-compact-first-item).ant-btn-compact-last-item.ant-btn-lg{border-start-start-radius:0;border-end-start-radius:0;}:where(.css-1me4733).ant-btn-compact-vertical-item:not(.ant-btn-compact-vertical-last-item){margin-bottom:-1px;}:where(.css-1me4733).ant-btn-compact-vertical-item:hover,:where(.css-1me4733).ant-btn-compact-vertical-item:focus,:where(.css-1me4733).ant-btn-compact-vertical-item:active{z-index:2;}:where(.css-1me4733).ant-btn-compact-vertical-item[disabled]{z-index:0;}:where(.css-1me4733).ant-btn-compact-vertical-item:not(.ant-btn-compact-vertical-first-item):not(.ant-btn-compact-vertical-last-item){border-radius:0;}:where(.css-1me4733).ant-btn-compact-vertical-item.ant-btn-compact-vertical-first-item:not(.ant-btn-compact-vertical-last-item),:where(.css-1me4733).ant-btn-compact-vertical-item.ant-btn-compact-vertical-first-item:not(.ant-btn-compact-vertical-last-item).ant-btn-sm,:where(.css-1me4733).ant-btn-compact-vertical-item.ant-btn-compact-vertical-first-item:not(.ant-btn-compact-vertical-last-item).ant-btn-lg{border-end-end-radius:0;border-end-start-radius:0;}:where(.css-1me4733).ant-btn-compact-vertical-item.ant-btn-compact-vertical-last-item:not(.ant-btn-compact-vertical-first-item),:where(.css-1me4733).ant-btn-compact-vertical-item.ant-btn-compact-vertical-last-item:not(.ant-btn-compact-vertical-first-item).ant-btn-sm,:where(.css-1me4733).ant-btn-compact-vertical-item.ant-btn-compact-vertical-last-item:not(.ant-btn-compact-vertical-first-item).ant-btn-lg{border-start-start-radius:0;border-start-end-radius:0;}</style><style data-token-hash="1wmd7ff" data-css-hash="vaxyn3">:where(.css-1me4733)[class^="ant-wave"],:where(.css-1me4733)[class*=" ant-wave"]{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';font-size:14px;box-sizing:border-box;}:where(.css-1me4733)[class^="ant-wave"]::before,:where(.css-1me4733)[class*=" ant-wave"]::before,:where(.css-1me4733)[class^="ant-wave"]::after,:where(.css-1me4733)[class*=" ant-wave"]::after{box-sizing:border-box;}:where(.css-1me4733)[class^="ant-wave"] [class^="ant-wave"],:where(.css-1me4733)[class*=" ant-wave"] [class^="ant-wave"],:where(.css-1me4733)[class^="ant-wave"] [class*=" ant-wave"],:where(.css-1me4733)[class*=" ant-wave"] [class*=" ant-wave"]{box-sizing:border-box;}:where(.css-1me4733)[class^="ant-wave"] [class^="ant-wave"]::before,:where(.css-1me4733)[class*=" ant-wave"] [class^="ant-wave"]::before,:where(.css-1me4733)[class^="ant-wave"] [class*=" ant-wave"]::before,:where(.css-1me4733)[class*=" ant-wave"] [class*=" ant-wave"]::before,:where(.css-1me4733)[class^="ant-wave"] [class^="ant-wave"]::after,:where(.css-1me4733)[class*=" ant-wave"] [class^="ant-wave"]::after,:where(.css-1me4733)[class^="ant-wave"] [class*=" ant-wave"]::after,:where(.css-1me4733)[class*=" ant-wave"] [class*=" ant-wave"]::after{box-sizing:border-box;}:where(.css-1me4733).ant-wave{position:absolute;background:transparent;pointer-events:none;box-sizing:border-box;color:var(--wave-color, #1677ff);box-shadow:0 0 0 0 currentcolor;opacity:0.2;}:where(.css-1me4733).ant-wave.wave-motion-appear{transition:box-shadow 0.4s cubic-bezier(0.08, 0.82, 0.17, 1),opacity 2s cubic-bezier(0.08, 0.82, 0.17, 1);}:where(.css-1me4733).ant-wave.wave-motion-appear-active{box-shadow:0 0 0 6px currentcolor;opacity:0;}</style><style data-token-hash="1wmd7ff" data-css-hash="1bfzz8p">:where(.css-1me4733)[class^="ant-menu"],:where(.css-1me4733)[class*=" ant-menu"]{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';font-size:14px;box-sizing:border-box;}:where(.css-1me4733)[class^="ant-menu"]::before,:where(.css-1me4733)[class*=" ant-menu"]::before,:where(.css-1me4733)[class^="ant-menu"]::after,:where(.css-1me4733)[class*=" ant-menu"]::after{box-sizing:border-box;}:where(.css-1me4733)[class^="ant-menu"] [class^="ant-menu"],:where(.css-1me4733)[class*=" ant-menu"] [class^="ant-menu"],:where(.css-1me4733)[class^="ant-menu"] [class*=" ant-menu"],:where(.css-1me4733)[class*=" ant-menu"] [class*=" ant-menu"]{box-sizing:border-box;}:where(.css-1me4733)[class^="ant-menu"] [class^="ant-menu"]::before,:where(.css-1me4733)[class*=" ant-menu"] [class^="ant-menu"]::before,:where(.css-1me4733)[class^="ant-menu"] [class*=" ant-menu"]::before,:where(.css-1me4733)[class*=" ant-menu"] [class*=" ant-menu"]::before,:where(.css-1me4733)[class^="ant-menu"] [class^="ant-menu"]::after,:where(.css-1me4733)[class*=" ant-menu"] [class^="ant-menu"]::after,:where(.css-1me4733)[class^="ant-menu"] [class*=" ant-menu"]::after,:where(.css-1me4733)[class*=" ant-menu"] [class*=" ant-menu"]::after{box-sizing:border-box;}:where(.css-1me4733) .ant-menu::before{display:table;content:"";}:where(.css-1me4733) .ant-menu::after{display:table;clear:both;content:"";}:where(.css-1me4733) .ant-menu-hidden{display:none;}:where(.css-1me4733).ant-menu-submenu-hidden{display:none;}:where(.css-1me4733).ant-menu{box-sizing:border-box;margin:0;padding:0;color:rgba(0, 0, 0, 0.88);font-size:14px;line-height:0;list-style:none;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';margin-bottom:0;padding-inline-start:0;outline:none;transition:background 0.3s,width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;}:where(.css-1me4733).ant-menu::before{display:table;content:"";}:where(.css-1me4733).ant-menu::after{display:table;clear:both;content:"";}:where(.css-1me4733).ant-menu ul,:where(.css-1me4733).ant-menu ol{margin:0;padding:0;list-style:none;}:where(.css-1me4733).ant-menu-overflow{display:flex;}:where(.css-1me4733).ant-menu-overflow .ant-menu-item{flex:none;}:where(.css-1me4733).ant-menu .ant-menu-item,:where(.css-1me4733).ant-menu .ant-menu-submenu,:where(.css-1me4733).ant-menu .ant-menu-submenu-title{border-radius:8px;}:where(.css-1me4733).ant-menu .ant-menu-item-group-title{padding:8px 16px;font-size:14px;line-height:1.5714285714285714;transition:all 0.3s;}:where(.css-1me4733).ant-menu-horizontal .ant-menu-submenu{transition:border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);}:where(.css-1me4733).ant-menu .ant-menu-submenu,:where(.css-1me4733).ant-menu .ant-menu-submenu-inline{transition:border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),padding 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);}:where(.css-1me4733).ant-menu .ant-menu-submenu .ant-menu-sub{cursor:initial;transition:background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);}:where(.css-1me4733).ant-menu .ant-menu-title-content{transition:color 0.3s;}:where(.css-1me4733).ant-menu .ant-menu-item a::before{position:absolute;inset:0;background-color:transparent;content:"";}:where(.css-1me4733).ant-menu .ant-menu-item-divider{overflow:hidden;line-height:0;border-color:rgba(5, 5, 5, 0.06);border-style:solid;border-width:0;border-top-width:1px;margin-block:1px;padding:0;}:where(.css-1me4733).ant-menu .ant-menu-item-divider-dashed{border-style:dashed;}:where(.css-1me4733).ant-menu .ant-menu-item,:where(.css-1me4733).ant-menu .ant-menu-submenu-title{position:relative;display:block;margin:0;white-space:nowrap;cursor:pointer;transition:border-color 0.3s,background 0.3s,padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);}:where(.css-1me4733).ant-menu .ant-menu-item .ant-menu-item-icon,:where(.css-1me4733).ant-menu .ant-menu-submenu-title .ant-menu-item-icon,:where(.css-1me4733).ant-menu .ant-menu-item .anticon,:where(.css-1me4733).ant-menu .ant-menu-submenu-title .anticon{min-width:14px;font-size:14px;transition:font-size 0.2s cubic-bezier(0.215, 0.61, 0.355, 1),margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),color 0.3s;}:where(.css-1me4733).ant-menu .ant-menu-item .ant-menu-item-icon +span,:where(.css-1me4733).ant-menu .ant-menu-submenu-title .ant-menu-item-icon +span,:where(.css-1me4733).ant-menu .ant-menu-item .anticon +span,:where(.css-1me4733).ant-menu .ant-menu-submenu-title .anticon +span{margin-inline-start:10px;opacity:1;transition:opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),margin 0.3s,color 0.3s;}:where(.css-1me4733).ant-menu .ant-menu-item .ant-menu-item-icon,:where(.css-1me4733).ant-menu .ant-menu-submenu-title .ant-menu-item-icon{display:inline-flex;align-items:center;color:inherit;font-style:normal;line-height:0;text-align:center;text-transform:none;vertical-align:-0.125em;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}:where(.css-1me4733).ant-menu .ant-menu-item .ant-menu-item-icon >*,:where(.css-1me4733).ant-menu .ant-menu-submenu-title .ant-menu-item-icon >*{line-height:1;}:where(.css-1me4733).ant-menu .ant-menu-item .ant-menu-item-icon svg,:where(.css-1me4733).ant-menu .ant-menu-submenu-title .ant-menu-item-icon svg{display:inline-block;}:where(.css-1me4733).ant-menu .ant-menu-item.ant-menu-item-only-child >.anticon,:where(.css-1me4733).ant-menu .ant-menu-submenu-title.ant-menu-item-only-child >.anticon,:where(.css-1me4733).ant-menu .ant-menu-item.ant-menu-item-only-child >.ant-menu-item-icon,:where(.css-1me4733).ant-menu .ant-menu-submenu-title.ant-menu-item-only-child >.ant-menu-item-icon{margin-inline-end:0;}:where(.css-1me4733).ant-menu .ant-menu-item-disabled,:where(.css-1me4733).ant-menu .ant-menu-submenu-disabled{background:none!important;cursor:not-allowed;}:where(.css-1me4733).ant-menu .ant-menu-item-disabled::after,:where(.css-1me4733).ant-menu .ant-menu-submenu-disabled::after{border-color:transparent!important;}:where(.css-1me4733).ant-menu .ant-menu-item-disabled a,:where(.css-1me4733).ant-menu .ant-menu-submenu-disabled a{color:inherit!important;}:where(.css-1me4733).ant-menu .ant-menu-item-disabled >.ant-menu-submenu-title,:where(.css-1me4733).ant-menu .ant-menu-submenu-disabled >.ant-menu-submenu-title{color:inherit!important;cursor:not-allowed;}:where(.css-1me4733).ant-menu .ant-menu-item-group .ant-menu-item-group-list{margin:0;padding:0;}:where(.css-1me4733).ant-menu .ant-menu-item-group .ant-menu-item-group-list .ant-menu-item,:where(.css-1me4733).ant-menu .ant-menu-item-group .ant-menu-item-group-list .ant-menu-submenu-title{padding-inline:28px 16px;}:where(.css-1me4733).ant-menu-submenu-popup{position:absolute;z-index:1050;background:transparent;border-radius:8px;box-shadow:none;transform-origin:0 0;}:where(.css-1me4733).ant-menu-submenu-popup::before{position:absolute;inset:-7px 0 0;z-index:-1;width:100%;height:100%;opacity:0;content:"";}:where(.css-1me4733).ant-menu-submenu-placement-rightTop::before{top:0;inset-inline-start:-7px;}:where(.css-1me4733).ant-menu-submenu >.ant-menu{border-radius:8px;}:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-item,:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-submenu-title{position:relative;display:block;margin:0;white-space:nowrap;cursor:pointer;transition:border-color 0.3s,background 0.3s,padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);}:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-item .ant-menu-item-icon,:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-submenu-title .ant-menu-item-icon,:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-item .anticon,:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-submenu-title .anticon{min-width:14px;font-size:14px;transition:font-size 0.2s cubic-bezier(0.215, 0.61, 0.355, 1),margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),color 0.3s;}:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-item .ant-menu-item-icon +span,:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-submenu-title .ant-menu-item-icon +span,:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-item .anticon +span,:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-submenu-title .anticon +span{margin-inline-start:10px;opacity:1;transition:opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),margin 0.3s,color 0.3s;}:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-item .ant-menu-item-icon,:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-submenu-title .ant-menu-item-icon{display:inline-flex;align-items:center;color:inherit;font-style:normal;line-height:0;text-align:center;text-transform:none;vertical-align:-0.125em;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-item .ant-menu-item-icon >*,:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-submenu-title .ant-menu-item-icon >*{line-height:1;}:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-item .ant-menu-item-icon svg,:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-submenu-title .ant-menu-item-icon svg{display:inline-block;}:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-item.ant-menu-item-only-child >.anticon,:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-submenu-title.ant-menu-item-only-child >.anticon,:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-item.ant-menu-item-only-child >.ant-menu-item-icon,:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-submenu-title.ant-menu-item-only-child >.ant-menu-item-icon{margin-inline-end:0;}:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-item-disabled,:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-submenu-disabled{background:none!important;cursor:not-allowed;}:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-item-disabled::after,:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-submenu-disabled::after{border-color:transparent!important;}:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-item-disabled a,:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-submenu-disabled a{color:inherit!important;}:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-item-disabled >.ant-menu-submenu-title,:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-submenu-disabled >.ant-menu-submenu-title{color:inherit!important;cursor:not-allowed;}:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-submenu-expand-icon,:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-submenu-arrow{position:absolute;top:50%;inset-inline-end:16px;width:10px;color:currentcolor;transform:translateY(-50%);transition:transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),opacity 0.3s;}:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-submenu-arrow::before,:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-submenu-arrow::after{position:absolute;width:6px;height:1.5px;background-color:currentcolor;border-radius:6px;transition:background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);content:"";}:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-submenu-arrow::before{transform:rotate(45deg) translateY(-2.5px);}:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-submenu-arrow::after{transform:rotate(-45deg) translateY(2.5px);}:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-item,:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-submenu>.ant-menu-submenu-title{border-radius:4px;}:where(.css-1me4733).ant-menu-submenu >.ant-menu .ant-menu-submenu-title::after{transition:transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);}:where(.css-1me4733).ant-menu .ant-menu-submenu-expand-icon,:where(.css-1me4733).ant-menu .ant-menu-submenu-arrow{position:absolute;top:50%;inset-inline-end:16px;width:10px;color:currentcolor;transform:translateY(-50%);transition:transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),opacity 0.3s;}:where(.css-1me4733).ant-menu .ant-menu-submenu-arrow::before,:where(.css-1me4733).ant-menu .ant-menu-submenu-arrow::after{position:absolute;width:6px;height:1.5px;background-color:currentcolor;border-radius:6px;transition:background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);content:"";}:where(.css-1me4733).ant-menu .ant-menu-submenu-arrow::before{transform:rotate(45deg) translateY(-2.5px);}:where(.css-1me4733).ant-menu .ant-menu-submenu-arrow::after{transform:rotate(-45deg) translateY(2.5px);}:where(.css-1me4733).ant-menu-inline-collapsed .ant-menu-submenu-arrow::before,:where(.css-1me4733).ant-menu-inline .ant-menu-submenu-arrow::before{transform:rotate(-45deg) translateX(2.5px);}:where(.css-1me4733).ant-menu-inline-collapsed .ant-menu-submenu-arrow::after,:where(.css-1me4733).ant-menu-inline .ant-menu-submenu-arrow::after{transform:rotate(45deg) translateX(-2.5px);}:where(.css-1me4733).ant-menu .ant-menu-submenu-open.ant-menu-submenu-inline>.ant-menu-submenu-title>.ant-menu-submenu-arrow{transform:translateY(-2px);}:where(.css-1me4733).ant-menu .ant-menu-submenu-open.ant-menu-submenu-inline>.ant-menu-submenu-title>.ant-menu-submenu-arrow::after{transform:rotate(-45deg) translateX(-2.5px);}:where(.css-1me4733).ant-menu .ant-menu-submenu-open.ant-menu-submenu-inline>.ant-menu-submenu-title>.ant-menu-submenu-arrow::before{transform:rotate(45deg) translateX(2.5px);}:where(.css-1me4733).ant-layout-header .ant-menu{line-height:inherit;}:where(.css-1me4733).ant-menu-horizontal{line-height:46px;border:0;border-bottom:1px solid rgba(5, 5, 5, 0.06);box-shadow:none;}:where(.css-1me4733).ant-menu-horizontal::after{display:block;clear:both;height:0;content:"\20";}:where(.css-1me4733).ant-menu-horizontal .ant-menu-item,:where(.css-1me4733).ant-menu-horizontal .ant-menu-submenu{position:relative;display:inline-block;vertical-align:bottom;padding-inline:16px;}:where(.css-1me4733).ant-menu-horizontal >.ant-menu-item:hover,:where(.css-1me4733).ant-menu-horizontal >.ant-menu-item-active,:where(.css-1me4733).ant-menu-horizontal >.ant-menu-submenu .ant-menu-submenu-title:hover{background-color:transparent;}:where(.css-1me4733).ant-menu-horizontal .ant-menu-item,:where(.css-1me4733).ant-menu-horizontal .ant-menu-submenu-title{transition:border-color 0.3s,background 0.3s;}:where(.css-1me4733).ant-menu-horizontal .ant-menu-submenu-arrow{display:none;}:where(.css-1me4733).ant-menu-inline.ant-menu-root,:where(.css-1me4733).ant-menu-vertical.ant-menu-root{box-shadow:none;}:where(.css-1me4733).ant-menu-inline .ant-menu-item,:where(.css-1me4733).ant-menu-vertical .ant-menu-item{position:relative;}:where(.css-1me4733).ant-menu-inline .ant-menu-item,:where(.css-1me4733).ant-menu-vertical .ant-menu-item,:where(.css-1me4733).ant-menu-inline .ant-menu-submenu-title,:where(.css-1me4733).ant-menu-vertical .ant-menu-submenu-title{height:40px;line-height:40px;padding-inline:16px;overflow:hidden;text-overflow:ellipsis;margin-inline:4px;margin-block:4px;width:calc(100% - 8px);}:where(.css-1me4733).ant-menu-inline .ant-menu-submenu,:where(.css-1me4733).ant-menu-vertical .ant-menu-submenu{padding-bottom:0.02px;}:where(.css-1me4733).ant-menu-inline >.ant-menu-item,:where(.css-1me4733).ant-menu-vertical >.ant-menu-item,:where(.css-1me4733).ant-menu-inline >.ant-menu-submenu>.ant-menu-submenu-title,:where(.css-1me4733).ant-menu-vertical >.ant-menu-submenu>.ant-menu-submenu-title{height:40px;line-height:40px;}:where(.css-1me4733).ant-menu-inline .ant-menu-item-group-list .ant-menu-submenu-title,:where(.css-1me4733).ant-menu-vertical .ant-menu-item-group-list .ant-menu-submenu-title,:where(.css-1me4733).ant-menu-inline .ant-menu-submenu-title,:where(.css-1me4733).ant-menu-vertical .ant-menu-submenu-title{padding-inline-end:34px;}:where(.css-1me4733).ant-menu-submenu-popup .ant-menu-vertical{box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08),0 3px 6px -4px rgba(0, 0, 0, 0.12),0 9px 28px 8px rgba(0, 0, 0, 0.05);}:where(.css-1me4733).ant-menu-submenu-popup .ant-menu-vertical .ant-menu-item{position:relative;}:where(.css-1me4733).ant-menu-submenu-popup .ant-menu-vertical .ant-menu-item,:where(.css-1me4733).ant-menu-submenu-popup .ant-menu-vertical .ant-menu-submenu-title{height:40px;line-height:40px;padding-inline:16px;overflow:hidden;text-overflow:ellipsis;margin-inline:4px;margin-block:4px;width:calc(100% - 8px);}:where(.css-1me4733).ant-menu-submenu-popup .ant-menu-vertical .ant-menu-submenu{padding-bottom:0.02px;}:where(.css-1me4733).ant-menu-submenu-popup .ant-menu-vertical >.ant-menu-item,:where(.css-1me4733).ant-menu-submenu-popup .ant-menu-vertical >.ant-menu-submenu>.ant-menu-submenu-title{height:40px;line-height:40px;}:where(.css-1me4733).ant-menu-submenu-popup .ant-menu-vertical .ant-menu-item-group-list .ant-menu-submenu-title,:where(.css-1me4733).ant-menu-submenu-popup .ant-menu-vertical .ant-menu-submenu-title{padding-inline-end:34px;}:where(.css-1me4733).ant-menu-submenu-popup .ant-menu-vertical.ant-menu-sub{min-width:160px;max-height:calc(100vh - 100px);padding:0;overflow:hidden;border-inline-end:0;}:where(.css-1me4733).ant-menu-submenu-popup .ant-menu-vertical.ant-menu-sub:not([class*='-active']){overflow-x:hidden;overflow-y:auto;}:where(.css-1me4733).ant-menu-inline{width:100%;}:where(.css-1me4733).ant-menu-inline.ant-menu-root .ant-menu-item,:where(.css-1me4733).ant-menu-inline.ant-menu-root .ant-menu-submenu-title{display:flex;align-items:center;transition:border-color 0.3s,background 0.3s,padding 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);}:where(.css-1me4733).ant-menu-inline.ant-menu-root .ant-menu-item >.ant-menu-title-content,:where(.css-1me4733).ant-menu-inline.ant-menu-root .ant-menu-submenu-title >.ant-menu-title-content{flex:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;}:where(.css-1me4733).ant-menu-inline.ant-menu-root .ant-menu-item >*,:where(.css-1me4733).ant-menu-inline.ant-menu-root .ant-menu-submenu-title >*{flex:none;}:where(.css-1me4733).ant-menu-inline .ant-menu-sub.ant-menu-inline{padding:0;border:0;border-radius:0;box-shadow:none;}:where(.css-1me4733).ant-menu-inline .ant-menu-sub.ant-menu-inline>.ant-menu-submenu>.ant-menu-submenu-title{height:40px;line-height:40px;list-style-position:inside;list-style-type:disc;}:where(.css-1me4733).ant-menu-inline .ant-menu-sub.ant-menu-inline .ant-menu-item-group-title{padding-inline-start:32px;}:where(.css-1me4733).ant-menu-inline .ant-menu-item{height:40px;line-height:40px;list-style-position:inside;list-style-type:disc;}:where(.css-1me4733).ant-menu-inline-collapsed{width:80px;}:where(.css-1me4733).ant-menu-inline-collapsed.ant-menu-root .ant-menu-item >.ant-menu-inline-collapsed-noicon,:where(.css-1me4733).ant-menu-inline-collapsed.ant-menu-root .ant-menu-submenu .ant-menu-submenu-title >.ant-menu-inline-collapsed-noicon{font-size:16px;text-align:center;}:where(.css-1me4733).ant-menu-inline-collapsed >.ant-menu-item,:where(.css-1me4733).ant-menu-inline-collapsed >.ant-menu-item-group>.ant-menu-item-group-list>.ant-menu-item,:where(.css-1me4733).ant-menu-inline-collapsed >.ant-menu-item-group>.ant-menu-item-group-list>.ant-menu-submenu>.ant-menu-submenu-title,:where(.css-1me4733).ant-menu-inline-collapsed >.ant-menu-submenu>.ant-menu-submenu-title{inset-inline-start:0;padding-inline:calc(50% - 12px);text-overflow:clip;}:where(.css-1me4733).ant-menu-inline-collapsed >.ant-menu-item .ant-menu-submenu-arrow,:where(.css-1me4733).ant-menu-inline-collapsed >.ant-menu-item-group>.ant-menu-item-group-list>.ant-menu-item .ant-menu-submenu-arrow,:where(.css-1me4733).ant-menu-inline-collapsed >.ant-menu-item-group>.ant-menu-item-group-list>.ant-menu-submenu>.ant-menu-submenu-title .ant-menu-submenu-arrow,:where(.css-1me4733).ant-menu-inline-collapsed >.ant-menu-submenu>.ant-menu-submenu-title .ant-menu-submenu-arrow,:where(.css-1me4733).ant-menu-inline-collapsed >.ant-menu-item .ant-menu-submenu-expand-icon,:where(.css-1me4733).ant-menu-inline-collapsed >.ant-menu-item-group>.ant-menu-item-group-list>.ant-menu-item .ant-menu-submenu-expand-icon,:where(.css-1me4733).ant-menu-inline-collapsed >.ant-menu-item-group>.ant-menu-item-group-list>.ant-menu-submenu>.ant-menu-submenu-title .ant-menu-submenu-expand-icon,:where(.css-1me4733).ant-menu-inline-collapsed >.ant-menu-submenu>.ant-menu-submenu-title .ant-menu-submenu-expand-icon{opacity:0;}:where(.css-1me4733).ant-menu-inline-collapsed >.ant-menu-item .ant-menu-item-icon,:where(.css-1me4733).ant-menu-inline-collapsed >.ant-menu-item-group>.ant-menu-item-group-list>.ant-menu-item .ant-menu-item-icon,:where(.css-1me4733).ant-menu-inline-collapsed >.ant-menu-item-group>.ant-menu-item-group-list>.ant-menu-submenu>.ant-menu-submenu-title .ant-menu-item-icon,:where(.css-1me4733).ant-menu-inline-collapsed >.ant-menu-submenu>.ant-menu-submenu-title .ant-menu-item-icon,:where(.css-1me4733).ant-menu-inline-collapsed >.ant-menu-item .anticon,:where(.css-1me4733).ant-menu-inline-collapsed >.ant-menu-item-group>.ant-menu-item-group-list>.ant-menu-item .anticon,:where(.css-1me4733).ant-menu-inline-collapsed >.ant-menu-item-group>.ant-menu-item-group-list>.ant-menu-submenu>.ant-menu-submenu-title .anticon,:where(.css-1me4733).ant-menu-inline-collapsed >.ant-menu-submenu>.ant-menu-submenu-title .anticon{margin:0;font-size:16px;line-height:40px;}:where(.css-1me4733).ant-menu-inline-collapsed >.ant-menu-item .ant-menu-item-icon +span,:where(.css-1me4733).ant-menu-inline-collapsed >.ant-menu-item-group>.ant-menu-item-group-list>.ant-menu-item .ant-menu-item-icon +span,:where(.css-1me4733).ant-menu-inline-collapsed >.ant-menu-item-group>.ant-menu-item-group-list>.ant-menu-submenu>.ant-menu-submenu-title .ant-menu-item-icon +span,:where(.css-1me4733).ant-menu-inline-collapsed >.ant-menu-submenu>.ant-menu-submenu-title .ant-menu-item-icon +span,:where(.css-1me4733).ant-menu-inline-collapsed >.ant-menu-item .anticon +span,:where(.css-1me4733).ant-menu-inline-collapsed >.ant-menu-item-group>.ant-menu-item-group-list>.ant-menu-item .anticon +span,:where(.css-1me4733).ant-menu-inline-collapsed >.ant-menu-item-group>.ant-menu-item-group-list>.ant-menu-submenu>.ant-menu-submenu-title .anticon +span,:where(.css-1me4733).ant-menu-inline-collapsed >.ant-menu-submenu>.ant-menu-submenu-title .anticon +span{display:inline-block;opacity:0;}:where(.css-1me4733).ant-menu-inline-collapsed .ant-menu-item-icon,:where(.css-1me4733).ant-menu-inline-collapsed .anticon{display:inline-block;}:where(.css-1me4733).ant-menu-inline-collapsed-tooltip{pointer-events:none;}:where(.css-1me4733).ant-menu-inline-collapsed-tooltip .ant-menu-item-icon,:where(.css-1me4733).ant-menu-inline-collapsed-tooltip .anticon{display:none;}:where(.css-1me4733).ant-menu-inline-collapsed-tooltip a,:where(.css-1me4733).ant-menu-inline-collapsed-tooltip a:hover{color:#fff;}:where(.css-1me4733).ant-menu-inline-collapsed .ant-menu-item-group-title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-inline:8px;}:where(.css-1me4733).ant-menu-light{color:rgba(0, 0, 0, 0.88);background:#ffffff;}:where(.css-1me4733).ant-menu-light.ant-menu-root:focus-visible{outline:4px solid #91caff;outline-offset:1px;transition:outline-offset 0s,outline 0s;}:where(.css-1me4733).ant-menu-light .ant-menu-item-group-title{color:rgba(0, 0, 0, 0.45);}:where(.css-1me4733).ant-menu-light .ant-menu-submenu-selected >.ant-menu-submenu-title{color:#1677ff;}:where(.css-1me4733).ant-menu-light .ant-menu-item-disabled,:where(.css-1me4733).ant-menu-light .ant-menu-submenu-disabled{color:rgba(0, 0, 0, 0.25)!important;}:where(.css-1me4733).ant-menu-light .ant-menu-item:hover:not(.ant-menu-item-selected):not(.ant-menu-submenu-selected),:where(.css-1me4733).ant-menu-light .ant-menu-submenu-title:hover:not(.ant-menu-item-selected):not(.ant-menu-submenu-selected){color:rgba(0, 0, 0, 0.88);}:where(.css-1me4733).ant-menu-light:not(.ant-menu-horizontal) .ant-menu-item:not(.ant-menu-item-selected):hover{background-color:rgba(0, 0, 0, 0.06);}:where(.css-1me4733).ant-menu-light:not(.ant-menu-horizontal) .ant-menu-item:not(.ant-menu-item-selected):active{background-color:#e6f4ff;}:where(.css-1me4733).ant-menu-light:not(.ant-menu-horizontal) .ant-menu-submenu-title:hover{background-color:rgba(0, 0, 0, 0.06);}:where(.css-1me4733).ant-menu-light:not(.ant-menu-horizontal) .ant-menu-submenu-title:active{background-color:#e6f4ff;}:where(.css-1me4733).ant-menu-light .ant-menu-item-danger{color:#ff4d4f;}:where(.css-1me4733).ant-menu-light .ant-menu-item-danger.ant-menu-item:hover:not(.ant-menu-item-selected):not(.ant-menu-submenu-selected){color:#ff4d4f;}:where(.css-1me4733).ant-menu-light .ant-menu-item-danger.ant-menu-item:active{background:#fff2f0;}:where(.css-1me4733).ant-menu-light .ant-menu-item a,:where(.css-1me4733).ant-menu-light .ant-menu-item a:hover{color:inherit;}:where(.css-1me4733).ant-menu-light .ant-menu-item-selected{color:#1677ff;}:where(.css-1me4733).ant-menu-light .ant-menu-item-selected.ant-menu-item-danger{color:#ff4d4f;}:where(.css-1me4733).ant-menu-light .ant-menu-item-selected a,:where(.css-1me4733).ant-menu-light .ant-menu-item-selected a:hover{color:inherit;}:where(.css-1me4733).ant-menu-light .ant-menu-item-selected{background-color:#e6f4ff;}:where(.css-1me4733).ant-menu-light .ant-menu-item-selected.ant-menu-item-danger{background-color:#fff2f0;}:where(.css-1me4733).ant-menu-light .ant-menu-item:not(.ant-menu-item-disabled):focus-visible,:where(.css-1me4733).ant-menu-light .ant-menu-submenu-title:not(.ant-menu-item-disabled):focus-visible{outline:4px solid #91caff;outline-offset:1px;transition:outline-offset 0s,outline 0s;}:where(.css-1me4733).ant-menu-light.ant-menu-submenu>.ant-menu{background-color:#ffffff;}:where(.css-1me4733).ant-menu-light.ant-menu-popup>.ant-menu{background-color:#ffffff;}:where(.css-1me4733).ant-menu-light.ant-menu-horizontal >.ant-menu-item,:where(.css-1me4733).ant-menu-light.ant-menu-horizontal >.ant-menu-submenu{top:1px;margin-top:-1px;margin-bottom:0;border-radius:0;}:where(.css-1me4733).ant-menu-light.ant-menu-horizontal >.ant-menu-item::after,:where(.css-1me4733).ant-menu-light.ant-menu-horizontal >.ant-menu-submenu::after{position:absolute;inset-inline:16px;bottom:0;border-bottom:2px solid transparent;transition:border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);content:"";}:where(.css-1me4733).ant-menu-light.ant-menu-horizontal >.ant-menu-item:hover::after,:where(.css-1me4733).ant-menu-light.ant-menu-horizontal >.ant-menu-submenu:hover::after,:where(.css-1me4733).ant-menu-light.ant-menu-horizontal >.ant-menu-item-active::after,:where(.css-1me4733).ant-menu-light.ant-menu-horizontal >.ant-menu-submenu-active::after,:where(.css-1me4733).ant-menu-light.ant-menu-horizontal >.ant-menu-item-open::after,:where(.css-1me4733).ant-menu-light.ant-menu-horizontal >.ant-menu-submenu-open::after{border-bottom-width:2px;border-bottom-color:#1677ff;}:where(.css-1me4733).ant-menu-light.ant-menu-horizontal >.ant-menu-item-selected,:where(.css-1me4733).ant-menu-light.ant-menu-horizontal >.ant-menu-submenu-selected{color:#1677ff;background-color:transparent;}:where(.css-1me4733).ant-menu-light.ant-menu-horizontal >.ant-menu-item-selected::after,:where(.css-1me4733).ant-menu-light.ant-menu-horizontal >.ant-menu-submenu-selected::after{border-bottom-width:2px;border-bottom-color:#1677ff;}:where(.css-1me4733).ant-menu-light.ant-menu-root.ant-menu-inline,:where(.css-1me4733).ant-menu-light.ant-menu-root.ant-menu-vertical{border-inline-end:1px solid rgba(5, 5, 5, 0.06);}:where(.css-1me4733).ant-menu-light.ant-menu-inline .ant-menu-sub.ant-menu-inline{background:rgba(0, 0, 0, 0.02);}:where(.css-1me4733).ant-menu-light.ant-menu-inline .ant-menu-item{position:relative;}:where(.css-1me4733).ant-menu-light.ant-menu-inline .ant-menu-item::after{position:absolute;inset-block:0;inset-inline-end:0;border-inline-end:0px solid #1677ff;transform:scaleY(0.0001);opacity:0;transition:transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1),opacity 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);content:"";}:where(.css-1me4733).ant-menu-light.ant-menu-inline .ant-menu-item.ant-menu-item-danger::after{border-inline-end-color:#ff4d4f;}:where(.css-1me4733).ant-menu-light.ant-menu-inline .ant-menu-selected::after,:where(.css-1me4733).ant-menu-light.ant-menu-inline .ant-menu-item-selected::after{transform:scaleY(1);opacity:1;transition:transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1),opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);}:where(.css-1me4733).ant-menu-dark{color:rgba(255, 255, 255, 0.65);background:#001529;}:where(.css-1me4733).ant-menu-dark.ant-menu-root:focus-visible{outline:4px solid #91caff;outline-offset:1px;transition:outline-offset 0s,outline 0s;}:where(.css-1me4733).ant-menu-dark .ant-menu-item-group-title{color:rgba(255, 255, 255, 0.65);}:where(.css-1me4733).ant-menu-dark .ant-menu-submenu-selected >.ant-menu-submenu-title{color:#fff;}:where(.css-1me4733).ant-menu-dark .ant-menu-item-disabled,:where(.css-1me4733).ant-menu-dark .ant-menu-submenu-disabled{color:rgba(255, 255, 255, 0.25)!important;}:where(.css-1me4733).ant-menu-dark .ant-menu-item:hover:not(.ant-menu-item-selected):not(.ant-menu-submenu-selected),:where(.css-1me4733).ant-menu-dark .ant-menu-submenu-title:hover:not(.ant-menu-item-selected):not(.ant-menu-submenu-selected){color:#fff;}:where(.css-1me4733).ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item:not(.ant-menu-item-selected):hover{background-color:rgba(0, 0, 0, 0.06);}:where(.css-1me4733).ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item:not(.ant-menu-item-selected):active{background-color:#1677ff;}:where(.css-1me4733).ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-submenu-title:hover{background-color:rgba(0, 0, 0, 0.06);}:where(.css-1me4733).ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-submenu-title:active{background-color:#1677ff;}:where(.css-1me4733).ant-menu-dark .ant-menu-item-danger{color:#ff4d4f;}:where(.css-1me4733).ant-menu-dark .ant-menu-item-danger.ant-menu-item:hover:not(.ant-menu-item-selected):not(.ant-menu-submenu-selected){color:#ff7875;}:where(.css-1me4733).ant-menu-dark .ant-menu-item-danger.ant-menu-item:active{background:#ff4d4f;}:where(.css-1me4733).ant-menu-dark .ant-menu-item a,:where(.css-1me4733).ant-menu-dark .ant-menu-item a:hover{color:inherit;}:where(.css-1me4733).ant-menu-dark .ant-menu-item-selected{color:#fff;}:where(.css-1me4733).ant-menu-dark .ant-menu-item-selected.ant-menu-item-danger{color:#fff;}:where(.css-1me4733).ant-menu-dark .ant-menu-item-selected a,:where(.css-1me4733).ant-menu-dark .ant-menu-item-selected a:hover{color:inherit;}:where(.css-1me4733).ant-menu-dark .ant-menu-item-selected{background-color:#1677ff;}:where(.css-1me4733).ant-menu-dark .ant-menu-item-selected.ant-menu-item-danger{background-color:#ff4d4f;}:where(.css-1me4733).ant-menu-dark .ant-menu-item:not(.ant-menu-item-disabled):focus-visible,:where(.css-1me4733).ant-menu-dark .ant-menu-submenu-title:not(.ant-menu-item-disabled):focus-visible{outline:4px solid #91caff;outline-offset:1px;transition:outline-offset 0s,outline 0s;}:where(.css-1me4733).ant-menu-dark.ant-menu-submenu>.ant-menu{background-color:#001529;}:where(.css-1me4733).ant-menu-dark.ant-menu-popup>.ant-menu{background-color:#001529;}:where(.css-1me4733).ant-menu-dark.ant-menu-horizontal{border-bottom:0;}:where(.css-1me4733).ant-menu-dark.ant-menu-horizontal >.ant-menu-item,:where(.css-1me4733).ant-menu-dark.ant-menu-horizontal >.ant-menu-submenu{top:0;margin-top:0;margin-bottom:0;border-radius:0;}:where(.css-1me4733).ant-menu-dark.ant-menu-horizontal >.ant-menu-item::after,:where(.css-1me4733).ant-menu-dark.ant-menu-horizontal >.ant-menu-submenu::after{position:absolute;inset-inline:16px;bottom:0;border-bottom:0px solid transparent;transition:border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);content:"";}:where(.css-1me4733).ant-menu-dark.ant-menu-horizontal >.ant-menu-item:hover::after,:where(.css-1me4733).ant-menu-dark.ant-menu-horizontal >.ant-menu-submenu:hover::after,:where(.css-1me4733).ant-menu-dark.ant-menu-horizontal >.ant-menu-item-active::after,:where(.css-1me4733).ant-menu-dark.ant-menu-horizontal >.ant-menu-submenu-active::after,:where(.css-1me4733).ant-menu-dark.ant-menu-horizontal >.ant-menu-item-open::after,:where(.css-1me4733).ant-menu-dark.ant-menu-horizontal >.ant-menu-submenu-open::after{border-bottom-width:0;border-bottom-color:#fff;}:where(.css-1me4733).ant-menu-dark.ant-menu-horizontal >.ant-menu-item-selected,:where(.css-1me4733).ant-menu-dark.ant-menu-horizontal >.ant-menu-submenu-selected{color:#fff;background-color:#1677ff;}:where(.css-1me4733).ant-menu-dark.ant-menu-horizontal >.ant-menu-item-selected::after,:where(.css-1me4733).ant-menu-dark.ant-menu-horizontal >.ant-menu-submenu-selected::after{border-bottom-width:0;border-bottom-color:#fff;}:where(.css-1me4733).ant-menu-dark.ant-menu-root.ant-menu-inline,:where(.css-1me4733).ant-menu-dark.ant-menu-root.ant-menu-vertical{border-inline-end:0px solid rgba(5, 5, 5, 0.06);}:where(.css-1me4733).ant-menu-dark.ant-menu-inline .ant-menu-sub.ant-menu-inline{background:#000c17;}:where(.css-1me4733).ant-menu-dark.ant-menu-inline .ant-menu-item{position:relative;}:where(.css-1me4733).ant-menu-dark.ant-menu-inline .ant-menu-item::after{position:absolute;inset-block:0;inset-inline-end:0;border-inline-end:0px solid #fff;transform:scaleY(0.0001);opacity:0;transition:transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1),opacity 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);content:"";}:where(.css-1me4733).ant-menu-dark.ant-menu-inline .ant-menu-item.ant-menu-item-danger::after{border-inline-end-color:#fff;}:where(.css-1me4733).ant-menu-dark.ant-menu-inline .ant-menu-selected::after,:where(.css-1me4733).ant-menu-dark.ant-menu-inline .ant-menu-item-selected::after{transform:scaleY(1);opacity:1;transition:transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1),opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);}:where(.css-1me4733).ant-menu-rtl{direction:rtl;}:where(.css-1me4733).ant-menu-submenu-rtl{transform-origin:100% 0;}:where(.css-1me4733).ant-menu-rtl.ant-menu-vertical .ant-menu-submenu-arrow::before,:where(.css-1me4733).ant-menu-submenu-rtl .ant-menu-vertical .ant-menu-submenu-arrow::before{transform:rotate(-45deg) translateY(-2.5px);}:where(.css-1me4733).ant-menu-rtl.ant-menu-vertical .ant-menu-submenu-arrow::after,:where(.css-1me4733).ant-menu-submenu-rtl .ant-menu-vertical .ant-menu-submenu-arrow::after{transform:rotate(45deg) translateY(2.5px);}:where(.css-1me4733).ant-menu .ant-motion-collapse-legacy{overflow:hidden;}:where(.css-1me4733).ant-menu .ant-motion-collapse-legacy-active{transition:height 0.2s cubic-bezier(0.645, 0.045, 0.355, 1),opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)!important;}:where(.css-1me4733).ant-menu .ant-motion-collapse{overflow:hidden;transition:height 0.2s cubic-bezier(0.645, 0.045, 0.355, 1),opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)!important;}:where(.css-1me4733).ant-slide-up-enter,:where(.css-1me4733).ant-slide-up-appear{animation-duration:0.2s;animation-fill-mode:both;animation-play-state:paused;}:where(.css-1me4733).ant-slide-up-leave{animation-duration:0.2s;animation-fill-mode:both;animation-play-state:paused;}:where(.css-1me4733).ant-slide-up-enter.ant-slide-up-enter-active,:where(.css-1me4733).ant-slide-up-appear.ant-slide-up-appear-active{animation-name:css-1me4733-antSlideUpIn;animation-play-state:running;}:where(.css-1me4733).ant-slide-up-leave.ant-slide-up-leave-active{animation-name:css-1me4733-antSlideUpOut;animation-play-state:running;pointer-events:none;}:where(.css-1me4733).ant-slide-up-enter,:where(.css-1me4733).ant-slide-up-appear{transform:scale(0);transform-origin:0% 0%;opacity:0;animation-timing-function:cubic-bezier(0.23, 1, 0.32, 1);}:where(.css-1me4733).ant-slide-up-enter-prepare,:where(.css-1me4733).ant-slide-up-appear-prepare{transform:scale(1);}:where(.css-1me4733).ant-slide-up-leave{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);}:where(.css-1me4733).ant-slide-down-enter,:where(.css-1me4733).ant-slide-down-appear{animation-duration:0.2s;animation-fill-mode:both;animation-play-state:paused;}:where(.css-1me4733).ant-slide-down-leave{animation-duration:0.2s;animation-fill-mode:both;animation-play-state:paused;}:where(.css-1me4733).ant-slide-down-enter.ant-slide-down-enter-active,:where(.css-1me4733).ant-slide-down-appear.ant-slide-down-appear-active{animation-name:css-1me4733-antSlideDownIn;animation-play-state:running;}:where(.css-1me4733).ant-slide-down-leave.ant-slide-down-leave-active{animation-name:css-1me4733-antSlideDownOut;animation-play-state:running;pointer-events:none;}:where(.css-1me4733).ant-slide-down-enter,:where(.css-1me4733).ant-slide-down-appear{transform:scale(0);transform-origin:0% 0%;opacity:0;animation-timing-function:cubic-bezier(0.23, 1, 0.32, 1);}:where(.css-1me4733).ant-slide-down-enter-prepare,:where(.css-1me4733).ant-slide-down-appear-prepare{transform:scale(1);}:where(.css-1me4733).ant-slide-down-leave{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);}:where(.css-1me4733).ant-zoom-big-enter,:where(.css-1me4733).ant-zoom-big-appear{animation-duration:0.2s;animation-fill-mode:both;animation-play-state:paused;}:where(.css-1me4733).ant-zoom-big-leave{animation-duration:0.2s;animation-fill-mode:both;animation-play-state:paused;}:where(.css-1me4733).ant-zoom-big-enter.ant-zoom-big-enter-active,:where(.css-1me4733).ant-zoom-big-appear.ant-zoom-big-appear-active{animation-name:css-1me4733-antZoomBigIn;animation-play-state:running;}:where(.css-1me4733).ant-zoom-big-leave.ant-zoom-big-leave-active{animation-name:css-1me4733-antZoomBigOut;animation-play-state:running;pointer-events:none;}:where(.css-1me4733).ant-zoom-big-enter,:where(.css-1me4733).ant-zoom-big-appear{transform:scale(0);opacity:0;animation-timing-function:cubic-bezier(0.08, 0.82, 0.17, 1);}:where(.css-1me4733).ant-zoom-big-enter-prepare,:where(.css-1me4733).ant-zoom-big-appear-prepare{transform:none;}:where(.css-1me4733).ant-zoom-big-leave{animation-timing-function:cubic-bezier(0.78, 0.14, 0.15, 0.86);}</style><style data-token-hash="1wmd7ff" data-css-hash="7vjtxo">:where(.css-1me4733)[class^="ant-tooltip"],:where(.css-1me4733)[class*=" ant-tooltip"]{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';font-size:14px;box-sizing:border-box;}:where(.css-1me4733)[class^="ant-tooltip"]::before,:where(.css-1me4733)[class*=" ant-tooltip"]::before,:where(.css-1me4733)[class^="ant-tooltip"]::after,:where(.css-1me4733)[class*=" ant-tooltip"]::after{box-sizing:border-box;}:where(.css-1me4733)[class^="ant-tooltip"] [class^="ant-tooltip"],:where(.css-1me4733)[class*=" ant-tooltip"] [class^="ant-tooltip"],:where(.css-1me4733)[class^="ant-tooltip"] [class*=" ant-tooltip"],:where(.css-1me4733)[class*=" ant-tooltip"] [class*=" ant-tooltip"]{box-sizing:border-box;}:where(.css-1me4733)[class^="ant-tooltip"] [class^="ant-tooltip"]::before,:where(.css-1me4733)[class*=" ant-tooltip"] [class^="ant-tooltip"]::before,:where(.css-1me4733)[class^="ant-tooltip"] [class*=" ant-tooltip"]::before,:where(.css-1me4733)[class*=" ant-tooltip"] [class*=" ant-tooltip"]::before,:where(.css-1me4733)[class^="ant-tooltip"] [class^="ant-tooltip"]::after,:where(.css-1me4733)[class*=" ant-tooltip"] [class^="ant-tooltip"]::after,:where(.css-1me4733)[class^="ant-tooltip"] [class*=" ant-tooltip"]::after,:where(.css-1me4733)[class*=" ant-tooltip"] [class*=" ant-tooltip"]::after{box-sizing:border-box;}:where(.css-1me4733).ant-tooltip{box-sizing:border-box;margin:0;padding:0;color:rgba(0, 0, 0, 0.88);font-size:14px;line-height:1.5714285714285714;list-style:none;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';position:absolute;z-index:1070;display:block;width:max-content;max-width:250px;visibility:visible;--antd-arrow-background-color:rgba(0, 0, 0, 0.85);}:where(.css-1me4733).ant-tooltip-hidden{display:none;}:where(.css-1me4733).ant-tooltip .ant-tooltip-inner{min-width:32px;min-height:32px;padding:6px 8px;color:#fff;text-align:start;text-decoration:none;word-wrap:break-word;background-color:rgba(0, 0, 0, 0.85);border-radius:6px;box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08),0 3px 6px -4px rgba(0, 0, 0, 0.12),0 9px 28px 8px rgba(0, 0, 0, 0.05);}:where(.css-1me4733).ant-tooltip-placement-left .ant-tooltip-inner,:where(.css-1me4733).ant-tooltip-placement-leftTop .ant-tooltip-inner,:where(.css-1me4733).ant-tooltip-placement-leftBottom .ant-tooltip-inner,:where(.css-1me4733).ant-tooltip-placement-right .ant-tooltip-inner,:where(.css-1me4733).ant-tooltip-placement-rightTop .ant-tooltip-inner,:where(.css-1me4733).ant-tooltip-placement-rightBottom .ant-tooltip-inner{border-radius:6px;}:where(.css-1me4733).ant-tooltip .ant-tooltip-content{position:relative;}:where(.css-1me4733).ant-tooltip.ant-tooltip-blue .ant-tooltip-inner{background-color:#1677ff;}:where(.css-1me4733).ant-tooltip.ant-tooltip-blue .ant-tooltip-arrow{--antd-arrow-background-color:#1677ff;}:where(.css-1me4733).ant-tooltip.ant-tooltip-purple .ant-tooltip-inner{background-color:#722ed1;}:where(.css-1me4733).ant-tooltip.ant-tooltip-purple .ant-tooltip-arrow{--antd-arrow-background-color:#722ed1;}:where(.css-1me4733).ant-tooltip.ant-tooltip-cyan .ant-tooltip-inner{background-color:#13c2c2;}:where(.css-1me4733).ant-tooltip.ant-tooltip-cyan .ant-tooltip-arrow{--antd-arrow-background-color:#13c2c2;}:where(.css-1me4733).ant-tooltip.ant-tooltip-green .ant-tooltip-inner{background-color:#52c41a;}:where(.css-1me4733).ant-tooltip.ant-tooltip-green .ant-tooltip-arrow{--antd-arrow-background-color:#52c41a;}:where(.css-1me4733).ant-tooltip.ant-tooltip-magenta .ant-tooltip-inner{background-color:#eb2f96;}:where(.css-1me4733).ant-tooltip.ant-tooltip-magenta .ant-tooltip-arrow{--antd-arrow-background-color:#eb2f96;}:where(.css-1me4733).ant-tooltip.ant-tooltip-pink .ant-tooltip-inner{background-color:#eb2f96;}:where(.css-1me4733).ant-tooltip.ant-tooltip-pink .ant-tooltip-arrow{--antd-arrow-background-color:#eb2f96;}:where(.css-1me4733).ant-tooltip.ant-tooltip-red .ant-tooltip-inner{background-color:#f5222d;}:where(.css-1me4733).ant-tooltip.ant-tooltip-red .ant-tooltip-arrow{--antd-arrow-background-color:#f5222d;}:where(.css-1me4733).ant-tooltip.ant-tooltip-orange .ant-tooltip-inner{background-color:#fa8c16;}:where(.css-1me4733).ant-tooltip.ant-tooltip-orange .ant-tooltip-arrow{--antd-arrow-background-color:#fa8c16;}:where(.css-1me4733).ant-tooltip.ant-tooltip-yellow .ant-tooltip-inner{background-color:#fadb14;}:where(.css-1me4733).ant-tooltip.ant-tooltip-yellow .ant-tooltip-arrow{--antd-arrow-background-color:#fadb14;}:where(.css-1me4733).ant-tooltip.ant-tooltip-volcano .ant-tooltip-inner{background-color:#fa541c;}:where(.css-1me4733).ant-tooltip.ant-tooltip-volcano .ant-tooltip-arrow{--antd-arrow-background-color:#fa541c;}:where(.css-1me4733).ant-tooltip.ant-tooltip-geekblue .ant-tooltip-inner{background-color:#2f54eb;}:where(.css-1me4733).ant-tooltip.ant-tooltip-geekblue .ant-tooltip-arrow{--antd-arrow-background-color:#2f54eb;}:where(.css-1me4733).ant-tooltip.ant-tooltip-lime .ant-tooltip-inner{background-color:#a0d911;}:where(.css-1me4733).ant-tooltip.ant-tooltip-lime .ant-tooltip-arrow{--antd-arrow-background-color:#a0d911;}:where(.css-1me4733).ant-tooltip.ant-tooltip-gold .ant-tooltip-inner{background-color:#faad14;}:where(.css-1me4733).ant-tooltip.ant-tooltip-gold .ant-tooltip-arrow{--antd-arrow-background-color:#faad14;}:where(.css-1me4733).ant-tooltip-rtl{direction:rtl;}:where(.css-1me4733).ant-tooltip .ant-tooltip-arrow{position:absolute;z-index:1;display:block;pointer-events:none;width:16px;height:16px;overflow:hidden;}:where(.css-1me4733).ant-tooltip .ant-tooltip-arrow::before{position:absolute;bottom:0;inset-inline-start:0;width:16px;height:8px;background:var(--antd-arrow-background-color);clip-path:path('M 0 8 A 4 4 0 0 0 2.82842712474619 6.82842712474619 L 6.585786437626905 3.0710678118654755 A 2 2 0 0 1 9.414213562373096 3.0710678118654755 L 13.17157287525381 6.82842712474619 A 4 4 0 0 0 16 8 Z');content:"";}:where(.css-1me4733).ant-tooltip .ant-tooltip-arrow::after{content:"";position:absolute;width:8.970562748477143px;height:8.970562748477143px;bottom:0;inset-inline:0;margin:auto;border-radius:0 0 2px 0;transform:translateY(50%) rotate(-135deg);box-shadow:2px 2px 5px rgba(0, 0, 0, 0.05);z-index:0;background:transparent;}:where(.css-1me4733).ant-tooltip .ant-tooltip-arrow:before{background:var(--antd-arrow-background-color);}:where(.css-1me4733).ant-tooltip-placement-top .ant-tooltip-arrow,:where(.css-1me4733).ant-tooltip-placement-topLeft .ant-tooltip-arrow,:where(.css-1me4733).ant-tooltip-placement-topRight .ant-tooltip-arrow{bottom:0;transform:translateY(100%) rotate(180deg);}:where(.css-1me4733).ant-tooltip-placement-top .ant-tooltip-arrow{left:50%;transform:translateX(-50%) translateY(100%) rotate(180deg);}:where(.css-1me4733).ant-tooltip-placement-topLeft .ant-tooltip-arrow{left:12px;}:where(.css-1me4733).ant-tooltip-placement-topRight .ant-tooltip-arrow{right:12px;}:where(.css-1me4733).ant-tooltip-placement-bottom .ant-tooltip-arrow,:where(.css-1me4733).ant-tooltip-placement-bottomLeft .ant-tooltip-arrow,:where(.css-1me4733).ant-tooltip-placement-bottomRight .ant-tooltip-arrow{top:0;transform:translateY(-100%);}:where(.css-1me4733).ant-tooltip-placement-bottom .ant-tooltip-arrow{left:50%;transform:translateX(-50%) translateY(-100%);}:where(.css-1me4733).ant-tooltip-placement-bottomLeft .ant-tooltip-arrow{left:12px;}:where(.css-1me4733).ant-tooltip-placement-bottomRight .ant-tooltip-arrow{right:12px;}:where(.css-1me4733).ant-tooltip-placement-left .ant-tooltip-arrow,:where(.css-1me4733).ant-tooltip-placement-leftTop .ant-tooltip-arrow,:where(.css-1me4733).ant-tooltip-placement-leftBottom .ant-tooltip-arrow{right:0;transform:translateX(100%) rotate(90deg);}:where(.css-1me4733).ant-tooltip-placement-left .ant-tooltip-arrow{top:50%;transform:translateY(-50%) translateX(100%) rotate(90deg);}:where(.css-1me4733).ant-tooltip-placement-leftTop .ant-tooltip-arrow{top:8px;}:where(.css-1me4733).ant-tooltip-placement-leftBottom .ant-tooltip-arrow{bottom:8px;}:where(.css-1me4733).ant-tooltip-placement-right .ant-tooltip-arrow,:where(.css-1me4733).ant-tooltip-placement-rightTop .ant-tooltip-arrow,:where(.css-1me4733).ant-tooltip-placement-rightBottom .ant-tooltip-arrow{left:0;transform:translateX(-100%) rotate(-90deg);}:where(.css-1me4733).ant-tooltip-placement-right .ant-tooltip-arrow{top:50%;transform:translateY(-50%) translateX(-100%) rotate(-90deg);}:where(.css-1me4733).ant-tooltip-placement-rightTop .ant-tooltip-arrow{top:8px;}:where(.css-1me4733).ant-tooltip-placement-rightBottom .ant-tooltip-arrow{bottom:8px;}:where(.css-1me4733).ant-tooltip-pure{position:relative;max-width:none;margin:16px;}:where(.css-1me4733).ant-zoom-big-fast-enter,:where(.css-1me4733).ant-zoom-big-fast-appear{animation-duration:0.1s;animation-fill-mode:both;animation-play-state:paused;}:where(.css-1me4733).ant-zoom-big-fast-leave{animation-duration:0.1s;animation-fill-mode:both;animation-play-state:paused;}:where(.css-1me4733).ant-zoom-big-fast-enter.ant-zoom-big-fast-enter-active,:where(.css-1me4733).ant-zoom-big-fast-appear.ant-zoom-big-fast-appear-active{animation-name:css-1me4733-antZoomBigIn;animation-play-state:running;}:where(.css-1me4733).ant-zoom-big-fast-leave.ant-zoom-big-fast-leave-active{animation-name:css-1me4733-antZoomBigOut;animation-play-state:running;pointer-events:none;}:where(.css-1me4733).ant-zoom-big-fast-enter,:where(.css-1me4733).ant-zoom-big-fast-appear{transform:scale(0);opacity:0;animation-timing-function:cubic-bezier(0.08, 0.82, 0.17, 1);}:where(.css-1me4733).ant-zoom-big-fast-enter-prepare,:where(.css-1me4733).ant-zoom-big-fast-appear-prepare{transform:none;}:where(.css-1me4733).ant-zoom-big-fast-leave{animation-timing-function:cubic-bezier(0.78, 0.14, 0.15, 0.86);}</style><style data-token-hash="1wmd7ff" data-css-hash="1p4k2i0">:where(.css-1me4733)[class^="ant-spin"],:where(.css-1me4733)[class*=" ant-spin"]{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';font-size:14px;box-sizing:border-box;}:where(.css-1me4733)[class^="ant-spin"]::before,:where(.css-1me4733)[class*=" ant-spin"]::before,:where(.css-1me4733)[class^="ant-spin"]::after,:where(.css-1me4733)[class*=" ant-spin"]::after{box-sizing:border-box;}:where(.css-1me4733)[class^="ant-spin"] [class^="ant-spin"],:where(.css-1me4733)[class*=" ant-spin"] [class^="ant-spin"],:where(.css-1me4733)[class^="ant-spin"] [class*=" ant-spin"],:where(.css-1me4733)[class*=" ant-spin"] [class*=" ant-spin"]{box-sizing:border-box;}:where(.css-1me4733)[class^="ant-spin"] [class^="ant-spin"]::before,:where(.css-1me4733)[class*=" ant-spin"] [class^="ant-spin"]::before,:where(.css-1me4733)[class^="ant-spin"] [class*=" ant-spin"]::before,:where(.css-1me4733)[class*=" ant-spin"] [class*=" ant-spin"]::before,:where(.css-1me4733)[class^="ant-spin"] [class^="ant-spin"]::after,:where(.css-1me4733)[class*=" ant-spin"] [class^="ant-spin"]::after,:where(.css-1me4733)[class^="ant-spin"] [class*=" ant-spin"]::after,:where(.css-1me4733)[class*=" ant-spin"] [class*=" ant-spin"]::after{box-sizing:border-box;}:where(.css-1me4733).ant-spin{box-sizing:border-box;margin:0;padding:0;color:#1677ff;font-size:14px;line-height:1.5714285714285714;list-style:none;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';position:absolute;display:none;text-align:center;vertical-align:middle;opacity:0;transition:transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);}:where(.css-1me4733).ant-spin-spinning{position:static;display:inline-block;opacity:1;}:where(.css-1me4733).ant-spin-nested-loading{position:relative;}:where(.css-1me4733).ant-spin-nested-loading >div>.ant-spin{position:absolute;top:0;inset-inline-start:0;z-index:4;display:block;width:100%;height:100%;max-height:400px;}:where(.css-1me4733).ant-spin-nested-loading >div>.ant-spin .ant-spin-dot{position:absolute;top:50%;inset-inline-start:50%;margin:-10px;}:where(.css-1me4733).ant-spin-nested-loading >div>.ant-spin .ant-spin-text{position:absolute;top:50%;width:100%;padding-top:5px;text-shadow:0 1px 2px #ffffff;}:where(.css-1me4733).ant-spin-nested-loading >div>.ant-spin.ant-spin-show-text .ant-spin-dot{margin-top:-20px;}:where(.css-1me4733).ant-spin-nested-loading >div>.ant-spin-sm .ant-spin-dot{margin:-7px;}:where(.css-1me4733).ant-spin-nested-loading >div>.ant-spin-sm .ant-spin-text{padding-top:2px;}:where(.css-1me4733).ant-spin-nested-loading >div>.ant-spin-sm.ant-spin-show-text .ant-spin-dot{margin-top:-17px;}:where(.css-1me4733).ant-spin-nested-loading >div>.ant-spin-lg .ant-spin-dot{margin:-16px;}:where(.css-1me4733).ant-spin-nested-loading >div>.ant-spin-lg .ant-spin-text{padding-top:11px;}:where(.css-1me4733).ant-spin-nested-loading >div>.ant-spin-lg.ant-spin-show-text .ant-spin-dot{margin-top:-26px;}:where(.css-1me4733).ant-spin-nested-loading .ant-spin-container{position:relative;transition:opacity 0.3s;}:where(.css-1me4733).ant-spin-nested-loading .ant-spin-container::after{position:absolute;top:0;inset-inline-end:0;bottom:0;inset-inline-start:0;z-index:10;width:100%;height:100%;background:#ffffff;opacity:0;transition:all 0.3s;content:"";pointer-events:none;}:where(.css-1me4733).ant-spin-nested-loading .ant-spin-blur{clear:both;opacity:0.5;user-select:none;pointer-events:none;}:where(.css-1me4733).ant-spin-nested-loading .ant-spin-blur::after{opacity:0.4;pointer-events:auto;}:where(.css-1me4733).ant-spin-tip{color:rgba(0, 0, 0, 0.45);}:where(.css-1me4733).ant-spin .ant-spin-dot{position:relative;display:inline-block;font-size:20px;width:1em;height:1em;}:where(.css-1me4733).ant-spin .ant-spin-dot-item{position:absolute;display:block;width:9px;height:9px;background-color:#1677ff;border-radius:100%;transform:scale(0.75);transform-origin:50% 50%;opacity:0.3;animation-name:css-1me4733-antSpinMove;animation-duration:1s;animation-iteration-count:infinite;animation-timing-function:linear;animation-direction:alternate;}:where(.css-1me4733).ant-spin .ant-spin-dot-item:nth-child(1){top:0;inset-inline-start:0;}:where(.css-1me4733).ant-spin .ant-spin-dot-item:nth-child(2){top:0;inset-inline-end:0;animation-delay:0.4s;}:where(.css-1me4733).ant-spin .ant-spin-dot-item:nth-child(3){inset-inline-end:0;bottom:0;animation-delay:0.8s;}:where(.css-1me4733).ant-spin .ant-spin-dot-item:nth-child(4){bottom:0;inset-inline-start:0;animation-delay:1.2s;}:where(.css-1me4733).ant-spin .ant-spin-dot-spin{transform:rotate(45deg);animation-name:css-1me4733-antRotate;animation-duration:1.2s;animation-iteration-count:infinite;animation-timing-function:linear;}:where(.css-1me4733).ant-spin-sm .ant-spin-dot{font-size:14px;}:where(.css-1me4733).ant-spin-sm .ant-spin-dot i{width:6px;height:6px;}:where(.css-1me4733).ant-spin-lg .ant-spin-dot{font-size:32px;}:where(.css-1me4733).ant-spin-lg .ant-spin-dot i{width:14px;height:14px;}:where(.css-1me4733).ant-spin.ant-spin-show-text .ant-spin-text{display:block;}</style><style data-token-hash="1wmd7ff" data-css-hash="wi1hvu">:where(.css-1me4733)[class^="ant-breadcrumb"],:where(.css-1me4733)[class*=" ant-breadcrumb"]{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';font-size:14px;box-sizing:border-box;}:where(.css-1me4733)[class^="ant-breadcrumb"]::before,:where(.css-1me4733)[class*=" ant-breadcrumb"]::before,:where(.css-1me4733)[class^="ant-breadcrumb"]::after,:where(.css-1me4733)[class*=" ant-breadcrumb"]::after{box-sizing:border-box;}:where(.css-1me4733)[class^="ant-breadcrumb"] [class^="ant-breadcrumb"],:where(.css-1me4733)[class*=" ant-breadcrumb"] [class^="ant-breadcrumb"],:where(.css-1me4733)[class^="ant-breadcrumb"] [class*=" ant-breadcrumb"],:where(.css-1me4733)[class*=" ant-breadcrumb"] [class*=" ant-breadcrumb"]{box-sizing:border-box;}:where(.css-1me4733)[class^="ant-breadcrumb"] [class^="ant-breadcrumb"]::before,:where(.css-1me4733)[class*=" ant-breadcrumb"] [class^="ant-breadcrumb"]::before,:where(.css-1me4733)[class^="ant-breadcrumb"] [class*=" ant-breadcrumb"]::before,:where(.css-1me4733)[class*=" ant-breadcrumb"] [class*=" ant-breadcrumb"]::before,:where(.css-1me4733)[class^="ant-breadcrumb"] [class^="ant-breadcrumb"]::after,:where(.css-1me4733)[class*=" ant-breadcrumb"] [class^="ant-breadcrumb"]::after,:where(.css-1me4733)[class^="ant-breadcrumb"] [class*=" ant-breadcrumb"]::after,:where(.css-1me4733)[class*=" ant-breadcrumb"] [class*=" ant-breadcrumb"]::after{box-sizing:border-box;}:where(.css-1me4733).ant-breadcrumb{box-sizing:border-box;margin:0;padding:0;color:rgba(0, 0, 0, 0.45);font-size:14px;line-height:1.5714285714285714;list-style:none;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';}:where(.css-1me4733).ant-breadcrumb .anticon{font-size:14px;}:where(.css-1me4733).ant-breadcrumb ol{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none;}:where(.css-1me4733).ant-breadcrumb a{color:rgba(0, 0, 0, 0.45);transition:color 0.2s;padding:0 4px;border-radius:4px;height:22px;display:inline-block;margin-inline:-4px;}:where(.css-1me4733).ant-breadcrumb a:hover{color:rgba(0, 0, 0, 0.88);background-color:rgba(0, 0, 0, 0.06);}:where(.css-1me4733).ant-breadcrumb a:focus-visible{outline:4px solid #91caff;outline-offset:1px;transition:outline-offset 0s,outline 0s;}:where(.css-1me4733).ant-breadcrumb li:last-child{color:rgba(0, 0, 0, 0.88);}:where(.css-1me4733).ant-breadcrumb .ant-breadcrumb-separator{margin-inline:8px;color:rgba(0, 0, 0, 0.45);}:where(.css-1me4733).ant-breadcrumb .ant-breadcrumb-link >.anticon+span,:where(.css-1me4733).ant-breadcrumb .ant-breadcrumb-link >.anticon+a{margin-inline-start:4px;}:where(.css-1me4733).ant-breadcrumb .ant-breadcrumb-overlay-link{border-radius:4px;height:22px;display:inline-block;padding:0 4px;margin-inline:-4px;}:where(.css-1me4733).ant-breadcrumb .ant-breadcrumb-overlay-link >.anticon{margin-inline-start:4px;font-size:12px;}:where(.css-1me4733).ant-breadcrumb .ant-breadcrumb-overlay-link:hover{color:rgba(0, 0, 0, 0.88);background-color:rgba(0, 0, 0, 0.06);}:where(.css-1me4733).ant-breadcrumb .ant-breadcrumb-overlay-link:hover a{color:rgba(0, 0, 0, 0.88);}:where(.css-1me4733).ant-breadcrumb .ant-breadcrumb-overlay-link a:hover{background-color:transparent;}:where(.css-1me4733).ant-breadcrumb.ant-breadcrumb-rtl{direction:rtl;}</style><style data-token-hash="1wmd7ff" data-css-hash="1ll18zz">:where(.css-1me4733)[class^="ant-collapse"],:where(.css-1me4733)[class*=" ant-collapse"]{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';font-size:14px;box-sizing:border-box;}:where(.css-1me4733)[class^="ant-collapse"]::before,:where(.css-1me4733)[class*=" ant-collapse"]::before,:where(.css-1me4733)[class^="ant-collapse"]::after,:where(.css-1me4733)[class*=" ant-collapse"]::after{box-sizing:border-box;}:where(.css-1me4733)[class^="ant-collapse"] [class^="ant-collapse"],:where(.css-1me4733)[class*=" ant-collapse"] [class^="ant-collapse"],:where(.css-1me4733)[class^="ant-collapse"] [class*=" ant-collapse"],:where(.css-1me4733)[class*=" ant-collapse"] [class*=" ant-collapse"]{box-sizing:border-box;}:where(.css-1me4733)[class^="ant-collapse"] [class^="ant-collapse"]::before,:where(.css-1me4733)[class*=" ant-collapse"] [class^="ant-collapse"]::before,:where(.css-1me4733)[class^="ant-collapse"] [class*=" ant-collapse"]::before,:where(.css-1me4733)[class*=" ant-collapse"] [class*=" ant-collapse"]::before,:where(.css-1me4733)[class^="ant-collapse"] [class^="ant-collapse"]::after,:where(.css-1me4733)[class*=" ant-collapse"] [class^="ant-collapse"]::after,:where(.css-1me4733)[class^="ant-collapse"] [class*=" ant-collapse"]::after,:where(.css-1me4733)[class*=" ant-collapse"] [class*=" ant-collapse"]::after{box-sizing:border-box;}:where(.css-1me4733).ant-collapse{box-sizing:border-box;margin:0;padding:0;color:rgba(0, 0, 0, 0.88);font-size:14px;line-height:1.5714285714285714;list-style:none;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';background-color:rgba(0, 0, 0, 0.02);border:1px solid #d9d9d9;border-bottom:0;border-radius:8px;}:where(.css-1me4733).ant-collapse-rtl{direction:rtl;}:where(.css-1me4733).ant-collapse>.ant-collapse-item{border-bottom:1px solid #d9d9d9;}:where(.css-1me4733).ant-collapse>.ant-collapse-item:last-child,:where(.css-1me4733).ant-collapse>.ant-collapse-item:last-child>.ant-collapse-header{border-radius:0 0 8px 8px;}:where(.css-1me4733).ant-collapse>.ant-collapse-item >.ant-collapse-header{position:relative;display:flex;flex-wrap:nowrap;align-items:flex-start;padding:12px 16px;color:rgba(0, 0, 0, 0.88);line-height:1.5714285714285714;cursor:pointer;transition:all 0.3s,visibility 0s;}:where(.css-1me4733).ant-collapse>.ant-collapse-item >.ant-collapse-header >.ant-collapse-header-text{flex:auto;}:where(.css-1me4733).ant-collapse>.ant-collapse-item >.ant-collapse-header:focus{outline:none;}:where(.css-1me4733).ant-collapse>.ant-collapse-item >.ant-collapse-header .ant-collapse-expand-icon{height:22px;display:flex;align-items:center;padding-inline-end:12px;}:where(.css-1me4733).ant-collapse>.ant-collapse-item >.ant-collapse-header .ant-collapse-arrow{display:inline-flex;align-items:center;color:inherit;font-style:normal;line-height:0;text-align:center;text-transform:none;vertical-align:-0.125em;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:12px;}:where(.css-1me4733).ant-collapse>.ant-collapse-item >.ant-collapse-header .ant-collapse-arrow >*{line-height:1;}:where(.css-1me4733).ant-collapse>.ant-collapse-item >.ant-collapse-header .ant-collapse-arrow svg{transition:transform 0.3s;}:where(.css-1me4733).ant-collapse>.ant-collapse-item >.ant-collapse-header .ant-collapse-header-text{margin-inline-end:auto;}:where(.css-1me4733).ant-collapse>.ant-collapse-item .ant-collapse-header-collapsible-only{cursor:default;}:where(.css-1me4733).ant-collapse>.ant-collapse-item .ant-collapse-header-collapsible-only .ant-collapse-header-text{flex:none;cursor:pointer;}:where(.css-1me4733).ant-collapse>.ant-collapse-item .ant-collapse-icon-collapsible-only{cursor:default;}:where(.css-1me4733).ant-collapse>.ant-collapse-item .ant-collapse-icon-collapsible-only .ant-collapse-expand-icon{cursor:pointer;}:where(.css-1me4733).ant-collapse>.ant-collapse-item.ant-collapse-no-arrow >.ant-collapse-header{padding-inline-start:12px;}:where(.css-1me4733).ant-collapse .ant-collapse-content{color:rgba(0, 0, 0, 0.88);background-color:#ffffff;border-top:1px solid #d9d9d9;}:where(.css-1me4733).ant-collapse .ant-collapse-content>.ant-collapse-content-box{padding:16px 16px;}:where(.css-1me4733).ant-collapse .ant-collapse-content-hidden{display:none;}:where(.css-1me4733).ant-collapse-small >.ant-collapse-item >.ant-collapse-header{padding:8px 12px;}:where(.css-1me4733).ant-collapse-small >.ant-collapse-item >.ant-collapse-content>.ant-collapse-content-box{padding:12px;}:where(.css-1me4733).ant-collapse-large >.ant-collapse-item{font-size:16px;}:where(.css-1me4733).ant-collapse-large >.ant-collapse-item >.ant-collapse-header{padding:16px 24px;}:where(.css-1me4733).ant-collapse-large >.ant-collapse-item >.ant-collapse-header >.ant-collapse-expand-icon{height:25.142857142857142px;}:where(.css-1me4733).ant-collapse-large >.ant-collapse-item >.ant-collapse-content>.ant-collapse-content-box{padding:24px;}:where(.css-1me4733).ant-collapse .ant-collapse-item:last-child >.ant-collapse-content{border-radius:0 0 8px 8px;}:where(.css-1me4733).ant-collapse .ant-collapse-item-disabled>.ant-collapse-header,:where(.css-1me4733).ant-collapse .ant-collapse-item-disabled>.ant-collapse-header>.arrow{color:rgba(0, 0, 0, 0.25);cursor:not-allowed;}:where(.css-1me4733).ant-collapse.ant-collapse-icon-position-end>.ant-collapse-item >.ant-collapse-header .ant-collapse-expand-icon{order:1;padding-inline-end:0;padding-inline-start:12px;}:where(.css-1me4733).ant-collapse-borderless{background-color:rgba(0, 0, 0, 0.02);border:0;}:where(.css-1me4733).ant-collapse-borderless >.ant-collapse-item{border-bottom:1px solid #d9d9d9;}:where(.css-1me4733).ant-collapse-borderless >.ant-collapse-item:last-child,:where(.css-1me4733).ant-collapse-borderless >.ant-collapse-item:last-child .ant-collapse-header{border-radius:0;}:where(.css-1me4733).ant-collapse-borderless >.ant-collapse-item:last-child{border-bottom:0;}:where(.css-1me4733).ant-collapse-borderless >.ant-collapse-item>.ant-collapse-content{background-color:transparent;border-top:0;}:where(.css-1me4733).ant-collapse-borderless >.ant-collapse-item>.ant-collapse-content>.ant-collapse-content-box{padding-top:4px;}:where(.css-1me4733).ant-collapse-ghost{background-color:transparent;border:0;}:where(.css-1me4733).ant-collapse-ghost >.ant-collapse-item{border-bottom:0;}:where(.css-1me4733).ant-collapse-ghost >.ant-collapse-item >.ant-collapse-content{background-color:transparent;border:0;}:where(.css-1me4733).ant-collapse-ghost >.ant-collapse-item >.ant-collapse-content >.ant-collapse-content-box{padding-block:12px;}:where(.css-1me4733).ant-collapse-rtl >.ant-collapse-item>.ant-collapse-header .ant-collapse-arrow svg{transform:rotate(180deg);}:where(.css-1me4733).ant-collapse .ant-motion-collapse-legacy{overflow:hidden;}:where(.css-1me4733).ant-collapse .ant-motion-collapse-legacy-active{transition:height 0.2s cubic-bezier(0.645, 0.045, 0.355, 1),opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)!important;}:where(.css-1me4733).ant-collapse .ant-motion-collapse{overflow:hidden;transition:height 0.2s cubic-bezier(0.645, 0.045, 0.355, 1),opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)!important;}</style><style data-token-hash="1wmd7ff" data-css-hash="3gp4wg">:where(.css-1me4733)[class^="dev-docs-tabs"],:where(.css-1me4733)[class*=" dev-docs-tabs"]{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';font-size:14px;box-sizing:border-box;}:where(.css-1me4733)[class^="dev-docs-tabs"]::before,:where(.css-1me4733)[class*=" dev-docs-tabs"]::before,:where(.css-1me4733)[class^="dev-docs-tabs"]::after,:where(.css-1me4733)[class*=" dev-docs-tabs"]::after{box-sizing:border-box;}:where(.css-1me4733)[class^="dev-docs-tabs"] [class^="dev-docs-tabs"],:where(.css-1me4733)[class*=" dev-docs-tabs"] [class^="dev-docs-tabs"],:where(.css-1me4733)[class^="dev-docs-tabs"] [class*=" dev-docs-tabs"],:where(.css-1me4733)[class*=" dev-docs-tabs"] [class*=" dev-docs-tabs"]{box-sizing:border-box;}:where(.css-1me4733)[class^="dev-docs-tabs"] [class^="dev-docs-tabs"]::before,:where(.css-1me4733)[class*=" dev-docs-tabs"] [class^="dev-docs-tabs"]::before,:where(.css-1me4733)[class^="dev-docs-tabs"] [class*=" dev-docs-tabs"]::before,:where(.css-1me4733)[class*=" dev-docs-tabs"] [class*=" dev-docs-tabs"]::before,:where(.css-1me4733)[class^="dev-docs-tabs"] [class^="dev-docs-tabs"]::after,:where(.css-1me4733)[class*=" dev-docs-tabs"] [class^="dev-docs-tabs"]::after,:where(.css-1me4733)[class^="dev-docs-tabs"] [class*=" dev-docs-tabs"]::after,:where(.css-1me4733)[class*=" dev-docs-tabs"] [class*=" dev-docs-tabs"]::after{box-sizing:border-box;}:where(.css-1me4733).dev-docs-tabs-small >.dev-docs-tabs-nav .dev-docs-tabs-tab{padding:8px 0;font-size:14px;}:where(.css-1me4733).dev-docs-tabs-large >.dev-docs-tabs-nav .dev-docs-tabs-tab{padding:16px 0;font-size:16px;}:where(.css-1me4733).dev-docs-tabs-card.dev-docs-tabs-small >.dev-docs-tabs-nav .dev-docs-tabs-tab{padding:6px 16px;}:where(.css-1me4733).dev-docs-tabs-card.dev-docs-tabs-small.dev-docs-tabs-bottom >.dev-docs-tabs-nav .dev-docs-tabs-tab{border-radius:0 0 6px 6px;}:where(.css-1me4733).dev-docs-tabs-card.dev-docs-tabs-small.dev-docs-tabs-top >.dev-docs-tabs-nav .dev-docs-tabs-tab{border-radius:6px 6px 0 0;}:where(.css-1me4733).dev-docs-tabs-card.dev-docs-tabs-small.dev-docs-tabs-right >.dev-docs-tabs-nav .dev-docs-tabs-tab{border-radius:0 6px 6px 0;}:where(.css-1me4733).dev-docs-tabs-card.dev-docs-tabs-small.dev-docs-tabs-left >.dev-docs-tabs-nav .dev-docs-tabs-tab{border-radius:6px 0 0 6px;}:where(.css-1me4733).dev-docs-tabs-card.dev-docs-tabs-large >.dev-docs-tabs-nav .dev-docs-tabs-tab{padding:8px 16px 6px;}:where(.css-1me4733).dev-docs-tabs-rtl{direction:rtl;}:where(.css-1me4733).dev-docs-tabs-rtl .dev-docs-tabs-nav .dev-docs-tabs-tab{margin:0 0 0 32px;}:where(.css-1me4733).dev-docs-tabs-rtl .dev-docs-tabs-nav .dev-docs-tabs-tab .dev-docs-tabs-tab:last-of-type{margin-left:0;}:where(.css-1me4733).dev-docs-tabs-rtl .dev-docs-tabs-nav .dev-docs-tabs-tab .anticon{margin-right:0;margin-left:12px;}:where(.css-1me4733).dev-docs-tabs-rtl .dev-docs-tabs-nav .dev-docs-tabs-tab .dev-docs-tabs-tab-remove{margin-right:8px;margin-left:-4px;}:where(.css-1me4733).dev-docs-tabs-rtl .dev-docs-tabs-nav .dev-docs-tabs-tab .dev-docs-tabs-tab-remove .anticon{margin:0;}:where(.css-1me4733).dev-docs-tabs-rtl.dev-docs-tabs-left >.dev-docs-tabs-nav{order:1;}:where(.css-1me4733).dev-docs-tabs-rtl.dev-docs-tabs-left >.dev-docs-tabs-content-holder{order:0;}:where(.css-1me4733).dev-docs-tabs-rtl.dev-docs-tabs-right >.dev-docs-tabs-nav{order:0;}:where(.css-1me4733).dev-docs-tabs-rtl.dev-docs-tabs-right >.dev-docs-tabs-content-holder{order:1;}:where(.css-1me4733).dev-docs-tabs-rtl.dev-docs-tabs-card.dev-docs-tabs-top >.dev-docs-tabs-nav .dev-docs-tabs-tab+.dev-docs-tabs-tab,:where(.css-1me4733).dev-docs-tabs-rtl.dev-docs-tabs-card.dev-docs-tabs-bottom >.dev-docs-tabs-nav .dev-docs-tabs-tab+.dev-docs-tabs-tab,:where(.css-1me4733).dev-docs-tabs-rtl.dev-docs-tabs-card.dev-docs-tabs-top >div>.dev-docs-tabs-nav .dev-docs-tabs-tab+.dev-docs-tabs-tab,:where(.css-1me4733).dev-docs-tabs-rtl.dev-docs-tabs-card.dev-docs-tabs-bottom >div>.dev-docs-tabs-nav .dev-docs-tabs-tab+.dev-docs-tabs-tab{margin-right:2px;margin-left:0;}:where(.css-1me4733).dev-docs-tabs-dropdown-rtl{direction:rtl;}:where(.css-1me4733).dev-docs-tabs-menu-item .dev-docs-tabs-dropdown-rtl{text-align:right;}:where(.css-1me4733).dev-docs-tabs-top,:where(.css-1me4733).dev-docs-tabs-bottom{flex-direction:column;}:where(.css-1me4733).dev-docs-tabs-top >.dev-docs-tabs-nav,:where(.css-1me4733).dev-docs-tabs-bottom >.dev-docs-tabs-nav,:where(.css-1me4733).dev-docs-tabs-top >div>.dev-docs-tabs-nav,:where(.css-1me4733).dev-docs-tabs-bottom >div>.dev-docs-tabs-nav{margin:0 0 16px 0;}:where(.css-1me4733).dev-docs-tabs-top >.dev-docs-tabs-nav::before,:where(.css-1me4733).dev-docs-tabs-bottom >.dev-docs-tabs-nav::before,:where(.css-1me4733).dev-docs-tabs-top >div>.dev-docs-tabs-nav::before,:where(.css-1me4733).dev-docs-tabs-bottom >div>.dev-docs-tabs-nav::before{position:absolute;right:0;left:0;border-bottom:1px solid rgba(5, 5, 5, 0.06);content:'';}:where(.css-1me4733).dev-docs-tabs-top >.dev-docs-tabs-nav .dev-docs-tabs-ink-bar,:where(.css-1me4733).dev-docs-tabs-bottom >.dev-docs-tabs-nav .dev-docs-tabs-ink-bar,:where(.css-1me4733).dev-docs-tabs-top >div>.dev-docs-tabs-nav .dev-docs-tabs-ink-bar,:where(.css-1me4733).dev-docs-tabs-bottom >div>.dev-docs-tabs-nav .dev-docs-tabs-ink-bar{height:2px;}:where(.css-1me4733).dev-docs-tabs-top >.dev-docs-tabs-nav .dev-docs-tabs-ink-bar-animated,:where(.css-1me4733).dev-docs-tabs-bottom >.dev-docs-tabs-nav .dev-docs-tabs-ink-bar-animated,:where(.css-1me4733).dev-docs-tabs-top >div>.dev-docs-tabs-nav .dev-docs-tabs-ink-bar-animated,:where(.css-1me4733).dev-docs-tabs-bottom >div>.dev-docs-tabs-nav .dev-docs-tabs-ink-bar-animated{transition:width 0.3s,left 0.3s,right 0.3s;}:where(.css-1me4733).dev-docs-tabs-top >.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::before,:where(.css-1me4733).dev-docs-tabs-bottom >.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::before,:where(.css-1me4733).dev-docs-tabs-top >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::before,:where(.css-1me4733).dev-docs-tabs-bottom >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::before,:where(.css-1me4733).dev-docs-tabs-top >.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::after,:where(.css-1me4733).dev-docs-tabs-bottom >.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::after,:where(.css-1me4733).dev-docs-tabs-top >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::after,:where(.css-1me4733).dev-docs-tabs-bottom >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::after{top:0;bottom:0;width:32px;}:where(.css-1me4733).dev-docs-tabs-top >.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::before,:where(.css-1me4733).dev-docs-tabs-bottom >.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::before,:where(.css-1me4733).dev-docs-tabs-top >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::before,:where(.css-1me4733).dev-docs-tabs-bottom >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::before{left:0;box-shadow:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);}:where(.css-1me4733).dev-docs-tabs-top >.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::after,:where(.css-1me4733).dev-docs-tabs-bottom >.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::after,:where(.css-1me4733).dev-docs-tabs-top >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::after,:where(.css-1me4733).dev-docs-tabs-bottom >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::after{right:0;box-shadow:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);}:where(.css-1me4733).dev-docs-tabs-top >.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap.dev-docs-tabs-nav-wrap-ping-left::before,:where(.css-1me4733).dev-docs-tabs-bottom >.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap.dev-docs-tabs-nav-wrap-ping-left::before,:where(.css-1me4733).dev-docs-tabs-top >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap.dev-docs-tabs-nav-wrap-ping-left::before,:where(.css-1me4733).dev-docs-tabs-bottom >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap.dev-docs-tabs-nav-wrap-ping-left::before{opacity:1;}:where(.css-1me4733).dev-docs-tabs-top >.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap.dev-docs-tabs-nav-wrap-ping-right::after,:where(.css-1me4733).dev-docs-tabs-bottom >.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap.dev-docs-tabs-nav-wrap-ping-right::after,:where(.css-1me4733).dev-docs-tabs-top >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap.dev-docs-tabs-nav-wrap-ping-right::after,:where(.css-1me4733).dev-docs-tabs-bottom >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap.dev-docs-tabs-nav-wrap-ping-right::after{opacity:1;}:where(.css-1me4733).dev-docs-tabs-top >.dev-docs-tabs-nav::before,:where(.css-1me4733).dev-docs-tabs-top >div>.dev-docs-tabs-nav::before{bottom:0;}:where(.css-1me4733).dev-docs-tabs-top >.dev-docs-tabs-nav .dev-docs-tabs-ink-bar,:where(.css-1me4733).dev-docs-tabs-top >div>.dev-docs-tabs-nav .dev-docs-tabs-ink-bar{bottom:0;}:where(.css-1me4733).dev-docs-tabs-bottom >.dev-docs-tabs-nav,:where(.css-1me4733).dev-docs-tabs-bottom >div>.dev-docs-tabs-nav{order:1;margin-top:16px;margin-bottom:0;}:where(.css-1me4733).dev-docs-tabs-bottom >.dev-docs-tabs-nav::before,:where(.css-1me4733).dev-docs-tabs-bottom >div>.dev-docs-tabs-nav::before{top:0;}:where(.css-1me4733).dev-docs-tabs-bottom >.dev-docs-tabs-nav .dev-docs-tabs-ink-bar,:where(.css-1me4733).dev-docs-tabs-bottom >div>.dev-docs-tabs-nav .dev-docs-tabs-ink-bar{top:0;}:where(.css-1me4733).dev-docs-tabs-bottom >.dev-docs-tabs-content-holder,:where(.css-1me4733).dev-docs-tabs-bottom >div>.dev-docs-tabs-content-holder{order:0;}:where(.css-1me4733).dev-docs-tabs-left >.dev-docs-tabs-nav,:where(.css-1me4733).dev-docs-tabs-right >.dev-docs-tabs-nav,:where(.css-1me4733).dev-docs-tabs-left >div>.dev-docs-tabs-nav,:where(.css-1me4733).dev-docs-tabs-right >div>.dev-docs-tabs-nav{flex-direction:column;min-width:40px;}:where(.css-1me4733).dev-docs-tabs-left >.dev-docs-tabs-nav .dev-docs-tabs-tab,:where(.css-1me4733).dev-docs-tabs-right >.dev-docs-tabs-nav .dev-docs-tabs-tab,:where(.css-1me4733).dev-docs-tabs-left >div>.dev-docs-tabs-nav .dev-docs-tabs-tab,:where(.css-1me4733).dev-docs-tabs-right >div>.dev-docs-tabs-nav .dev-docs-tabs-tab{padding:8px 24px;text-align:center;}:where(.css-1me4733).dev-docs-tabs-left >.dev-docs-tabs-nav .dev-docs-tabs-tab+.dev-docs-tabs-tab,:where(.css-1me4733).dev-docs-tabs-right >.dev-docs-tabs-nav .dev-docs-tabs-tab+.dev-docs-tabs-tab,:where(.css-1me4733).dev-docs-tabs-left >div>.dev-docs-tabs-nav .dev-docs-tabs-tab+.dev-docs-tabs-tab,:where(.css-1me4733).dev-docs-tabs-right >div>.dev-docs-tabs-nav .dev-docs-tabs-tab+.dev-docs-tabs-tab{margin:16px 0 0 0;}:where(.css-1me4733).dev-docs-tabs-left >.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap,:where(.css-1me4733).dev-docs-tabs-right >.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap,:where(.css-1me4733).dev-docs-tabs-left >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap,:where(.css-1me4733).dev-docs-tabs-right >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap{flex-direction:column;}:where(.css-1me4733).dev-docs-tabs-left >.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::before,:where(.css-1me4733).dev-docs-tabs-right >.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::before,:where(.css-1me4733).dev-docs-tabs-left >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::before,:where(.css-1me4733).dev-docs-tabs-right >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::before,:where(.css-1me4733).dev-docs-tabs-left >.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::after,:where(.css-1me4733).dev-docs-tabs-right >.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::after,:where(.css-1me4733).dev-docs-tabs-left >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::after,:where(.css-1me4733).dev-docs-tabs-right >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::after{right:0;left:0;height:32px;}:where(.css-1me4733).dev-docs-tabs-left >.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::before,:where(.css-1me4733).dev-docs-tabs-right >.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::before,:where(.css-1me4733).dev-docs-tabs-left >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::before,:where(.css-1me4733).dev-docs-tabs-right >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::before{top:0;box-shadow:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);}:where(.css-1me4733).dev-docs-tabs-left >.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::after,:where(.css-1me4733).dev-docs-tabs-right >.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::after,:where(.css-1me4733).dev-docs-tabs-left >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::after,:where(.css-1me4733).dev-docs-tabs-right >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::after{bottom:0;box-shadow:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);}:where(.css-1me4733).dev-docs-tabs-left >.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap.dev-docs-tabs-nav-wrap-ping-top::before,:where(.css-1me4733).dev-docs-tabs-right >.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap.dev-docs-tabs-nav-wrap-ping-top::before,:where(.css-1me4733).dev-docs-tabs-left >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap.dev-docs-tabs-nav-wrap-ping-top::before,:where(.css-1me4733).dev-docs-tabs-right >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap.dev-docs-tabs-nav-wrap-ping-top::before{opacity:1;}:where(.css-1me4733).dev-docs-tabs-left >.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap.dev-docs-tabs-nav-wrap-ping-bottom::after,:where(.css-1me4733).dev-docs-tabs-right >.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap.dev-docs-tabs-nav-wrap-ping-bottom::after,:where(.css-1me4733).dev-docs-tabs-left >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap.dev-docs-tabs-nav-wrap-ping-bottom::after,:where(.css-1me4733).dev-docs-tabs-right >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap.dev-docs-tabs-nav-wrap-ping-bottom::after{opacity:1;}:where(.css-1me4733).dev-docs-tabs-left >.dev-docs-tabs-nav .dev-docs-tabs-ink-bar,:where(.css-1me4733).dev-docs-tabs-right >.dev-docs-tabs-nav .dev-docs-tabs-ink-bar,:where(.css-1me4733).dev-docs-tabs-left >div>.dev-docs-tabs-nav .dev-docs-tabs-ink-bar,:where(.css-1me4733).dev-docs-tabs-right >div>.dev-docs-tabs-nav .dev-docs-tabs-ink-bar{width:2px;}:where(.css-1me4733).dev-docs-tabs-left >.dev-docs-tabs-nav .dev-docs-tabs-ink-bar-animated,:where(.css-1me4733).dev-docs-tabs-right >.dev-docs-tabs-nav .dev-docs-tabs-ink-bar-animated,:where(.css-1me4733).dev-docs-tabs-left >div>.dev-docs-tabs-nav .dev-docs-tabs-ink-bar-animated,:where(.css-1me4733).dev-docs-tabs-right >div>.dev-docs-tabs-nav .dev-docs-tabs-ink-bar-animated{transition:height 0.3s,top 0.3s;}:where(.css-1me4733).dev-docs-tabs-left >.dev-docs-tabs-nav .dev-docs-tabs-nav-list,:where(.css-1me4733).dev-docs-tabs-right >.dev-docs-tabs-nav .dev-docs-tabs-nav-list,:where(.css-1me4733).dev-docs-tabs-left >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-list,:where(.css-1me4733).dev-docs-tabs-right >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-list,:where(.css-1me4733).dev-docs-tabs-left >.dev-docs-tabs-nav .dev-docs-tabs-nav-operations,:where(.css-1me4733).dev-docs-tabs-right >.dev-docs-tabs-nav .dev-docs-tabs-nav-operations,:where(.css-1me4733).dev-docs-tabs-left >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-operations,:where(.css-1me4733).dev-docs-tabs-right >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-operations{flex:1 0 auto;flex-direction:column;}:where(.css-1me4733).dev-docs-tabs-left >.dev-docs-tabs-nav .dev-docs-tabs-ink-bar,:where(.css-1me4733).dev-docs-tabs-left >div>.dev-docs-tabs-nav .dev-docs-tabs-ink-bar{right:0;}:where(.css-1me4733).dev-docs-tabs-left >.dev-docs-tabs-content-holder,:where(.css-1me4733).dev-docs-tabs-left >div>.dev-docs-tabs-content-holder{margin-left:-1px;border-left:1px solid #d9d9d9;}:where(.css-1me4733).dev-docs-tabs-left >.dev-docs-tabs-content-holder >.dev-docs-tabs-content>.dev-docs-tabs-tabpane,:where(.css-1me4733).dev-docs-tabs-left >div>.dev-docs-tabs-content-holder >.dev-docs-tabs-content>.dev-docs-tabs-tabpane{padding-left:24px;}:where(.css-1me4733).dev-docs-tabs-right >.dev-docs-tabs-nav,:where(.css-1me4733).dev-docs-tabs-right >div>.dev-docs-tabs-nav{order:1;}:where(.css-1me4733).dev-docs-tabs-right >.dev-docs-tabs-nav .dev-docs-tabs-ink-bar,:where(.css-1me4733).dev-docs-tabs-right >div>.dev-docs-tabs-nav .dev-docs-tabs-ink-bar{left:0;}:where(.css-1me4733).dev-docs-tabs-right >.dev-docs-tabs-content-holder,:where(.css-1me4733).dev-docs-tabs-right >div>.dev-docs-tabs-content-holder{order:0;margin-right:-1px;border-right:1px solid #d9d9d9;}:where(.css-1me4733).dev-docs-tabs-right >.dev-docs-tabs-content-holder >.dev-docs-tabs-content>.dev-docs-tabs-tabpane,:where(.css-1me4733).dev-docs-tabs-right >div>.dev-docs-tabs-content-holder >.dev-docs-tabs-content>.dev-docs-tabs-tabpane{padding-right:24px;}:where(.css-1me4733).dev-docs-tabs-dropdown{box-sizing:border-box;margin:0;padding:0;color:rgba(0, 0, 0, 0.88);font-size:14px;line-height:1.5714285714285714;list-style:none;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';position:absolute;top:-9999px;left:-9999px;z-index:1050;display:block;}:where(.css-1me4733).dev-docs-tabs-dropdown-hidden{display:none;}:where(.css-1me4733).dev-docs-tabs-dropdown .dev-docs-tabs-dropdown-menu{max-height:200px;margin:0;padding:4px 0;overflow-x:hidden;overflow-y:auto;text-align:left;list-style-type:none;background-color:#ffffff;background-clip:padding-box;border-radius:8px;outline:none;box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08),0 3px 6px -4px rgba(0, 0, 0, 0.12),0 9px 28px 8px rgba(0, 0, 0, 0.05);}:where(.css-1me4733).dev-docs-tabs-dropdown .dev-docs-tabs-dropdown-menu-item{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:flex;align-items:center;min-width:120px;margin:0;padding:4px 12px;color:rgba(0, 0, 0, 0.88);font-weight:normal;font-size:14px;line-height:1.5714285714285714;cursor:pointer;transition:all 0.3s;}:where(.css-1me4733).dev-docs-tabs-dropdown .dev-docs-tabs-dropdown-menu-item >span{flex:1;white-space:nowrap;}:where(.css-1me4733).dev-docs-tabs-dropdown .dev-docs-tabs-dropdown-menu-item-remove{flex:none;margin-left:12px;color:rgba(0, 0, 0, 0.45);font-size:12px;background:transparent;border:0;cursor:pointer;}:where(.css-1me4733).dev-docs-tabs-dropdown .dev-docs-tabs-dropdown-menu-item-remove:hover{color:#4096ff;}:where(.css-1me4733).dev-docs-tabs-dropdown .dev-docs-tabs-dropdown-menu-item:hover{background:rgba(0, 0, 0, 0.04);}:where(.css-1me4733).dev-docs-tabs-dropdown .dev-docs-tabs-dropdown-menu-item-disabled,:where(.css-1me4733).dev-docs-tabs-dropdown .dev-docs-tabs-dropdown-menu-item-disabled:hover{color:rgba(0, 0, 0, 0.25);background:transparent;cursor:not-allowed;}:where(.css-1me4733).dev-docs-tabs-card >.dev-docs-tabs-nav .dev-docs-tabs-tab,:where(.css-1me4733).dev-docs-tabs-card >div>.dev-docs-tabs-nav .dev-docs-tabs-tab{margin:0;padding:8px 16px;background:rgba(0, 0, 0, 0.02);border:1px solid rgba(5, 5, 5, 0.06);transition:all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);}:where(.css-1me4733).dev-docs-tabs-card >.dev-docs-tabs-nav .dev-docs-tabs-tab-active,:where(.css-1me4733).dev-docs-tabs-card >div>.dev-docs-tabs-nav .dev-docs-tabs-tab-active{color:#1677ff;background:#ffffff;}:where(.css-1me4733).dev-docs-tabs-card >.dev-docs-tabs-nav .dev-docs-tabs-ink-bar,:where(.css-1me4733).dev-docs-tabs-card >div>.dev-docs-tabs-nav .dev-docs-tabs-ink-bar{visibility:hidden;}:where(.css-1me4733).dev-docs-tabs-card.dev-docs-tabs-top >.dev-docs-tabs-nav .dev-docs-tabs-tab+.dev-docs-tabs-tab,:where(.css-1me4733).dev-docs-tabs-card.dev-docs-tabs-bottom >.dev-docs-tabs-nav .dev-docs-tabs-tab+.dev-docs-tabs-tab,:where(.css-1me4733).dev-docs-tabs-card.dev-docs-tabs-top >div>.dev-docs-tabs-nav .dev-docs-tabs-tab+.dev-docs-tabs-tab,:where(.css-1me4733).dev-docs-tabs-card.dev-docs-tabs-bottom >div>.dev-docs-tabs-nav .dev-docs-tabs-tab+.dev-docs-tabs-tab{margin-left:2px;}:where(.css-1me4733).dev-docs-tabs-card.dev-docs-tabs-top >.dev-docs-tabs-nav .dev-docs-tabs-tab,:where(.css-1me4733).dev-docs-tabs-card.dev-docs-tabs-top >div>.dev-docs-tabs-nav .dev-docs-tabs-tab{border-radius:8px 8px 0 0;}:where(.css-1me4733).dev-docs-tabs-card.dev-docs-tabs-top >.dev-docs-tabs-nav .dev-docs-tabs-tab-active,:where(.css-1me4733).dev-docs-tabs-card.dev-docs-tabs-top >div>.dev-docs-tabs-nav .dev-docs-tabs-tab-active{border-bottom-color:#ffffff;}:where(.css-1me4733).dev-docs-tabs-card.dev-docs-tabs-bottom >.dev-docs-tabs-nav .dev-docs-tabs-tab,:where(.css-1me4733).dev-docs-tabs-card.dev-docs-tabs-bottom >div>.dev-docs-tabs-nav .dev-docs-tabs-tab{border-radius:0 0 8px 8px;}:where(.css-1me4733).dev-docs-tabs-card.dev-docs-tabs-bottom >.dev-docs-tabs-nav .dev-docs-tabs-tab-active,:where(.css-1me4733).dev-docs-tabs-card.dev-docs-tabs-bottom >div>.dev-docs-tabs-nav .dev-docs-tabs-tab-active{border-top-color:#ffffff;}:where(.css-1me4733).dev-docs-tabs-card.dev-docs-tabs-left >.dev-docs-tabs-nav .dev-docs-tabs-tab+.dev-docs-tabs-tab,:where(.css-1me4733).dev-docs-tabs-card.dev-docs-tabs-right >.dev-docs-tabs-nav .dev-docs-tabs-tab+.dev-docs-tabs-tab,:where(.css-1me4733).dev-docs-tabs-card.dev-docs-tabs-left >div>.dev-docs-tabs-nav .dev-docs-tabs-tab+.dev-docs-tabs-tab,:where(.css-1me4733).dev-docs-tabs-card.dev-docs-tabs-right >div>.dev-docs-tabs-nav .dev-docs-tabs-tab+.dev-docs-tabs-tab{margin-top:2px;}:where(.css-1me4733).dev-docs-tabs-card.dev-docs-tabs-left >.dev-docs-tabs-nav .dev-docs-tabs-tab,:where(.css-1me4733).dev-docs-tabs-card.dev-docs-tabs-left >div>.dev-docs-tabs-nav .dev-docs-tabs-tab{border-radius:8px 0 0 8px;}:where(.css-1me4733).dev-docs-tabs-card.dev-docs-tabs-left >.dev-docs-tabs-nav .dev-docs-tabs-tab-active,:where(.css-1me4733).dev-docs-tabs-card.dev-docs-tabs-left >div>.dev-docs-tabs-nav .dev-docs-tabs-tab-active{border-right-color:#ffffff;}:where(.css-1me4733).dev-docs-tabs-card.dev-docs-tabs-right >.dev-docs-tabs-nav .dev-docs-tabs-tab,:where(.css-1me4733).dev-docs-tabs-card.dev-docs-tabs-right >div>.dev-docs-tabs-nav .dev-docs-tabs-tab{border-radius:0 8px 8px 0;}:where(.css-1me4733).dev-docs-tabs-card.dev-docs-tabs-right >.dev-docs-tabs-nav .dev-docs-tabs-tab-active,:where(.css-1me4733).dev-docs-tabs-card.dev-docs-tabs-right >div>.dev-docs-tabs-nav .dev-docs-tabs-tab-active{border-left-color:#ffffff;}:where(.css-1me4733).dev-docs-tabs{box-sizing:border-box;margin:0;padding:0;color:rgba(0, 0, 0, 0.88);font-size:14px;line-height:1.5714285714285714;list-style:none;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';display:flex;}:where(.css-1me4733).dev-docs-tabs >.dev-docs-tabs-nav,:where(.css-1me4733).dev-docs-tabs >div>.dev-docs-tabs-nav{position:relative;display:flex;flex:none;align-items:center;}:where(.css-1me4733).dev-docs-tabs >.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap,:where(.css-1me4733).dev-docs-tabs >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap{position:relative;display:flex;flex:auto;align-self:stretch;overflow:hidden;white-space:nowrap;transform:translate(0);}:where(.css-1me4733).dev-docs-tabs >.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::before,:where(.css-1me4733).dev-docs-tabs >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::before,:where(.css-1me4733).dev-docs-tabs >.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::after,:where(.css-1me4733).dev-docs-tabs >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap::after{position:absolute;z-index:1;opacity:0;transition:opacity 0.3s;content:'';pointer-events:none;}:where(.css-1me4733).dev-docs-tabs >.dev-docs-tabs-nav .dev-docs-tabs-nav-list,:where(.css-1me4733).dev-docs-tabs >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-list{position:relative;display:flex;transition:opacity 0.3s;}:where(.css-1me4733).dev-docs-tabs >.dev-docs-tabs-nav .dev-docs-tabs-nav-operations,:where(.css-1me4733).dev-docs-tabs >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-operations{display:flex;align-self:stretch;}:where(.css-1me4733).dev-docs-tabs >.dev-docs-tabs-nav .dev-docs-tabs-nav-operations-hidden,:where(.css-1me4733).dev-docs-tabs >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-operations-hidden{position:absolute;visibility:hidden;pointer-events:none;}:where(.css-1me4733).dev-docs-tabs >.dev-docs-tabs-nav .dev-docs-tabs-nav-more,:where(.css-1me4733).dev-docs-tabs >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-more{position:relative;padding:8px 16px;background:transparent;border:0;}:where(.css-1me4733).dev-docs-tabs >.dev-docs-tabs-nav .dev-docs-tabs-nav-more::after,:where(.css-1me4733).dev-docs-tabs >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-more::after{position:absolute;right:0;bottom:0;left:0;height:5px;transform:translateY(100%);content:'';}:where(.css-1me4733).dev-docs-tabs >.dev-docs-tabs-nav .dev-docs-tabs-nav-add,:where(.css-1me4733).dev-docs-tabs >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-add{min-width:40px;margin-left:2px;padding:0 8px;background:transparent;border:1px solid rgba(5, 5, 5, 0.06);border-radius:8px 8px 0 0;outline:none;cursor:pointer;color:rgba(0, 0, 0, 0.88);transition:all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);}:where(.css-1me4733).dev-docs-tabs >.dev-docs-tabs-nav .dev-docs-tabs-nav-add:hover,:where(.css-1me4733).dev-docs-tabs >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-add:hover{color:#4096ff;}:where(.css-1me4733).dev-docs-tabs >.dev-docs-tabs-nav .dev-docs-tabs-nav-add:active,:where(.css-1me4733).dev-docs-tabs >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-add:active,:where(.css-1me4733).dev-docs-tabs >.dev-docs-tabs-nav .dev-docs-tabs-nav-add:focus:not(:focus-visible),:where(.css-1me4733).dev-docs-tabs >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-add:focus:not(:focus-visible){color:#0958d9;}:where(.css-1me4733).dev-docs-tabs >.dev-docs-tabs-nav .dev-docs-tabs-nav-add:focus-visible,:where(.css-1me4733).dev-docs-tabs >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-add:focus-visible{outline:4px solid #91caff;outline-offset:1px;transition:outline-offset 0s,outline 0s;}:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-extra-content{flex:none;}:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-ink-bar{position:absolute;background:#1677ff;pointer-events:none;}:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-tab{position:relative;display:inline-flex;align-items:center;padding:12px 0;font-size:14px;background:transparent;border:0;outline:none;cursor:pointer;}:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-tab-btn:focus:not(:focus-visible),:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-tab-remove:focus:not(:focus-visible),:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-tab-btn:active,:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-tab-remove:active{color:#0958d9;}:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-tab-btn:focus-visible,:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-tab-remove:focus-visible{outline:4px solid #91caff;outline-offset:1px;transition:outline-offset 0s,outline 0s;}:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-tab-btn{outline:none;transition:all 0.3s;}:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-tab-remove{flex:none;margin-right:-4px;margin-left:8px;color:rgba(0, 0, 0, 0.45);font-size:12px;background:transparent;border:none;outline:none;cursor:pointer;transition:all 0.3s;}:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-tab-remove:hover{color:rgba(0, 0, 0, 0.88);}:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-tab:hover{color:#4096ff;}:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-tab.dev-docs-tabs-tab-active .dev-docs-tabs-tab-btn{color:#1677ff;text-shadow:0 0 0.25px currentcolor;}:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-tab.dev-docs-tabs-tab-disabled{color:rgba(0, 0, 0, 0.25);cursor:not-allowed;}:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-tab.dev-docs-tabs-tab-disabled .dev-docs-tabs-tab-btn:focus,:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-tab.dev-docs-tabs-tab-disabled .dev-docs-tabs-remove:focus,:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-tab.dev-docs-tabs-tab-disabled .dev-docs-tabs-tab-btn:active,:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-tab.dev-docs-tabs-tab-disabled .dev-docs-tabs-remove:active{color:rgba(0, 0, 0, 0.25);}:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-tab .dev-docs-tabs-tab-remove .anticon{margin:0;}:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-tab .anticon{margin-right:12px;}:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-tab+.dev-docs-tabs-tab{margin:0 0 0 32px;}:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-content{position:relative;width:100%;}:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-content-holder{flex:auto;min-width:0;min-height:0;}:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-tabpane{outline:none;}:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-tabpane-hidden{display:none;}:where(.css-1me4733).dev-docs-tabs-centered >.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap:not([class*='.dev-docs-tabs-nav-wrap-ping']),:where(.css-1me4733).dev-docs-tabs-centered >div>.dev-docs-tabs-nav .dev-docs-tabs-nav-wrap:not([class*='.dev-docs-tabs-nav-wrap-ping']){justify-content:center;}:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-switch-appear,:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-switch-enter{transition:none;}:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-switch-appear-start,:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-switch-enter-start{opacity:0;}:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-switch-appear-active,:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-switch-enter-active{opacity:1;transition:opacity 0.3s;}:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-switch-leave{position:absolute;transition:none;inset:0;}:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-switch-leave-start{opacity:1;}:where(.css-1me4733).dev-docs-tabs .dev-docs-tabs-switch-leave-active{opacity:0;transition:opacity 0.3s;}:where(.css-1me4733).ant-slide-up-enter,:where(.css-1me4733).ant-slide-up-appear{animation-duration:0.2s;animation-fill-mode:both;animation-play-state:paused;}:where(.css-1me4733).ant-slide-up-leave{animation-duration:0.2s;animation-fill-mode:both;animation-play-state:paused;}:where(.css-1me4733).ant-slide-up-enter.ant-slide-up-enter-active,:where(.css-1me4733).ant-slide-up-appear.ant-slide-up-appear-active{animation-name:css-1me4733-antSlideUpIn;animation-play-state:running;}:where(.css-1me4733).ant-slide-up-leave.ant-slide-up-leave-active{animation-name:css-1me4733-antSlideUpOut;animation-play-state:running;pointer-events:none;}:where(.css-1me4733).ant-slide-up-enter,:where(.css-1me4733).ant-slide-up-appear{transform:scale(0);transform-origin:0% 0%;opacity:0;animation-timing-function:cubic-bezier(0.23, 1, 0.32, 1);}:where(.css-1me4733).ant-slide-up-enter-prepare,:where(.css-1me4733).ant-slide-up-appear-prepare{transform:scale(1);}:where(.css-1me4733).ant-slide-up-leave{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);}:where(.css-1me4733).ant-slide-down-enter,:where(.css-1me4733).ant-slide-down-appear{animation-duration:0.2s;animation-fill-mode:both;animation-play-state:paused;}:where(.css-1me4733).ant-slide-down-leave{animation-duration:0.2s;animation-fill-mode:both;animation-play-state:paused;}:where(.css-1me4733).ant-slide-down-enter.ant-slide-down-enter-active,:where(.css-1me4733).ant-slide-down-appear.ant-slide-down-appear-active{animation-name:css-1me4733-antSlideDownIn;animation-play-state:running;}:where(.css-1me4733).ant-slide-down-leave.ant-slide-down-leave-active{animation-name:css-1me4733-antSlideDownOut;animation-play-state:running;pointer-events:none;}:where(.css-1me4733).ant-slide-down-enter,:where(.css-1me4733).ant-slide-down-appear{transform:scale(0);transform-origin:0% 0%;opacity:0;animation-timing-function:cubic-bezier(0.23, 1, 0.32, 1);}:where(.css-1me4733).ant-slide-down-enter-prepare,:where(.css-1me4733).ant-slide-down-appear-prepare{transform:scale(1);}:where(.css-1me4733).ant-slide-down-leave{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);}</style><style data-token-hash="1wmd7ff" data-css-hash="19aq8sb">:where(.css-1me4733)[class^="ant-input"],:where(.css-1me4733)[class*=" ant-input"]{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';font-size:14px;box-sizing:border-box;}:where(.css-1me4733)[class^="ant-input"]::before,:where(.css-1me4733)[class*=" ant-input"]::before,:where(.css-1me4733)[class^="ant-input"]::after,:where(.css-1me4733)[class*=" ant-input"]::after{box-sizing:border-box;}:where(.css-1me4733)[class^="ant-input"] [class^="ant-input"],:where(.css-1me4733)[class*=" ant-input"] [class^="ant-input"],:where(.css-1me4733)[class^="ant-input"] [class*=" ant-input"],:where(.css-1me4733)[class*=" ant-input"] [class*=" ant-input"]{box-sizing:border-box;}:where(.css-1me4733)[class^="ant-input"] [class^="ant-input"]::before,:where(.css-1me4733)[class*=" ant-input"] [class^="ant-input"]::before,:where(.css-1me4733)[class^="ant-input"] [class*=" ant-input"]::before,:where(.css-1me4733)[class*=" ant-input"] [class*=" ant-input"]::before,:where(.css-1me4733)[class^="ant-input"] [class^="ant-input"]::after,:where(.css-1me4733)[class*=" ant-input"] [class^="ant-input"]::after,:where(.css-1me4733)[class^="ant-input"] [class*=" ant-input"]::after,:where(.css-1me4733)[class*=" ant-input"] [class*=" ant-input"]::after{box-sizing:border-box;}:where(.css-1me4733).ant-input{box-sizing:border-box;margin:0;padding:4px 11px;color:rgba(0, 0, 0, 0.88);font-size:14px;line-height:1.5714285714285714;list-style:none;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';position:relative;display:inline-block;width:100%;min-width:0;background-color:#ffffff;background-image:none;border-width:1px;border-style:solid;border-color:#d9d9d9;border-radius:6px;transition:all 0.2s;}:where(.css-1me4733).ant-input::-moz-placeholder{opacity:1;}:where(.css-1me4733).ant-input::placeholder{color:rgba(0, 0, 0, 0.25);user-select:none;}:where(.css-1me4733).ant-input:placeholder-shown{text-overflow:ellipsis;}:where(.css-1me4733).ant-input:hover{border-color:#4096ff;border-inline-end-width:1px;}:where(.css-1me4733).ant-input:focus,:where(.css-1me4733).ant-input-focused{border-color:#4096ff;box-shadow:0 0 0 2px rgba(5, 145, 255, 0.1);border-inline-end-width:1px;outline:0;}:where(.css-1me4733).ant-input-disabled,:where(.css-1me4733).ant-input[disabled]{color:rgba(0, 0, 0, 0.25);background-color:rgba(0, 0, 0, 0.04);border-color:#d9d9d9;box-shadow:none;cursor:not-allowed;opacity:1;}:where(.css-1me4733).ant-input-disabled:hover,:where(.css-1me4733).ant-input[disabled]:hover{border-color:#d9d9d9;border-inline-end-width:1px;}:where(.css-1me4733).ant-input-borderless,:where(.css-1me4733).ant-input-borderless:hover,:where(.css-1me4733).ant-input-borderless:focus,:where(.css-1me4733).ant-input-borderless-focused,:where(.css-1me4733).ant-input-borderless-disabled,:where(.css-1me4733).ant-input-borderless[disabled]{background-color:transparent;border:none;box-shadow:none;}textarea:where(.css-1me4733).ant-input{max-width:100%;height:auto;min-height:32px;line-height:1.5714285714285714;vertical-align:bottom;transition:all 0.3s,height 0s;resize:vertical;}:where(.css-1me4733).ant-input-lg{padding:7px 11px;font-size:16px;line-height:1.5;border-radius:8px;}:where(.css-1me4733).ant-input-sm{padding:0px 7px;border-radius:4px;}:where(.css-1me4733).ant-input-rtl{direction:rtl;}:where(.css-1me4733).ant-input-textarea-rtl{direction:rtl;}:where(.css-1me4733).ant-input-status-error:not(.ant-input-disabled):not(.ant-input-borderless).ant-input{border-color:#ff4d4f;}:where(.css-1me4733).ant-input-status-error:not(.ant-input-disabled):not(.ant-input-borderless).ant-input:hover{border-color:#ffa39e;}:where(.css-1me4733).ant-input-status-error:not(.ant-input-disabled):not(.ant-input-borderless).ant-input:focus,:where(.css-1me4733).ant-input-status-error:not(.ant-input-disabled):not(.ant-input-borderless).ant-input-focused{border-color:#ff4d4f;box-shadow:0 0 0 2px rgba(255, 38, 5, 0.06);border-inline-end-width:1px;outline:0;}:where(.css-1me4733).ant-input-status-error:not(.ant-input-disabled):not(.ant-input-borderless).ant-input .ant-input-prefix,:where(.css-1me4733).ant-input-status-error:not(.ant-input-disabled):not(.ant-input-borderless).ant-input .ant-input-suffix{color:#ff4d4f;}:where(.css-1me4733).ant-input-status-warning:not(.ant-input-disabled):not(.ant-input-borderless).ant-input{border-color:#faad14;}:where(.css-1me4733).ant-input-status-warning:not(.ant-input-disabled):not(.ant-input-borderless).ant-input:hover{border-color:#ffd666;}:where(.css-1me4733).ant-input-status-warning:not(.ant-input-disabled):not(.ant-input-borderless).ant-input:focus,:where(.css-1me4733).ant-input-status-warning:not(.ant-input-disabled):not(.ant-input-borderless).ant-input-focused{border-color:#faad14;box-shadow:0 0 0 2px rgba(255, 215, 5, 0.1);border-inline-end-width:1px;outline:0;}:where(.css-1me4733).ant-input-status-warning:not(.ant-input-disabled):not(.ant-input-borderless).ant-input .ant-input-prefix,:where(.css-1me4733).ant-input-status-warning:not(.ant-input-disabled):not(.ant-input-borderless).ant-input .ant-input-suffix{color:#faad14;}:where(.css-1me4733).ant-input[type="color"]{height:32px;}:where(.css-1me4733).ant-input[type="color"].ant-input-lg{height:40px;}:where(.css-1me4733).ant-input[type="color"].ant-input-sm{height:24px;padding-top:3px;padding-bottom:3px;}:where(.css-1me4733).ant-input[type="search"]::-webkit-search-cancel-button,:where(.css-1me4733).ant-input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}:where(.css-1me4733).ant-input-textarea{position:relative;}:where(.css-1me4733).ant-input-textarea-show-count >.ant-input{height:100%;}:where(.css-1me4733).ant-input-textarea-show-count .ant-input-data-count{color:rgba(0, 0, 0, 0.45);white-space:nowrap;pointer-events:none;float:right;margin-bottom:-22px;}:where(.css-1me4733).ant-input-textarea-show-count-rtl .ant-input-data-count{float:left;}:where(.css-1me4733).ant-input-textarea-affix-wrapper.ant-input-textarea-has-feedback .ant-input{padding-inline-end:24px;}:where(.css-1me4733).ant-input-textarea-affix-wrapper.ant-input-affix-wrapper{padding:0;}:where(.css-1me4733).ant-input-textarea-affix-wrapper.ant-input-affix-wrapper >textarea.ant-input{font-size:inherit;border:none;outline:none;}:where(.css-1me4733).ant-input-textarea-affix-wrapper.ant-input-affix-wrapper >textarea.ant-input:focus{box-shadow:none!important;}:where(.css-1me4733).ant-input-textarea-affix-wrapper.ant-input-affix-wrapper .ant-input-suffix{margin:0;}:where(.css-1me4733).ant-input-textarea-affix-wrapper.ant-input-affix-wrapper .ant-input-suffix >*:not(:last-child){margin-inline:0;}:where(.css-1me4733).ant-input-textarea-affix-wrapper.ant-input-affix-wrapper .ant-input-suffix .ant-input-clear-icon{position:absolute;inset-inline-end:8px;inset-block-start:8px;}:where(.css-1me4733).ant-input-textarea-affix-wrapper.ant-input-affix-wrapper .ant-input-suffix .ant-input-textarea-suffix{position:absolute;top:0;inset-inline-end:11px;bottom:0;z-index:1;display:inline-flex;align-items:center;margin:auto;pointer-events:none;}:where(.css-1me4733).ant-input-affix-wrapper{position:relative;display:inline-flex;width:100%;min-width:0;padding:4px 11px;color:rgba(0, 0, 0, 0.88);font-size:14px;line-height:1.5714285714285714;background-color:#ffffff;background-image:none;border-width:1px;border-style:solid;border-color:#d9d9d9;border-radius:6px;transition:all 0.2s;}:where(.css-1me4733).ant-input-affix-wrapper::-moz-placeholder{opacity:1;}:where(.css-1me4733).ant-input-affix-wrapper::placeholder{color:rgba(0, 0, 0, 0.25);user-select:none;}:where(.css-1me4733).ant-input-affix-wrapper:placeholder-shown{text-overflow:ellipsis;}:where(.css-1me4733).ant-input-affix-wrapper:hover{border-color:#4096ff;border-inline-end-width:1px;}:where(.css-1me4733).ant-input-affix-wrapper:focus,:where(.css-1me4733).ant-input-affix-wrapper-focused{border-color:#4096ff;box-shadow:0 0 0 2px rgba(5, 145, 255, 0.1);border-inline-end-width:1px;outline:0;}:where(.css-1me4733).ant-input-affix-wrapper-disabled,:where(.css-1me4733).ant-input-affix-wrapper[disabled]{color:rgba(0, 0, 0, 0.25);background-color:rgba(0, 0, 0, 0.04);border-color:#d9d9d9;box-shadow:none;cursor:not-allowed;opacity:1;}:where(.css-1me4733).ant-input-affix-wrapper-disabled:hover,:where(.css-1me4733).ant-input-affix-wrapper[disabled]:hover{border-color:#d9d9d9;border-inline-end-width:1px;}:where(.css-1me4733).ant-input-affix-wrapper-borderless,:where(.css-1me4733).ant-input-affix-wrapper-borderless:hover,:where(.css-1me4733).ant-input-affix-wrapper-borderless:focus,:where(.css-1me4733).ant-input-affix-wrapper-borderless-focused,:where(.css-1me4733).ant-input-affix-wrapper-borderless-disabled,:where(.css-1me4733).ant-input-affix-wrapper-borderless[disabled]{background-color:transparent;border:none;box-shadow:none;}textarea:where(.css-1me4733).ant-input-affix-wrapper{max-width:100%;height:auto;min-height:32px;line-height:1.5714285714285714;vertical-align:bottom;transition:all 0.3s,height 0s;resize:vertical;}:where(.css-1me4733).ant-input-affix-wrapper-lg{padding:7px 11px;font-size:16px;line-height:1.5;border-radius:8px;}:where(.css-1me4733).ant-input-affix-wrapper-sm{padding:0px 7px;border-radius:4px;}:where(.css-1me4733).ant-input-affix-wrapper-rtl{direction:rtl;}:where(.css-1me4733).ant-input-affix-wrapper-textarea-rtl{direction:rtl;}:where(.css-1me4733).ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover{border-color:#4096ff;border-inline-end-width:1px;z-index:1;}.ant-input-search-with-button :where(.css-1me4733).ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover{z-index:0;}:where(.css-1me4733).ant-input-affix-wrapper-focused,:where(.css-1me4733).ant-input-affix-wrapper:focus{z-index:1;}:where(.css-1me4733).ant-input-affix-wrapper-disabled .ant-input[disabled]{background:transparent;}:where(.css-1me4733).ant-input-affix-wrapper >input.ant-input{padding:0;font-size:inherit;border:none;border-radius:0;outline:none;}:where(.css-1me4733).ant-input-affix-wrapper >input.ant-input:focus{box-shadow:none!important;}:where(.css-1me4733).ant-input-affix-wrapper::before{width:0;visibility:hidden;content:"\a0";}:where(.css-1me4733).ant-input-affix-wrapper .ant-input-prefix,:where(.css-1me4733).ant-input-affix-wrapper .ant-input-suffix{display:flex;flex:none;align-items:center;}:where(.css-1me4733).ant-input-affix-wrapper .ant-input-prefix >*:not(:last-child),:where(.css-1me4733).ant-input-affix-wrapper .ant-input-suffix >*:not(:last-child){margin-inline-end:8px;}:where(.css-1me4733).ant-input-affix-wrapper .ant-input-show-count-suffix{color:rgba(0, 0, 0, 0.45);}:where(.css-1me4733).ant-input-affix-wrapper .ant-input-show-count-has-suffix{margin-inline-end:4px;}:where(.css-1me4733).ant-input-affix-wrapper .ant-input-prefix{margin-inline-end:4px;}:where(.css-1me4733).ant-input-affix-wrapper .ant-input-suffix{margin-inline-start:4px;}:where(.css-1me4733).ant-input-affix-wrapper .ant-input-clear-icon{margin:0;color:rgba(0, 0, 0, 0.25);font-size:12px;vertical-align:-1px;cursor:pointer;transition:color 0.3s;}:where(.css-1me4733).ant-input-affix-wrapper .ant-input-clear-icon:hover{color:rgba(0, 0, 0, 0.45);}:where(.css-1me4733).ant-input-affix-wrapper .ant-input-clear-icon:active{color:rgba(0, 0, 0, 0.88);}:where(.css-1me4733).ant-input-affix-wrapper .ant-input-clear-icon-hidden{visibility:hidden;}:where(.css-1me4733).ant-input-affix-wrapper .ant-input-clear-icon-has-suffix{margin:0 4px;}:where(.css-1me4733).ant-input-affix-wrapper .anticon.ant-input-password-icon{color:rgba(0, 0, 0, 0.45);cursor:pointer;transition:all 0.3s;}:where(.css-1me4733).ant-input-affix-wrapper .anticon.ant-input-password-icon:hover{color:rgba(0, 0, 0, 0.88);}:where(.css-1me4733).ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper{border-color:#ff4d4f;}:where(.css-1me4733).ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:hover{border-color:#ffa39e;}:where(.css-1me4733).ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:focus,:where(.css-1me4733).ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper-focused{border-color:#ff4d4f;box-shadow:0 0 0 2px rgba(255, 38, 5, 0.06);border-inline-end-width:1px;outline:0;}:where(.css-1me4733).ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper .ant-input-prefix,:where(.css-1me4733).ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper .ant-input-suffix{color:#ff4d4f;}:where(.css-1me4733).ant-input-affix-wrapper-status-warning:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper{border-color:#faad14;}:where(.css-1me4733).ant-input-affix-wrapper-status-warning:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:hover{border-color:#ffd666;}:where(.css-1me4733).ant-input-affix-wrapper-status-warning:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:focus,:where(.css-1me4733).ant-input-affix-wrapper-status-warning:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper-focused{border-color:#faad14;box-shadow:0 0 0 2px rgba(255, 215, 5, 0.1);border-inline-end-width:1px;outline:0;}:where(.css-1me4733).ant-input-affix-wrapper-status-warning:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper .ant-input-prefix,:where(.css-1me4733).ant-input-affix-wrapper-status-warning:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper .ant-input-suffix{color:#faad14;}:where(.css-1me4733).ant-input-group{box-sizing:border-box;margin:0;padding:0;color:rgba(0, 0, 0, 0.88);font-size:14px;line-height:1.5714285714285714;list-style:none;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';position:relative;display:table;width:100%;border-collapse:separate;border-spacing:0;}:where(.css-1me4733).ant-input-group[class*='col-']{padding-inline-end:8px;}:where(.css-1me4733).ant-input-group[class*='col-']:last-child{padding-inline-end:0;}:where(.css-1me4733).ant-input-group-lg .ant-input,:where(.css-1me4733).ant-input-group-lg>.ant-input-group-addon{padding:7px 11px;font-size:16px;line-height:1.5;border-radius:8px;}:where(.css-1me4733).ant-input-group-sm .ant-input,:where(.css-1me4733).ant-input-group-sm>.ant-input-group-addon{padding:0px 7px;border-radius:4px;}:where(.css-1me4733).ant-input-group-lg .ant-select-single .ant-select-selector{height:40px;}:where(.css-1me4733).ant-input-group-sm .ant-select-single .ant-select-selector{height:24px;}:where(.css-1me4733).ant-input-group >.ant-input{display:table-cell;}:where(.css-1me4733).ant-input-group >.ant-input:not(:first-child):not(:last-child){border-radius:0;}:where(.css-1me4733).ant-input-group .ant-input-group-addon,:where(.css-1me4733).ant-input-group .ant-input-group-wrap{display:table-cell;width:1px;white-space:nowrap;vertical-align:middle;}:where(.css-1me4733).ant-input-group .ant-input-group-addon:not(:first-child):not(:last-child),:where(.css-1me4733).ant-input-group .ant-input-group-wrap:not(:first-child):not(:last-child){border-radius:0;}:where(.css-1me4733).ant-input-group .ant-input-group-wrap>*{display:block!important;}:where(.css-1me4733).ant-input-group .ant-input-group-addon{position:relative;padding:0 11px;color:rgba(0, 0, 0, 0.88);font-weight:normal;font-size:14px;text-align:center;background-color:rgba(0, 0, 0, 0.02);border:1px solid #d9d9d9;border-radius:6px;transition:all 0.3s;line-height:1;}:where(.css-1me4733).ant-input-group .ant-input-group-addon .ant-select{margin:-5px -11px;}:where(.css-1me4733).ant-input-group .ant-input-group-addon .ant-select.ant-select-single:not(.ant-select-customize-input) .ant-select-selector{background-color:inherit;border:1px solid transparent;box-shadow:none;}:where(.css-1me4733).ant-input-group .ant-input-group-addon .ant-select-open .ant-select-selector,:where(.css-1me4733).ant-input-group .ant-input-group-addon .ant-select-focused .ant-select-selector{color:#1677ff;}:where(.css-1me4733).ant-input-group .ant-input-group-addon .ant-cascader-picker{margin:-9px -11px;background-color:transparent;}:where(.css-1me4733).ant-input-group .ant-input-group-addon .ant-cascader-picker .ant-cascader-input{text-align:start;border:0;box-shadow:none;}:where(.css-1me4733).ant-input-group .ant-input-group-addon:first-child{border-inline-end:0;}:where(.css-1me4733).ant-input-group .ant-input-group-addon:last-child{border-inline-start:0;}:where(.css-1me4733).ant-input-group .ant-input{width:100%;margin-bottom:0;text-align:inherit;}:where(.css-1me4733).ant-input-group .ant-input:focus{z-index:1;border-inline-end-width:1px;}:where(.css-1me4733).ant-input-group .ant-input:hover{z-index:1;border-inline-end-width:1px;}.ant-input-search-with-button :where(.css-1me4733).ant-input-group .ant-input:hover{z-index:0;}:where(.css-1me4733).ant-input-group >.ant-input:first-child,:where(.css-1me4733).ant-input-group .ant-input-group-addon:first-child{border-start-end-radius:0;border-end-end-radius:0;}:where(.css-1me4733).ant-input-group >.ant-input:first-child .ant-select .ant-select-selector,:where(.css-1me4733).ant-input-group .ant-input-group-addon:first-child .ant-select .ant-select-selector{border-start-end-radius:0;border-end-end-radius:0;}:where(.css-1me4733).ant-input-group >.ant-input-affix-wrapper:not(:first-child) .ant-input{border-start-start-radius:0;border-end-start-radius:0;}:where(.css-1me4733).ant-input-group >.ant-input-affix-wrapper:not(:last-child) .ant-input{border-start-end-radius:0;border-end-end-radius:0;}:where(.css-1me4733).ant-input-group >.ant-input:last-child,:where(.css-1me4733).ant-input-group .ant-input-group-addon:last-child{border-start-start-radius:0;border-end-start-radius:0;}:where(.css-1me4733).ant-input-group >.ant-input:last-child .ant-select .ant-select-selector,:where(.css-1me4733).ant-input-group .ant-input-group-addon:last-child .ant-select .ant-select-selector{border-start-start-radius:0;border-end-start-radius:0;}:where(.css-1me4733).ant-input-group .ant-input-affix-wrapper:not(:last-child){border-start-end-radius:0;border-end-end-radius:0;}.ant-input-search :where(.css-1me4733).ant-input-group .ant-input-affix-wrapper:not(:last-child){border-start-start-radius:6px;border-end-start-radius:6px;}:where(.css-1me4733).ant-input-group .ant-input-affix-wrapper:not(:first-child),.ant-input-search :where(.css-1me4733).ant-input-group .ant-input-affix-wrapper:not(:first-child){border-start-start-radius:0;border-end-start-radius:0;}:where(.css-1me4733).ant-input-group.ant-input-group-compact{display:block;}:where(.css-1me4733).ant-input-group.ant-input-group-compact::before{display:table;content:"";}:where(.css-1me4733).ant-input-group.ant-input-group-compact::after{display:table;clear:both;content:"";}:where(.css-1me4733).ant-input-group.ant-input-group-compact .ant-input-group-addon:not(:first-child):not(:last-child),:where(.css-1me4733).ant-input-group.ant-input-group-compact .ant-input-group-wrap:not(:first-child):not(:last-child),:where(.css-1me4733).ant-input-group.ant-input-group-compact >.ant-input:not(:first-child):not(:last-child){border-inline-end-width:1px;}:where(.css-1me4733).ant-input-group.ant-input-group-compact .ant-input-group-addon:not(:first-child):not(:last-child):hover,:where(.css-1me4733).ant-input-group.ant-input-group-compact .ant-input-group-wrap:not(:first-child):not(:last-child):hover,:where(.css-1me4733).ant-input-group.ant-input-group-compact >.ant-input:not(:first-child):not(:last-child):hover{z-index:1;}:where(.css-1me4733).ant-input-group.ant-input-group-compact .ant-input-group-addon:not(:first-child):not(:last-child):focus,:where(.css-1me4733).ant-input-group.ant-input-group-compact .ant-input-group-wrap:not(:first-child):not(:last-child):focus,:where(.css-1me4733).ant-input-group.ant-input-group-compact >.ant-input:not(:first-child):not(:last-child):focus{z-index:1;}:where(.css-1me4733).ant-input-group.ant-input-group-compact>*{display:inline-block;float:none;vertical-align:top;border-radius:0;}:where(.css-1me4733).ant-input-group.ant-input-group-compact>.ant-input-affix-wrapper{display:inline-flex;}:where(.css-1me4733).ant-input-group.ant-input-group-compact>.ant-picker-range{display:inline-flex;}:where(.css-1me4733).ant-input-group.ant-input-group-compact>*:not(:last-child){margin-inline-end:-1px;border-inline-end-width:1px;}:where(.css-1me4733).ant-input-group.ant-input-group-compact .ant-input{float:none;}:where(.css-1me4733).ant-input-group.ant-input-group-compact>.ant-select>.ant-select-selector,:where(.css-1me4733).ant-input-group.ant-input-group-compact>.ant-select-auto-complete .ant-input,:where(.css-1me4733).ant-input-group.ant-input-group-compact>.ant-cascader-picker .ant-input,:where(.css-1me4733).ant-input-group.ant-input-group-compact>.ant-input-group-wrapper .ant-input{border-inline-end-width:1px;border-radius:0;}:where(.css-1me4733).ant-input-group.ant-input-group-compact>.ant-select>.ant-select-selector:hover,:where(.css-1me4733).ant-input-group.ant-input-group-compact>.ant-select-auto-complete .ant-input:hover,:where(.css-1me4733).ant-input-group.ant-input-group-compact>.ant-cascader-picker .ant-input:hover,:where(.css-1me4733).ant-input-group.ant-input-group-compact>.ant-input-group-wrapper .ant-input:hover{z-index:1;}:where(.css-1me4733).ant-input-group.ant-input-group-compact>.ant-select>.ant-select-selector:focus,:where(.css-1me4733).ant-input-group.ant-input-group-compact>.ant-select-auto-complete .ant-input:focus,:where(.css-1me4733).ant-input-group.ant-input-group-compact>.ant-cascader-picker .ant-input:focus,:where(.css-1me4733).ant-input-group.ant-input-group-compact>.ant-input-group-wrapper .ant-input:focus{z-index:1;}:where(.css-1me4733).ant-input-group.ant-input-group-compact>.ant-select-focused{z-index:1;}:where(.css-1me4733).ant-input-group.ant-input-group-compact>.ant-select>.ant-select-arrow{z-index:1;}:where(.css-1me4733).ant-input-group.ant-input-group-compact>*:first-child,:where(.css-1me4733).ant-input-group.ant-input-group-compact>.ant-select:first-child>.ant-select-selector,:where(.css-1me4733).ant-input-group.ant-input-group-compact>.ant-select-auto-complete:first-child .ant-input,:where(.css-1me4733).ant-input-group.ant-input-group-compact>.ant-cascader-picker:first-child .ant-input{border-start-start-radius:6px;border-end-start-radius:6px;}:where(.css-1me4733).ant-input-group.ant-input-group-compact>*:last-child,:where(.css-1me4733).ant-input-group.ant-input-group-compact>.ant-select:last-child>.ant-select-selector,:where(.css-1me4733).ant-input-group.ant-input-group-compact>.ant-cascader-picker:last-child .ant-input,:where(.css-1me4733).ant-input-group.ant-input-group-compact>.ant-cascader-picker-focused:last-child .ant-input{border-inline-end-width:1px;border-start-end-radius:6px;border-end-end-radius:6px;}:where(.css-1me4733).ant-input-group.ant-input-group-compact>.ant-select-auto-complete .ant-input{vertical-align:top;}:where(.css-1me4733).ant-input-group.ant-input-group-compact .ant-input-group-wrapper+.ant-input-group-wrapper{margin-inline-start:-1px;}:where(.css-1me4733).ant-input-group.ant-input-group-compact .ant-input-group-wrapper+.ant-input-group-wrapper .ant-input-affix-wrapper{border-radius:0;}:where(.css-1me4733).ant-input-group.ant-input-group-compact .ant-input-group-wrapper:not(:last-child).ant-input-search>.ant-input-group>.ant-input-group-addon>.ant-input-search-button{border-radius:0;}:where(.css-1me4733).ant-input-group.ant-input-group-compact .ant-input-group-wrapper:not(:last-child).ant-input-search>.ant-input-group>.ant-input{border-start-start-radius:6px;border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:6px;}:where(.css-1me4733).ant-input-group-rtl{direction:rtl;}:where(.css-1me4733).ant-input-group-wrapper{display:inline-block;width:100%;text-align:start;vertical-align:top;}:where(.css-1me4733).ant-input-group-wrapper-rtl{direction:rtl;}:where(.css-1me4733).ant-input-group-wrapper-lg .ant-input-group-addon{border-radius:8px;}:where(.css-1me4733).ant-input-group-wrapper-sm .ant-input-group-addon{border-radius:4px;}:where(.css-1me4733).ant-input-group-wrapper-status-error .ant-input-group-addon{color:#ff4d4f;border-color:#ff4d4f;}:where(.css-1me4733).ant-input-group-wrapper-status-warning .ant-input-group-addon{color:#faad14;border-color:#faad14;}:where(.css-1me4733).ant-input-group-wrapper-disabled .ant-input-group-addon{color:rgba(0, 0, 0, 0.25);background-color:rgba(0, 0, 0, 0.04);border-color:#d9d9d9;box-shadow:none;cursor:not-allowed;opacity:1;}:where(.css-1me4733).ant-input-group-wrapper-disabled .ant-input-group-addon:hover{border-color:#d9d9d9;border-inline-end-width:1px;}:where(.css-1me4733).ant-input-search .ant-input:hover,:where(.css-1me4733).ant-input-search .ant-input:focus{border-color:#4096ff;}:where(.css-1me4733).ant-input-search .ant-input:hover +.ant-input-group-addon .ant-input-search-button:not(.ant-btn-primary),:where(.css-1me4733).ant-input-search .ant-input:focus +.ant-input-group-addon .ant-input-search-button:not(.ant-btn-primary){border-inline-start-color:#4096ff;}:where(.css-1me4733).ant-input-search .ant-input-affix-wrapper{border-radius:0;}:where(.css-1me4733).ant-input-search .ant-input-lg{line-height:1.4998;}:where(.css-1me4733).ant-input-search >.ant-input-group >.ant-input-group-addon:last-child{inset-inline-start:-1px;padding:0;border:0;}:where(.css-1me4733).ant-input-search >.ant-input-group >.ant-input-group-addon:last-child .ant-input-search-button{padding-top:0;padding-bottom:0;border-start-start-radius:0;border-start-end-radius:6px;border-end-end-radius:6px;border-end-start-radius:0;}:where(.css-1me4733).ant-input-search >.ant-input-group >.ant-input-group-addon:last-child .ant-input-search-button:not(.ant-btn-primary){color:rgba(0, 0, 0, 0.45);}:where(.css-1me4733).ant-input-search >.ant-input-group >.ant-input-group-addon:last-child .ant-input-search-button:not(.ant-btn-primary):hover{color:#4096ff;}:where(.css-1me4733).ant-input-search >.ant-input-group >.ant-input-group-addon:last-child .ant-input-search-button:not(.ant-btn-primary):active{color:#0958d9;}:where(.css-1me4733).ant-input-search >.ant-input-group >.ant-input-group-addon:last-child .ant-input-search-button:not(.ant-btn-primary).ant-btn-loading::before{inset-inline-start:0;inset-inline-end:0;inset-block-start:0;inset-block-end:0;}:where(.css-1me4733).ant-input-search .ant-input-search-button{height:32px;}:where(.css-1me4733).ant-input-search .ant-input-search-button:hover,:where(.css-1me4733).ant-input-search .ant-input-search-button:focus{z-index:1;}:where(.css-1me4733).ant-input-search-large .ant-input-search-button{height:40px;}:where(.css-1me4733).ant-input-search-small .ant-input-search-button{height:24px;}:where(.css-1me4733).ant-input-search-rtl{direction:rtl;}:where(.css-1me4733).ant-input-search.ant-input-compact-item:not(.ant-input-compact-last-item) .ant-input-group-addon .ant-input-search-button{margin-inline-end:-1px;border-radius:0;}:where(.css-1me4733).ant-input-search.ant-input-compact-item:not(.ant-input-compact-first-item) .ant-input,:where(.css-1me4733).ant-input-search.ant-input-compact-item:not(.ant-input-compact-first-item) .ant-input-affix-wrapper{border-radius:0;}:where(.css-1me4733).ant-input-search.ant-input-compact-item >.ant-input-group-addon .ant-input-search-button:hover,:where(.css-1me4733).ant-input-search.ant-input-compact-item >.ant-input:hover,:where(.css-1me4733).ant-input-search.ant-input-compact-item .ant-input-affix-wrapper:hover,:where(.css-1me4733).ant-input-search.ant-input-compact-item >.ant-input-group-addon .ant-input-search-button:focus,:where(.css-1me4733).ant-input-search.ant-input-compact-item >.ant-input:focus,:where(.css-1me4733).ant-input-search.ant-input-compact-item .ant-input-affix-wrapper:focus,:where(.css-1me4733).ant-input-search.ant-input-compact-item >.ant-input-group-addon .ant-input-search-button:active,:where(.css-1me4733).ant-input-search.ant-input-compact-item >.ant-input:active,:where(.css-1me4733).ant-input-search.ant-input-compact-item .ant-input-affix-wrapper:active{z-index:2;}:where(.css-1me4733).ant-input-search.ant-input-compact-item >.ant-input-affix-wrapper-focused{z-index:2;}:where(.css-1me4733).ant-input-compact-item:not(.ant-input-compact-last-item){margin-inline-end:-1px;}:where(.css-1me4733).ant-input-compact-item:hover,:where(.css-1me4733).ant-input-compact-item:focus,:where(.css-1me4733).ant-input-compact-item:active{z-index:2;}:where(.css-1me4733).ant-input-compact-item[disabled]{z-index:0;}:where(.css-1me4733).ant-input-compact-item:not(.ant-input-compact-first-item):not(.ant-input-compact-last-item){border-radius:0;}:where(.css-1me4733).ant-input-compact-item:not(.ant-input-compact-last-item).ant-input-compact-first-item,:where(.css-1me4733).ant-input-compact-item:not(.ant-input-compact-last-item).ant-input-compact-first-item.ant-input-sm,:where(.css-1me4733).ant-input-compact-item:not(.ant-input-compact-last-item).ant-input-compact-first-item.ant-input-lg{border-start-end-radius:0;border-end-end-radius:0;}:where(.css-1me4733).ant-input-compact-item:not(.ant-input-compact-first-item).ant-input-compact-last-item,:where(.css-1me4733).ant-input-compact-item:not(.ant-input-compact-first-item).ant-input-compact-last-item.ant-input-sm,:where(.css-1me4733).ant-input-compact-item:not(.ant-input-compact-first-item).ant-input-compact-last-item.ant-input-lg{border-start-start-radius:0;border-end-start-radius:0;}</style></style></head><body><form method='post' name='feedback'><input type='hidden' name='form-name' value='feedback' /><input type="hidden" name="email"/><input type="hidden" name="userId"/><input type="hidden" name="content"/><input type="hidden" name="additional"/></form><div id="__next"><div class="dev-docs-loading"><div class="page-root api-reference-page-root"><div class="header-root"><div class="header-logo-row"><div class="flex"><div class="header-logo"><a href="/"><img alt="Paddle Logo" width="121" height="24" decoding="async" data-nimg="1" style="color:transparent" src="/logo.svg"/></a></div><div class="header-version"><div class="ant-space css-1me4733 ant-space-horizontal ant-space-align-center ant-dropdown-trigger version-dropdown-root"><div class="ant-space-item" style="margin-right:6px"><span class="version-dropdown-value">Paddle Billing</span></div><div class="ant-space-item"><svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9C5.81948 9 5.64949 8.91664 5.54118 8.775L1.33572 3.27556C1.24946 3.16276 1.3299 3 1.4719 3H2.38939C2.49618 3 2.59688 3.04976 2.66175 3.13459L6 7.5L9.33825 3.13459C9.40312 3.04976 9.50381 3 9.6106 3H10.5281C10.6701 3 10.7505 3.16276 10.6643 3.27556L6.45882 8.775C6.35051 8.91664 6.18052 9 6 9Z" fill="url(#paint0_linear_1591_26927)"></path><defs><linearGradient id="paint0_linear_1591_26927" x1="10.875" y1="3" x2="0.81973" y2="3.56475" gradientUnits="userSpaceOnUse"><stop stop-color="#C5ECFE"></stop><stop offset="1" stop-color="#E5D6E3"></stop></linearGradient></defs></svg></div></div></div></div><div class="flex"><div class="ant-space css-1me4733 ant-space-horizontal ant-space-align-center"><div class="ant-space-item" style="margin-right:20px"><div class="search-root" aria-label="Search"><div class="search-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.4982 13.7915L10.7221 10.0155C11.6295 8.92614 12.0819 7.52894 11.9854 6.11452C11.8888 4.7001 11.2507 3.37735 10.2037 2.42145C9.15672 1.46554 7.78152 0.950081 6.36417 0.982289C4.94682 1.0145 3.59645 1.5919 2.59398 2.59437C1.5915 3.59685 1.0141 4.94722 0.981892 6.36457C0.949684 7.78191 1.46515 9.15712 2.42105 10.2041C3.37695 11.2511 4.6997 11.8892 6.11412 11.9858C7.52855 12.0823 8.92575 11.6299 10.0151 10.7225L13.7911 14.4986L14.4982 13.7915ZM1.99817 6.49856C1.99817 5.60855 2.26209 4.73852 2.75655 3.9985C3.25102 3.25847 3.95382 2.6817 4.77609 2.3411C5.59836 2.00051 6.50316 1.91139 7.37607 2.08503C8.24899 2.25866 9.05081 2.68724 9.68015 3.31658C10.3095 3.94592 10.7381 4.74774 10.9117 5.62066C11.0853 6.49357 10.9962 7.39837 10.6556 8.22064C10.315 9.0429 9.73825 9.74571 8.99823 10.2402C8.25821 10.7346 7.38818 10.9986 6.49817 10.9986C5.3051 10.9972 4.16127 10.5227 3.31765 9.67908C2.47402 8.83545 1.99949 7.69163 1.99817 6.49856Z"></path><defs><linearGradient id="gradient" x1="14.4982" y1="0.980861" x2="0.529942" y2="1.46365" gradientUnits="userSpaceOnUse"><stop stop-color="#C5ECFE"></stop><stop offset="1" stop-color="#E5D6E3"></stop></linearGradient></defs></svg></div><div class="search-text">Search</div></div></div><div class="ant-space-item" style="margin-right:20px"><div class="header-cta-button"><button type="button" class="ant-btn css-1me4733 ant-btn-default dev-docs-button dev-docs-button-dark"><span>Feedback</span></button></div></div><div class="ant-space-item"><div class="header-cta-button"><button type="button" class="ant-btn css-1me4733 ant-btn-primary dev-docs-button dev-docs-button-dark"><a target="" class="header-cta-button-text" href="https://sandbox-vendors.paddle.com" rel="noreferrer">Login</a></button></div></div></div></div></div></div><div class="navigation-root"><a class="navigation-item" href="/"><div class="ant-space css-1me4733 ant-space-horizontal ant-space-align-center"><div class="ant-space-item" style="margin-right:22px"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.3788 1.38237C10.2678 1.2958 10.1312 1.24878 9.99044 1.24878C9.84972 1.24878 9.71303 1.2958 9.60209 1.38237L0.621094 8.38587L1.39778 9.36818L2.49609 8.5118V16.2487C2.49677 16.5801 2.62868 16.8976 2.86296 17.1319C3.09723 17.3661 3.41478 17.4981 3.74609 17.4987H16.2461C16.5774 17.4981 16.895 17.3662 17.1293 17.1319C17.3636 16.8977 17.4955 16.5801 17.4961 16.2487V8.51749L18.5944 9.37374L19.3711 8.39137L10.3788 1.38237ZM11.2461 16.2487H8.74609V11.2487H11.2461V16.2487ZM12.4961 16.2487V11.2487C12.4957 10.9173 12.3639 10.5996 12.1296 10.3653C11.8952 10.1309 11.5775 9.99912 11.2461 9.99874H8.74609C8.41468 9.99907 8.09693 10.1309 7.86258 10.3652C7.62823 10.5996 7.49643 10.9173 7.49609 11.2487V16.2487H3.74609V7.53718L9.99609 2.66843L16.2461 7.54374V16.2487H12.4961Z"></path><defs><linearGradient id="linear_gradient" x1="19.3711" y1="1.24877" x2="0.00383932" y2="2.02115" gradientUnits="userSpaceOnUse"><stop stop-color="#C5ECFE"></stop><stop offset="1" stop-color="#E5D6E3"></stop></linearGradient></defs></svg></div><div class="ant-space-item">Home</div></div></a><a class="navigation-item" href="/concepts/overview"><div class="ant-space css-1me4733 ant-space-horizontal ant-space-align-center"><div class="ant-space-item" style="margin-right:22px"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.2578 6.25146H11.8828V7.50147H16.2578V6.25146Z"></path><path d="M16.2578 9.37341H11.8828V10.6234H16.2578V9.37341Z"></path><path d="M16.2578 12.4991H11.8828V13.7491H16.2578V12.4991Z"></path><path d="M17.5068 3.12573H2.50684C2.17542 3.12606 1.85767 3.25787 1.62332 3.49221C1.38897 3.72656 1.25717 4.04431 1.25684 4.37573V15.6257C1.25722 15.9571 1.38903 16.2749 1.62337 16.5092C1.85771 16.7435 2.17543 16.8754 2.50684 16.8757H17.5068C17.8382 16.8753 18.1559 16.7434 18.3902 16.5091C18.6245 16.2748 18.7564 15.9571 18.7568 15.6257V4.37573C18.7565 4.04433 18.6246 3.72661 18.3903 3.49227C18.156 3.25793 17.8382 3.12611 17.5068 3.12573ZM2.50684 4.37573H9.38184V15.6257H2.50684V4.37573ZM10.6318 15.6257V4.37573H17.5068L17.5081 15.6257H10.6318Z"></path><defs><linearGradient id="linear_gradient" x1="16.2578" y1="6.25146" x2="11.7969" y2="6.79111" gradientUnits="userSpaceOnUse"><stop stop-color="#C5ECFE"></stop><stop offset="1" stop-color="#E5D6E3"></stop></linearGradient></defs></svg></div><div class="ant-space-item">Concepts</div></div></a><a class="navigation-item navigation-item-active" href="/build/overview"><div class="ant-space css-1me4733 ant-space-horizontal ant-space-align-center"><div class="ant-space-item" style="margin-right:22px"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.428 11.9516L14.8071 10.0016L18.428 8.05164C18.5273 7.99812 18.6103 7.91872 18.6682 7.82184C18.726 7.72497 18.7566 7.61425 18.7566 7.50142C18.7566 7.38859 18.726 7.27787 18.6682 7.181C18.6103 7.08413 18.5273 7.00472 18.428 6.9512L10.303 2.5762C10.212 2.52707 10.1101 2.50134 10.0067 2.50134C9.90325 2.50134 9.80142 2.52707 9.71038 2.5762L1.58538 6.9512C1.48606 7.00472 1.40307 7.08413 1.34522 7.181C1.28738 7.27787 1.25684 7.38859 1.25684 7.50142C1.25684 7.61425 1.28738 7.72497 1.34522 7.82184C1.40307 7.91872 1.48606 7.99812 1.58538 8.05164L5.20626 10.0016L1.58538 11.9516C1.48606 12.0052 1.40307 12.0846 1.34522 12.1814C1.28738 12.2783 1.25684 12.389 1.25684 12.5019C1.25684 12.6147 1.28738 12.7254 1.34522 12.8223C1.40307 12.9192 1.48606 12.9986 1.58538 13.0521L9.71038 17.4271C9.80144 17.4761 9.90326 17.5018 10.0067 17.5018C10.1101 17.5018 10.2119 17.4761 10.303 17.4271L18.428 13.0521C18.5273 12.9986 18.6103 12.9192 18.6682 12.8223C18.726 12.7254 18.7566 12.6147 18.7566 12.5019C18.7566 12.389 18.726 12.2783 18.6682 12.1814C18.6103 12.0846 18.5273 12.0052 18.428 11.9516ZM10.0067 3.83658L16.8133 7.50164L10.0067 11.1668L3.20007 7.50164L10.0067 3.83658ZM10.0067 16.1668L3.20007 12.5016L6.52463 10.7115L9.71038 12.4266C9.80144 12.4757 9.90326 12.5014 10.0067 12.5014C10.1101 12.5014 10.2119 12.4757 10.303 12.4266L13.4888 10.7113L16.8133 12.5016L10.0067 16.1668Z"></path><defs><linearGradient id="linear_gradient" x1="18.7566" y1="2.50134" x2="0.681379" y2="3.23016" gradientUnits="userSpaceOnUse"><stop stop-color="#C5ECFE"></stop><stop offset="1" stop-color="#E5D6E3"></stop></linearGradient></defs></svg></div><div class="ant-space-item">Build</div></div></a><a class="navigation-item" href="/errors/overview"><div class="ant-space css-1me4733 ant-space-horizontal ant-space-align-center"><div class="ant-space-item" style="margin-right:22px"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.25684 9.99878C1.25684 11.7294 1.77001 13.4211 2.73148 14.86C3.69294 16.2989 5.0595 17.4205 6.65836 18.0827C8.25721 18.745 10.0165 18.9183 11.7139 18.5807C13.4112 18.243 14.9703 17.4097 16.194 16.186C17.4177 14.9623 18.2511 13.4032 18.5887 11.7058C18.9263 10.0085 18.753 8.24915 18.0908 6.6503C17.4285 5.05145 16.307 3.68488 14.8681 2.72342C13.4291 1.76196 11.7374 1.24878 10.0068 1.24878C7.68619 1.24878 5.46059 2.17065 3.81965 3.81159C2.17871 5.45254 1.25684 7.67813 1.25684 9.99878ZM15.7256 14.8425L5.16309 4.28003C6.60098 3.08315 8.43429 2.46689 10.3032 2.55219C12.1721 2.6375 13.9416 3.4182 15.2645 4.74109C16.5874 6.06398 17.3681 7.83352 17.4534 9.70242C17.5387 11.5713 16.9225 13.4046 15.7256 14.8425ZM5.15684 15.7238C3.64329 14.4385 2.70121 12.6054 2.53719 10.6265C2.37316 8.64766 3.00057 6.6845 4.28184 5.16753L14.8381 15.7238C13.4845 16.8675 11.7696 17.495 9.99746 17.495C8.22533 17.495 6.51044 16.8675 5.15684 15.7238Z"></path><defs><linearGradient id="linear_gradient" x1="18.7568" y1="1.24877" x2="0.673585" y2="1.87379" gradientUnits="userSpaceOnUse"><stop stop-color="#C5ECFE"></stop><stop offset="1" stop-color="#E5D6E3"></stop></linearGradient></defs></svg></div><div class="ant-space-item">Errors</div></div></a><a class="navigation-item" href="/webhooks/overview"><div class="ant-space css-1me4733 ant-space-horizontal ant-space-align-center"><div class="ant-space-item" style="margin-right:22px"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.99922 1.59998C7.79469 1.59998 5.99922 3.39544 5.99922 5.59998C5.99922 6.91611 6.65228 8.07094 7.63672 8.79998L5.66172 12.0625C5.64545 12.0576 5.62821 12.0544 5.61172 12.05C5.19972 11.9388 4.76962 11.9993 4.39922 12.2125C3.63522 12.6541 3.37052 13.6364 3.81172 14.4C4.10772 14.9124 4.64562 15.2 5.19922 15.2C5.47042 15.2 5.74842 15.1323 5.99922 14.9875C6.36922 14.7739 6.63882 14.4253 6.74922 14.0125C6.86002 13.5997 6.80032 13.17 6.58672 12.8C6.51956 12.6836 6.42792 12.5815 6.33672 12.4875L8.51172 8.91248L8.72422 8.56248L8.37422 8.36248C7.43249 7.80575 6.79922 6.77682 6.79922 5.59998C6.79922 3.82771 8.22695 2.39998 9.99922 2.39998C11.7715 2.39998 13.1992 3.82771 13.1992 5.59998C13.1992 5.92946 13.1537 6.2396 13.0617 6.53748L13.8242 6.77498C13.9395 6.40165 13.9992 6.00969 13.9992 5.59998C13.9992 3.39544 12.2038 1.59998 9.99922 1.59998ZM9.99922 3.99998C9.11682 3.99998 8.39922 4.71758 8.39922 5.59998C8.39922 6.48238 9.11682 7.19998 9.99922 7.19998C10.1319 7.19998 10.2633 7.18056 10.3867 7.14998L12.3117 10.6375L12.4992 10.9875L12.8617 10.8C13.3197 10.5475 13.8381 10.4 14.3992 10.4C16.1715 10.4 17.5992 11.8277 17.5992 13.6C17.5992 15.3722 16.1715 16.8 14.3992 16.8C13.5347 16.8 12.7504 16.4548 12.1742 15.9L11.6242 16.475C12.3432 17.1673 13.3238 17.6 14.3992 17.6C16.6038 17.6 18.3992 15.8045 18.3992 13.6C18.3992 11.3954 16.6038 9.59998 14.3992 9.59998C13.8441 9.59998 13.3311 9.7447 12.8492 9.94998L11.0867 6.76248C11.3991 6.4703 11.5992 6.06057 11.5992 5.59998C11.5992 4.71758 10.8816 3.99998 9.99922 3.99998ZM4.22422 9.71248C2.48245 10.1461 1.19922 11.7293 1.19922 13.6C1.19922 15.8045 2.99469 17.6 5.19922 17.6C7.26191 17.6 8.91341 16.008 9.12422 14H12.8617C13.0398 14.6892 13.655 15.2 14.3992 15.2C15.2816 15.2 15.9992 14.4824 15.9992 13.6C15.9992 12.7176 15.2816 12 14.3992 12C13.655 12 13.0398 12.5107 12.8617 13.2H8.79922H8.39922V13.6C8.39922 15.3722 6.97149 16.8 5.19922 16.8C3.42695 16.8 1.99922 15.3722 1.99922 13.6C1.99922 12.0962 3.03319 10.8463 4.42422 10.5L4.22422 9.71248Z"></path><defs><linearGradient id="linear_gradient" x1="19.375" y1="3.75058" x2="0.0289405" y2="4.75355" gradientUnits="userSpaceOnUse"><stop stop-color="#C5ECFE"></stop><stop offset="1" stop-color="#E5D6E3"></stop></linearGradient></defs></svg></div><div class="ant-space-item">Webhooks</div></div></a><a class="navigation-item" href="/api-reference/overview"><div class="ant-space css-1me4733 ant-space-horizontal ant-space-align-center"><div class="ant-space-item" style="margin-right:22px"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.76157 15.9273L11.0243 3.75058L12.2317 4.0741L8.96898 16.2508L7.76157 15.9273ZM0.625 9.99999L5 5.62499L5.88125 6.50624L2.39375 9.99999L5.88125 13.4937L5 14.375L0.625 9.99999ZM19.375 9.99999L15 14.375L14.1187 13.4937L17.6062 9.99999L14.1187 6.50624L15 5.62499L19.375 9.99999Z"></path><defs><linearGradient id="linear_gradient" x1="19.375" y1="3.75058" x2="0.0289405" y2="4.75355" gradientUnits="userSpaceOnUse"><stop stop-color="#C5ECFE"></stop><stop offset="1" stop-color="#E5D6E3"></stop></linearGradient></defs></svg></div><div class="ant-space-item">API Reference</div></div></a><a class="navigation-item" href="/paddlejs/overview"><div class="ant-space css-1me4733 ant-space-horizontal ant-space-align-center"><div class="ant-space-item" style="margin-right:22px"><svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.25 0H1.25C0.918581 0.000330923 0.600831 0.132133 0.366482 0.366482C0.132133 0.600831 0.000330923 0.918581 0 1.25V12.5C0.000380458 12.8314 0.132199 13.1491 0.366537 13.3835C0.600875 13.6178 0.918596 13.7496 1.25 13.75H16.25C16.5814 13.7496 16.8991 13.6177 17.1334 13.3834C17.3677 13.1491 17.4996 12.8314 17.5 12.5V1.25C17.4996 0.918596 17.3678 0.600875 17.1335 0.366537C16.8991 0.132199 16.5814 0.000380458 16.25 0ZM1.25 1.25H8.125V12.5H1.25V1.25ZM8.125 12.5V1.25H16.25L16.2513 12.5H8.125Z"></path><path d="M5.57463 9.88047C5.19063 9.88047 4.89196 9.82447 4.67863 9.71247V8.88047C4.91863 8.97647 5.16396 9.02447 5.41463 9.02447C5.98529 9.02447 6.27063 8.69914 6.27063 8.04847V4.08847H7.34263V8.07247C7.34263 8.67514 7.18529 9.12847 6.87063 9.43247C6.55596 9.73114 6.12396 9.88047 5.57463 9.88047ZM10.5375 9.88847C9.79083 9.88847 9.23083 9.72314 8.8575 9.39247C8.4895 9.0618 8.28417 8.60847 8.2415 8.03247H9.2655C9.30817 8.36847 9.42017 8.6298 9.6015 8.81647C9.78283 8.9978 10.0948 9.08847 10.5375 9.08847C10.8575 9.08847 11.1162 9.00847 11.3135 8.84847C11.5162 8.68314 11.6175 8.4698 11.6175 8.20847C11.6175 7.94181 11.5348 7.74714 11.3695 7.62447C11.2042 7.5018 10.8895 7.40314 10.4255 7.32847C9.71617 7.23247 9.2015 7.0618 8.8815 6.81647C8.56683 6.5658 8.4095 6.17914 8.4095 5.65647C8.4095 5.1818 8.5935 4.7898 8.9615 4.48047C9.3295 4.17114 9.8095 4.01647 10.4015 4.01647C11.0202 4.01647 11.5082 4.1578 11.8655 4.44047C12.2228 4.7178 12.4282 5.12847 12.4815 5.67247H11.5055C11.4522 5.3738 11.3375 5.1578 11.1615 5.02447C10.9855 4.8858 10.7322 4.81647 10.4015 4.81647C10.0868 4.81647 9.84417 4.8858 9.6735 5.02447C9.50283 5.1578 9.4175 5.33914 9.4175 5.56847C9.4175 5.8138 9.49483 5.9978 9.6495 6.12047C9.8095 6.24314 10.1268 6.33914 10.6015 6.40847C11.3108 6.50447 11.8282 6.6778 12.1535 6.92847C12.4788 7.1738 12.6415 7.57114 12.6415 8.12047C12.6415 8.62714 12.4468 9.04847 12.0575 9.38447C11.6682 9.72047 11.1615 9.88847 10.5375 9.88847Z"></path><defs><linearGradient id="linear_gradient" x1="19.375" y1="3.75058" x2="0.0289405" y2="4.75355" gradientUnits="userSpaceOnUse"><stop stop-color="#C5ECFE"></stop><stop offset="1" stop-color="#E5D6E3"></stop></linearGradient></defs></svg></div><div class="ant-space-item">Paddle.js</div></div></a><a class="navigation-item" href="/changelog/overview"><div class="ant-space css-1me4733 ant-space-horizontal ant-space-align-center"><div class="ant-space-item" style="margin-right:22px"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_1553_31004)"><path d="M10.998 16.6826C9.11318 17.1755 7.11586 16.9549 5.37408 16.0613C3.6201 15.1614 2.27042 13.6492 1.57366 11.8032C0.928404 10.0936 0.886638 8.2738 1.45286 6.5406C1.8727 5.25547 2.61801 4.09693 3.59736 3.18452L3.41672 4.68358L4.46923 4.81046L4.86744 1.50613L1.6046 1.12036L1.48011 2.17315L2.94268 2.34612C1.79936 3.38973 0.930408 4.72626 0.445217 6.21143C0.133909 7.16434 -0.0154694 8.1536 0.00126491 9.15179C0.0185969 10.1847 0.213925 11.2027 0.581904 12.1776C1.37169 14.2702 2.90176 15.9845 4.89022 17.0046C6.17543 17.6639 7.58347 17.9999 8.99956 17.9999C9.75872 17.9999 10.5203 17.9033 11.2663 17.7082L10.998 16.6826Z"></path><path d="M17.4544 12.0747C18.1915 10.0567 18.179 7.83669 17.4192 5.82361C16.5965 3.64365 14.9861 1.8896 12.8847 0.884556C10.7901 -0.117255 8.42345 -0.27377 6.2207 0.443908L6.54913 1.45187C8.49179 0.818919 10.5793 0.957118 12.4273 1.84094C14.281 2.72751 15.7015 4.27484 16.4274 6.19799C17.0975 7.97359 17.1086 9.93147 16.4586 11.711C15.9446 13.1181 15.045 14.3458 13.8778 15.2553L14.0743 13.6249L13.0218 13.498L12.6236 16.8024L15.8864 17.1882L16.0109 16.1354L14.6729 15.9771C15.9262 14.9586 16.8932 13.611 17.4544 12.0747Z"></path></g><path d="M7.81914 12.15L4.27539 8.60627L4.83215 8.04951L7.81914 11.0361L13.1686 5.68701L13.7254 6.24377L7.81914 12.15Z"></path><defs><linearGradient id="linear_gradient" x1="19.375" y1="3.75058" x2="0.0289405" y2="4.75355" gradientUnits="userSpaceOnUse"><stop stop-color="#C5ECFE"></stop><stop offset="1" stop-color="#E5D6E3"></stop></linearGradient><clipPath id="clip0_1553_31004"><rect width="18" height="18" fill="white"></rect></clipPath></defs></svg></div><div class="ant-space-item">Changelog</div></div></a><a class="navigation-item" href="/resources/overview"><div class="ant-space css-1me4733 ant-space-horizontal ant-space-align-center"><div class="ant-space-item" style="margin-right:22px"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.98934 1.38924L5.49687 2.84318V5.77257L7.98934 7.22651L10.4818 5.77257V2.84318L7.98934 1.38924ZM11.6818 2.15394L7.98934 0L4.29688 2.15394V6.46182L7.98934 8.61576L11.6818 6.46182V2.15394ZM12.3097 8.77206L9.81719 10.226V13.1554L12.3097 14.6093L14.8021 13.1554V10.226L12.3097 8.77206ZM16.0021 9.53675L12.3097 7.38281L8.61719 9.53675V13.8446L12.3097 15.9986L16.0021 13.8446V9.53675ZM1.2 10.226L3.69247 8.77206L6.18493 10.226V13.1554L3.69247 14.6093L1.2 13.1554V10.226ZM3.69247 7.38281L7.38493 9.53675V13.8446L3.69247 15.9986L0 13.8446V9.53675L3.69247 7.38281Z"></path><defs><linearGradient id="linear_gradient" x1="16.0021" y1="-5.17309e-06" x2="-0.53332" y2="0.571637" gradientUnits="userSpaceOnUse"><stop stop-color="#C5ECFE"></stop><stop offset="1" stop-color="#E5D6E3"></stop></linearGradient></defs></svg></div><div class="ant-space-item">SDKs and Tools</div></div></a><a class="navigation-item" href="/migrate/overview"><div class="ant-space css-1me4733 ant-space-horizontal ant-space-align-center"><div class="ant-space-item" style="margin-right:22px"><svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 1C0 0.447715 0.447715 0 1 0H15C15.5523 0 16 0.447715 16 1V3C16 3.55228 15.5523 4 15 4H8.59844V6.55586L9.57812 5.57617L10.4267 6.4247L8.00239 8.84896L5.57812 6.4247L6.42665 5.57617L7.39844 6.54796V4H1C0.447715 4 0 3.55228 0 3V1ZM1.2 2.8V1.2H3.39844V2.8H1.2ZM4.59844 2.8H14.8V1.2H4.59844L4.59844 2.8ZM1 10C0.447715 10 0 10.4477 0 11V13C0 13.5523 0.447715 14 1 14H15C15.5523 14 16 13.5523 16 13V11C16 10.4477 15.5523 10 15 10H1ZM1.2 11.2V12.8H11.3984V11.2H1.2ZM14.8 12.8H12.5984V11.2H14.8V12.8Z"></path><defs><linearGradient id="linear_gradient" x1="16" y1="-4.52686e-06" x2="-0.527221" y2="0.652831" gradientUnits="userSpaceOnUse"><stop stop-color="#C5ECFE"></stop><stop offset="1" stop-color="#E5D6E3"></stop></linearGradient></defs></svg></div><div class="ant-space-item">Migrate</div></div></a></div><div class="content-root"><div class="sidebar-root"><div class="sidebar-page-heading">Build</div><ul class="ant-menu ant-menu-root ant-menu-inline ant-menu-light sidebar-menu css-1me4733" role="menu" tabindex="0" data-menu-list="true"><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/overview">Overview</a></span></li><li role="presentation" class="ant-menu-item-group"><div role="presentation" class="ant-menu-item-group-title"><span href="/build/checklist-fake-slug">Setup guides</span></div><ul role="group" class="ant-menu-item-group-list"></ul></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/onboarding/set-up-checklist">Setup checklist</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/onboarding/go-live-checklist">Go-live checklist</a></span></li><li role="presentation" class="ant-menu-item-group"><div role="presentation" class="ant-menu-item-group-title"><span href="/build/products-build-fake-slug">Product catalog</span></div><ul role="group" class="ant-menu-item-group-list"></ul></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/products/create-products-prices">Create products and prices</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/products/offer-localized-pricing">Localize prices</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/products/offer-discounts-promotions-coupons">Run promotions and discounts</a></span></li><li role="presentation" class="ant-menu-item-group"><div role="presentation" class="ant-menu-item-group-title"><span href="/build/tutorials-fake-slug">Tutorials</span></div><ul role="group" class="ant-menu-item-group-list"></ul></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/checkout/build-pricing-page">Build a pricing page</a></span></li><li class="ant-menu-item ant-menu-item-selected ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/checkout/build-overlay-checkout">Build an overlay checkout</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/checkout/build-branded-inline-checkout">Build an inline checkout</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/nextjs-supabase-vercel-starter-kit">Build and deploy a Next.js app</a></span></li><li role="presentation" class="ant-menu-item-group"><div role="presentation" class="ant-menu-item-group-title"><span href="/build/checkout-fake-slug">Checkout</span></div><ul role="group" class="ant-menu-item-group-list"></ul></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/checkout/set-up-checkout-default-settings">Pass checkout settings</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/checkout/pass-update-checkout-items">Pass or update checkout items</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/checkout/prefill-checkout-properties">Prefill checkout properties</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/checkout/handle-success-post-checkout">Handle checkout success</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/checkout/saved-payment-methods">Present saved payment methods</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/checkout/brand-customize-inline-checkout">Brand inline checkout</a></span></li><li role="presentation" class="ant-menu-item-group"><div role="presentation" class="ant-menu-item-group-title"><span href="/build/invoices-fake-slug">Invoices</span></div><ul role="group" class="ant-menu-item-group-list"></ul></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/invoices/create-issue-invoices">Create and issue an invoice</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/invoices/cancel-invoices">Cancel an invoice</a></span></li><li role="presentation" class="ant-menu-item-group"><div role="presentation" class="ant-menu-item-group-title"><span href="/build/transactions-fake-slug">Transactions</span></div><ul role="group" class="ant-menu-item-group-list"></ul></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/transactions/create-transaction">Create a transaction</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/transactions/default-payment-link">Set your default payment link</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/transactions/bill-create-custom-items-prices-products">Bill for non-catalog items</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/transactions/pass-transaction-checkout">Pass a transaction to a checkout</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/transactions/change-collection-mode-transaction">Change collection mode</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/transactions/create-transaction-adjustments">Refund or credit a transaction</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/transactions/custom-data">Work with custom data</a></span></li><li role="presentation" class="ant-menu-item-group"><div role="presentation" class="ant-menu-item-group-title"><span href="/build/subscriptions-fake-slug">Subscriptions</span></div><ul role="group" class="ant-menu-item-group-list"></ul></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/subscriptions/add-remove-products-prices-addons">Add or remove items</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/subscriptions/replace-products-prices-upgrade-downgrade">Upgrade or downgrade</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/subscriptions/bill-add-one-time-charge">Bill for one-time charges</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/subscriptions/change-billing-dates">Change billing dates</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/subscriptions/update-payment-details">Update payment details</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/subscriptions/pause-subscriptions">Pause a subscription</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/subscriptions/cancel-subscriptions">Cancel a subscription</a></span></li><li role="presentation" class="ant-menu-item-group"><div role="presentation" class="ant-menu-item-group-title"><span href="/build/provisioning">Provisioning</span></div><ul role="group" class="ant-menu-item-group-list"></ul></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/subscriptions/provision-access-webhooks">Provision your app</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/lifecycle/subscription-creation">Subscription creation</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/lifecycle/subscription-renewal">Subscription renewal</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/lifecycle/subscription-renewal-dunning">Subscription past due</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/lifecycle/subscription-pause-resume">Subscription pause or resume</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/lifecycle/subscription-cancellation">Subscription cancellation</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/lifecycle/payment-details-update">Payment details update</a></span></li><li role="presentation" class="ant-menu-item-group"><div role="presentation" class="ant-menu-item-group-title"><span href="/build/retain-fake-slug">Retain</span></div><ul role="group" class="ant-menu-item-group-list"></ul></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/retain/set-up-retain-profitwell">Set up Retain</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/retain/configure-payment-recovery-dunning">Configure payment recovery</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/retain/configure-cancellation-flows-surveys">Build cancellation surveys</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/retain/configure-term-optimization-automatic-upgrades">Proactively upgrade plans</a></span></li><li role="presentation" class="ant-menu-item-group"><div role="presentation" class="ant-menu-item-group-title"><span href="/build/trials-fake-slug">Trials</span></div><ul role="group" class="ant-menu-item-group-list"></ul></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/subscriptions/update-trials">Work with trials</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/subscriptions/extend-activate-change-date-trials">Extend or activate a trial</a></span></li><li role="presentation" class="ant-menu-item-group"><div role="presentation" class="ant-menu-item-group-title"><span href="/build/customers-fake-slug">Customers</span></div><ul role="group" class="ant-menu-item-group-list"></ul></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/customers/create-update-customers">Create or update a customer</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/customers/get-customer-credit-balances">Work with credit balances</a></span></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/customers/integrate-customer-portal">Get customer portal links</a></span></li><li role="presentation" class="ant-menu-item-group"><div role="presentation" class="ant-menu-item-group-title"><span href="/build/admin-fake-slug">Reporting</span></div><ul role="group" class="ant-menu-item-group-list"></ul></li><li class="ant-menu-item ant-menu-item-only-child" style="padding-left:20px" role="menuitem" tabindex="-1"><span class="ant-menu-title-content"><a href="/build/finance/generate-reports">Generate reports</a></span></li></ul><div style="display:none" aria-hidden="true"></div></div><div class="ant-spin-nested-loading page-contents-root css-1me4733"><div class="ant-spin-container"><div class="api-specs-root api-specs-markdown-root"><div class="markdown-content-root"><div class="markdown-content markdown-has-context-menu"><nav class="ant-breadcrumb dev-docs-breadcrumbs-root css-1me4733"><ol><li><span class="ant-breadcrumb-link">build</span></li><li class="ant-breadcrumb-separator" aria-hidden="true"><svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 5C7.5 5.15044 7.43053 5.29209 7.3125 5.38235L2.82149 8.81665C2.68989 8.91729 2.5 8.82345 2.5 8.65778L2.5 8.06531C2.5 7.94073 2.55805 7.82325 2.65702 7.74757L6.25 5L2.65702 2.25243C2.55805 2.17675 2.5 2.05927 2.5 1.93469L2.5 1.34222C2.5 1.17655 2.68989 1.08271 2.82149 1.18335L7.3125 4.61765C7.43053 4.70791 7.5 4.84956 7.5 5Z" fill="#0E1414" fill-opacity="0.6"></path></svg></li><li><span class="ant-breadcrumb-link">Build an overlay checkout</span></li></ol></nav><h1 class="dev-docs-headings "><a id="build-an-overlay-checkout" href="/build/checkout/build-overlay-checkout#build-an-overlay-checkout">Build an overlay checkout</a></h1><div class="dev-docs-page-summary"><p class="dev-docs-paragraph">Get a step-by-step overview of how to build a complete overlay checkout — including initializing Paddle.js, passing settings and items, prefilling customer information, and next steps.</p></div><p class="dev-docs-paragraph">The checkout is where customers make purchases. For SaaS businesses, it's the process where customers enter their details and payment information, and confirm that they'd like to sign up for a subscription with you.</p><p class="dev-docs-paragraph">You can use <a class="dev-docs-link" href="/paddlejs/overview">Paddle.js</a> to quickly add an overlay checkout into your app. <a class="dev-docs-link" href="/concepts/sell/overlay-checkout">Overlay checkout</a> lets you present customers with an overlay that handles all parts of the checkout process — minimal frontend coding required.</p><blockquote class="dev-docs-blockquote dev-docs-blockquote-neutral "><div class="dev-docs-blockquote-icon"><svg width="20" height="20" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.5 9.51735V11.4696C19.3052 11.4699 18.1222 11.7038 17.0186 12.1579C15.915 12.6119 14.9124 13.2773 14.0682 14.116C13.2239 14.9546 12.5546 15.9501 12.0985 17.0455C11.6423 18.141 11.4082 19.3148 11.4097 20.5H9.59031C9.58973 18.1086 8.63182 15.8154 6.92718 14.1244C5.22254 12.4334 2.91072 11.4832 0.5 11.4826V9.53037C1.69478 9.53008 2.87779 9.29621 3.98141 8.84214C5.08502 8.38806 6.08759 7.72267 6.93182 6.88401C7.77605 6.04535 8.44538 5.04986 8.90154 3.95445C9.3577 2.85904 9.59175 1.68519 9.59031 0.5H11.4097C11.4103 2.89137 12.3682 5.18464 14.0728 6.8756C15.7775 8.56655 18.0893 9.51678 20.5 9.51735Z" fill="currentColor"></path></svg></div><div class="dev-docs-blockquote-content"><div class="dev-docs-blockquote-content-message"><h4 class="dev-docs-headings "><a id="grab-the-code-and-test-using-codepen" href="/build/checkout/build-overlay-checkout#grab-the-code-and-test-using-codepen">Grab the code and test using CodePen<span class="dev-docs-heading-anchor"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></span></a></h4><p class="dev-docs-paragraph">CodePen is a platform for building and sharing frontend code. Explore the code for this tutorial and test right away using our overlay checkout pen.</p><button type="button" class="ant-btn css-1me4733 ant-btn-default dev-docs-button dev-docs-markdown-button dev-docs-button-light"><a href="https://codepen.io/heymcgovern/pen/wvZMmGq" target="_blank" rel="noreferrer" class="dev-docs-link dev-docs-external-link">View on Codepen</a></button></div></div></blockquote><h2 class="dev-docs-headings "><a id="objectives" href="/build/checkout/build-overlay-checkout#objectives">What are we building? <span class="dev-docs-heading-anchor"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></span></a></h2><p class="dev-docs-paragraph">In this tutorial, we'll launch a multi-page overlay checkout for two items in our product catalog, then we'll extend it by passing customer information.</p><p class="dev-docs-paragraph"><img src="/assets/images/checkout-overlay-checkout-hero-20230831.svg" alt="Illustration of an overlay checkout. The payment method form is open, with buttons for Apple Pay and PayPal along with the card details form underneath. The items list shows one item for 'Professional plan', with tax and totals underneath. The total overall is $3600, displayed at the top-left of the checkout." class="dev-docs-images"/></p><p class="dev-docs-paragraph">We'll learn how to:</p><ul class="dev-docs-list dev-docs-un-ordered-list"><li class="dev-docs-list-item"><div>Include and set up Paddle.js using a client-side token</div></li><li class="dev-docs-list-item"><div>Pass items to overlay checkout using <code role="code" class="dev-docs-inline-code">Paddle.Checkout.open()</code> or HTML data attributes</div></li><li class="dev-docs-list-item"><div>Take a test payment</div></li><li class="dev-docs-list-item"><div>Prefill customer information using <code role="code" class="dev-docs-inline-code">Paddle.Checkout.open()</code> or HTML data attributes</div></li></ul><p class="dev-docs-paragraph">If you like, you can copy-paste the sample code in your editor or <a href="https://codepen.io/heymcgovern/pen/wvZMmGq" target="_blank" rel="noreferrer" class="dev-docs-link dev-docs-external-link">view on CodePen</a> and follow along.</p><div class="ant-collapse ant-collapse-icon-position-end ant-collapse-ghost dev-docs-accordion css-1me4733" role="tablist"><div class="ant-collapse-item"><div class="ant-collapse-header" aria-expanded="false" aria-disabled="false" role="tab" tabindex="0"><div class="ant-collapse-expand-icon"><span role="img" aria-label="plus" class="anticon anticon-plus ant-collapse-arrow"><svg viewBox="64 64 896 896" focusable="false" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span></div><span class="ant-collapse-header-text"><div><div>Sample code</div></div></span></div><div class="ant-collapse-content ant-collapse-content-inactive" style="display:none" role="tabpanel"><div class="ant-collapse-content-box"><section><div class="skip-search code-viewer-root code-viewer-theme-dark dev-docs-code-block code-viewer-root-has-line-numbers"><div class="code-viewer-title"><span><div class="ant-space css-1me4733 ant-space-horizontal ant-space-align-start"><div class="ant-space-item" style="margin-right:11px"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="code-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.79043 12.7404L7.18024 2.99902L6.21431 3.25784L8.8245 12.9992L9.79043 12.7404ZM15.5 7.99844L12 4.49844L11.295 5.20344L14.085 7.99844L11.295 10.7934L12 11.4984L15.5 7.99844ZM0.499493 7.99844L3.99949 11.4984L4.70449 10.7934L1.91449 7.99844L4.70449 5.20344L3.99949 4.49844L0.499493 7.99844Z" fill="currentColor"></path></svg></div><div class="ant-space-item"><span class="code-viewer-title-text"></span></div></div></span><button class="code-viewer-title-copy"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></button></div><pre class="prismjs" style="margin:0"><code class="code-viewer-code-tag"><div class="code-viewer-snippet"><div class="code-viewer-snippet-line-numbers-root"><div class="code-viewer-snippet-line-numbers">1</div><div class="code-viewer-snippet-line-numbers">2</div><div class="code-viewer-snippet-line-numbers">3</div><div class="code-viewer-snippet-line-numbers">4</div><div class="code-viewer-snippet-line-numbers">5</div><div class="code-viewer-snippet-line-numbers">6</div><div class="code-viewer-snippet-line-numbers">7</div><div class="code-viewer-snippet-line-numbers">8</div><div class="code-viewer-snippet-line-numbers">9</div><div class="code-viewer-snippet-line-numbers">10</div><div class="code-viewer-snippet-line-numbers">11</div><div class="code-viewer-snippet-line-numbers">12</div><div class="code-viewer-snippet-line-numbers">13</div><div class="code-viewer-snippet-line-numbers">14</div><div class="code-viewer-snippet-line-numbers">15</div><div class="code-viewer-snippet-line-numbers">16</div><div class="code-viewer-snippet-line-numbers">17</div><div class="code-viewer-snippet-line-numbers">18</div><div class="code-viewer-snippet-line-numbers">19</div><div class="code-viewer-snippet-line-numbers">20</div></div><div class="code-viewer-snippet-lines"><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:3.25em;padding-right:1em;text-align:right;user-select:none">1</span><span class="token doctype punctuation"><!</span><span class="token doctype doctype-tag">DOCTYPE</span><span class="token doctype"> </span><span class="token doctype name">html</span><span class="token doctype punctuation">></span><span class=""> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:3.25em;padding-right:1em;text-align:right;user-select:none">2</span><span class=""></span><span class="token tag punctuation"><</span><span class="token tag">html</span><span class="token tag"> </span><span class="token tag attr-name">lang</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">en</span><span class="token tag attr-value punctuation">"</span><span class="token tag"> </span><span class="token tag attr-name">color-mode</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">user</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">></span><span class=""> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:3.25em;padding-right:1em;text-align:right;user-select:none">3</span><span class=""></span><span class="token tag punctuation"><</span><span class="token tag">head</span><span class="token tag punctuation">></span><span class=""> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:3.25em;padding-right:1em;text-align:right;user-select:none">4</span><span class=""> </span><span class="token tag punctuation"><</span><span class="token tag">title</span><span class="token tag punctuation">></span><span class="">Overlay checkout demo</span><span class="token tag punctuation"></</span><span class="token tag">title</span><span class="token tag punctuation">></span><span class=""> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:3.25em;padding-right:1em;text-align:right;user-select:none">5</span><span class=""> </span><span class="token tag punctuation"><</span><span class="token tag">meta</span><span class="token tag"> </span><span class="token tag attr-name">charset</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">utf-8</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">></span><span class=""> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:3.25em;padding-right:1em;text-align:right;user-select:none">6</span><span class=""> </span><span class="token tag punctuation"><</span><span class="token tag">meta</span><span class="token tag"> </span><span class="token tag attr-name">name</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">viewport</span><span class="token tag attr-value punctuation">"</span><span class="token tag"> </span><span class="token tag attr-name">content</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">width=device-width, initial-scale=1</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">></span><span class=""> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:3.25em;padding-right:1em;text-align:right;user-select:none">7</span><span class=""> </span><span class="token tag punctuation"><</span><span class="token tag">script</span><span class="token tag"> </span><span class="token tag attr-name">src</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">https://cdn.paddle.com/paddle/v2/paddle.js</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">></span><span class="token tag punctuation"></</span><span class="token tag">script</span><span class="token tag punctuation">></span><span class=""> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:3.25em;padding-right:1em;text-align:right;user-select:none">8</span><span class=""> </span><span class="token tag punctuation"><</span><span class="token tag">style</span><span class="token tag punctuation">></span><span class="token style language-css"> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:3.25em;padding-right:1em;text-align:right;user-select:none">9</span><span class="token style language-css"> </span><span class="token style language-css selector class">.page-container</span><span class="token style language-css"> </span><span class="token style language-css punctuation">{</span><span class="token style language-css"> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:3.25em;padding-right:1em;text-align:right;user-select:none">10</span><span class="token style language-css"> </span><span class="token style language-css property">max-width</span><span class="token style language-css punctuation">:</span><span class="token style language-css"> </span><span class="token style language-css number">900</span><span class="token style language-css unit">px</span><span class="token style language-css punctuation">;</span><span class="token style language-css"> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:3.25em;padding-right:1em;text-align:right;user-select:none">11</span><span class="token style language-css"> </span><span class="token style language-css property">margin</span><span class="token style language-css punctuation">:</span><span class="token style language-css"> auto</span><span class="token style language-css punctuation">;</span><span class="token style language-css"> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:3.25em;padding-right:1em;text-align:right;user-select:none">12</span><span class="token style language-css"> </span><span class="token style language-css property">text-align</span><span class="token style language-css punctuation">:</span><span class="token style language-css"> center</span><span class="token style language-css punctuation">;</span><span class="token style language-css"> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:3.25em;padding-right:1em;text-align:right;user-select:none">13</span><span class="token style language-css"> </span><span class="token style language-css property">margin-top</span><span class="token style language-css punctuation">:</span><span class="token style language-css"> </span><span class="token style language-css number">2</span><span class="token style language-css unit">em</span><span class="token style language-css punctuation">;</span><span class="token style language-css"> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:3.25em;padding-right:1em;text-align:right;user-select:none">14</span><span class="token style language-css"> </span><span class="token style language-css property">padding-left</span><span class="token style language-css punctuation">:</span><span class="token style language-css"> </span><span class="token style language-css number">1</span><span class="token style language-css unit">em</span><span class="token style language-css punctuation">;</span><span class="token style language-css"> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:3.25em;padding-right:1em;text-align:right;user-select:none">15</span><span class="token style language-css"> </span><span class="token style language-css property">padding-right</span><span class="token style language-css punctuation">:</span><span class="token style language-css"> </span><span class="token style language-css number">1</span><span class="token style language-css unit">em</span><span class="token style language-css punctuation">;</span><span class="token style language-css"> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:3.25em;padding-right:1em;text-align:right;user-select:none">16</span><span class="token style language-css"> </span><span class="token style language-css punctuation">}</span><span class="token style language-css"> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:3.25em;padding-right:1em;text-align:right;user-select:none">17</span><span class="token style language-css"> </span><span class="token style language-css selector class">.grid</span><span class="token style language-css"> </span><span class="token style language-css punctuation">{</span><span class="token style language-css"> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:3.25em;padding-right:1em;text-align:right;user-select:none">18</span><span class="token style language-css"> </span><span class="token style language-css property">display</span><span class="token style language-css punctuation">:</span><span class="token style language-css"> block</span><span class="token style language-css punctuation">;</span><span class="token style language-css"> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:3.25em;padding-right:1em;text-align:right;user-select:none">19</span><span class="token style language-css"> </span><span class="token style language-css property">margin-bottom</span><span class="token style language-css punctuation">:</span><span class="token style language-css"> </span><span class="token style language-css number">1</span><span class="token style language-css unit">em</span><span class="token style language-css punctuation">;</span><span class="token style language-css"> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:3.25em;padding-right:1em;text-align:right;user-select:none">20</span><span class="token style language-css"> </span><span class="token style language-css punctuation">}</span><span class="token style language-css"> </span></span></div></div><div class="code-viewer-toggle-root code-viewer-inverted-icon code-viewer-toggle-bottom"><span class="code-viewer-toggle-icon" data-testid="show-all-lines-at-bottom"><svg width="17" height="24" viewBox="0 0 17 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.02531 7.705L7.82031 3.915V14H8.82031V3.915L12.6153 7.705L13.3203 7L8.32031 2L3.32031 7L4.02531 7.705Z" fill="currentColor"></path><path d="M1.68 20.64C1.19467 20.64 0.793334 20.7987 0.476 21.116C0.158667 21.4333 0 21.8347 0 22.32C0 22.8147 0.158667 23.216 0.476 23.524C0.793334 23.8413 1.19467 24 1.68 24C2.17467 24 2.576 23.8413 2.884 23.524C3.20133 23.216 3.36 22.8147 3.36 22.32C3.36 21.8347 3.20133 21.4333 2.884 21.116C2.576 20.7987 2.17467 20.64 1.68 20.64Z" fill="currentColor"></path><path d="M8.39437 20.6396C7.90904 20.6396 7.50771 20.7982 7.19038 21.1156C6.87305 21.4329 6.71438 21.8342 6.71438 22.3196C6.71438 22.8142 6.87305 23.2156 7.19038 23.5236C7.50771 23.8409 7.90904 23.9996 8.39437 23.9996C8.88904 23.9996 9.29037 23.8409 9.59837 23.5236C9.91571 23.2156 10.0744 22.8142 10.0744 22.3196C10.0744 21.8342 9.91571 21.4329 9.59837 21.1156C9.29037 20.7982 8.88904 20.6396 8.39437 20.6396Z" fill="currentColor"></path><path d="M15.1089 20.6396C14.6236 20.6396 14.2222 20.7982 13.9049 21.1156C13.5876 21.4329 13.4289 21.8342 13.4289 22.3196C13.4289 22.8142 13.5876 23.2156 13.9049 23.5236C14.2222 23.8409 14.6236 23.9996 15.1089 23.9996C15.6036 23.9996 16.0049 23.8409 16.3129 23.5236C16.6302 23.2156 16.7889 22.8142 16.7889 22.3196C16.7889 21.8342 16.6302 21.4329 16.3129 21.1156C16.0049 20.7982 15.6036 20.6396 15.1089 20.6396Z" fill="currentColor"></path></svg></span></div></code></pre></div></section></div></div></div></div><h2 class="dev-docs-headings "><a id="prerequisites" href="/build/checkout/build-overlay-checkout#prerequisites">Before you begin <span class="dev-docs-heading-anchor"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></span></a></h2><h3 class="dev-docs-headings "><a id="prerequisites-choose-implementation" href="/build/checkout/build-overlay-checkout#prerequisites-choose-implementation">Choose a type of checkout <span class="dev-docs-heading-anchor"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></span></a></h3><p class="dev-docs-paragraph">This tutorial walks through creating an <a class="dev-docs-link" href="/concepts/sell/overlay-checkout">overlay checkout</a>. You can also create <a class="dev-docs-link" href="/concepts/sell/branded-integrated-inline-checkout">inline checkouts</a>, which lets you build Paddle Checkout right into your app or website.</p><p class="dev-docs-paragraph">We recommend building an overlay checkout if you're new to Paddle. Inline checkouts use the same JavaScript methods as overlay checkouts, so you can switch to an inline checkout later.</p><div class="ant-collapse ant-collapse-icon-position-end ant-collapse-ghost dev-docs-accordion css-1me4733" role="tablist"><div class="ant-collapse-item"><div class="ant-collapse-header" aria-expanded="false" aria-disabled="false" role="tab" tabindex="0"><div class="ant-collapse-expand-icon"><span role="img" aria-label="plus" class="anticon anticon-plus ant-collapse-arrow"><svg viewBox="64 64 896 896" focusable="false" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span></div><span class="ant-collapse-header-text"><div><div>Types of checkout</div></div></span></div><div class="ant-collapse-content ant-collapse-content-inactive" style="display:none" role="tabpanel"><div class="ant-collapse-content-box"><div class="dev-docs-multi-column-layout-root"><div class="dev-docs-multi-column-layout-cell-root"><h4 class="dev-docs-headings "><a id="prerequisites-choose-implementation-overlay" href="/build/checkout/build-overlay-checkout#prerequisites-choose-implementation-overlay">Overlay checkout <span class="dev-docs-heading-anchor"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></span></a></h4><p class="dev-docs-paragraph">Integrate Paddle in just a few lines of code. Launches an overlay to capture payment.</p><p class="dev-docs-paragraph"><img src="/assets/images/checkout-overlay-checkout-overview-20230824.svg" alt="Illustration showing an overlay checkout. The items summary is simplified, showing gray boxes to illustrate items and totals. The right-hand side of the overlay checkout shows the payment form, with buttons for Apple Pay, PayPal, and the card details entry form." class="dev-docs-images"/></p></div><div class="dev-docs-multi-column-layout-cell-root"><h4 class="dev-docs-headings "><a id="prerequisites-choose-implementation-inline" href="/build/checkout/build-overlay-checkout#prerequisites-choose-implementation-inline">Inline checkout <span class="dev-docs-heading-anchor"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></span></a></h4><p class="dev-docs-paragraph">Get complete control of the checkout experience. Captures payment directly in your app.</p><p class="dev-docs-paragraph"><img src="/assets/images/checkout-inline-checkout-overview-20230824.svg" alt="Illustration showing an inline checkout. The inline checkout frame shows the payment form, and is in crop-marks on the left to show where it's been embedded. The items list is on the right with a total at the top." class="dev-docs-images"/></p></div></div><p class="dev-docs-paragraph">Learn more about the differences between overlay and inline checkouts: <a class="dev-docs-link" href="/concepts/sell/self-serve-checkout">Paddle Checkout</a></p></div></div></div></div><h3 class="dev-docs-headings "><a id="prerequisites-create-product-price" href="/build/checkout/build-overlay-checkout#prerequisites-create-product-price">Create products and prices <span class="dev-docs-heading-anchor"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></span></a></h3><p class="dev-docs-paragraph">Paddle Checkout works with products and prices to say what you're billing for, so you'll need to <a class="dev-docs-link" href="/build/checkout/build-branded-inline-checkout">create a product and at least one related price</a> to pass to your checkout.</p><h3 class="dev-docs-headings "><a id="prerequisites-default-payment-link" href="/build/checkout/build-overlay-checkout#prerequisites-default-payment-link">Set your default payment link <span class="dev-docs-heading-anchor"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></span></a></h3><p class="dev-docs-paragraph">You'll also need to:</p><ul class="dev-docs-list dev-docs-un-ordered-list"><li class="dev-docs-list-item"><div><a class="dev-docs-link" href="/build/transactions/default-payment-link">Set your default payment link</a> under <strong>Paddle > Checkout > Checkout settings > Default payment link</strong>.</div></li><li class="dev-docs-list-item"><div>Get your default payment link domain approved, if you're working with the live environment.</div></li></ul><blockquote class="dev-docs-blockquote dev-docs-blockquote-info "><div class="dev-docs-blockquote-icon"><span role="img" aria-label="notification" class="anticon anticon-notification"><svg viewBox="64 64 896 896" focusable="false" data-icon="notification" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.6c-3.7 11.6-5.6 23.9-5.6 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1z"></path></svg></span></div><div class="dev-docs-blockquote-content"><div class="dev-docs-blockquote-content-message"><p class="dev-docs-paragraph">We recommend starting the domain approval early in your integration process, so your domains are approved for when you're ready to go-live.</p></div></div></blockquote><h2 class="dev-docs-headings "><a id="#tutorial-steps" href="/build/checkout/build-overlay-checkout##tutorial-steps">Get started <span class="dev-docs-heading-anchor"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></span></a></h2><p class="dev-docs-paragraph">Add an overlay checkout to your website or app in four steps:</p><ol class="dev-docs-list dev-docs-ordered-list"><li class="dev-docs-list-item"><div><p class="dev-docs-paragraph"><a class="dev-docs-link" href="/build/checkout/build-overlay-checkout#include-paddle-js"><strong>Include and initialize Paddle.js</strong></a></p><p class="dev-docs-paragraph">Add Paddle.js to your app or website, so you can securely capture payment information and build subscription billing experiences.</p></div></li><li class="dev-docs-list-item"><div><p class="dev-docs-paragraph"><a class="dev-docs-link" href="/build/checkout/build-overlay-checkout#add-checkout-trigger"><strong>Add an overlay checkout button</strong></a></p><p class="dev-docs-paragraph">Set any element on your page as a trigger for Paddle Checkout.</p></div></li><li class="dev-docs-list-item"><div><p class="dev-docs-paragraph"><a class="dev-docs-link" href="/build/checkout/build-overlay-checkout#test-payment"><strong>Take a test payment</strong></a></p><p class="dev-docs-paragraph">Make sure that your checkout loads successfully, then take a test payment.</p></div></li><li class="dev-docs-list-item"><div><p class="dev-docs-paragraph"><a class="dev-docs-link" href="/build/checkout/build-overlay-checkout#prefill-customer"><strong>Prefill customer information</strong> — optional</a></p><p class="dev-docs-paragraph">Extend your checkout by prefilling customer and address information.</p></div></li></ol><h2 class="dev-docs-headings "><a id="include-paddle-js" href="/build/checkout/build-overlay-checkout#include-paddle-js">1. Include and initialize Paddle.js <span class="dev-docs-heading-anchor"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></span></a></h2><p class="dev-docs-paragraph"><a class="dev-docs-link" href="/paddlejs/overview">Paddle.js</a> is a lightweight JavaScript library that lets you build rich, integrated subscription billing experiences using Paddle. We can use Paddle.js to securely work with products and prices in our Paddle system, as well as opening checkouts and capturing payment information.</p><h3 class="dev-docs-headings "><a id="include-paddle-js-embed-script" href="/build/checkout/build-overlay-checkout#include-paddle-js-embed-script">Include Paddle.js script <span class="dev-docs-heading-anchor"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></span></a></h3><p class="dev-docs-paragraph">Start with a blank webpage, or an existing page on your website. Then, <a class="dev-docs-link" href="/paddlejs/include-paddlejs">include Paddle.js</a> by adding this script to the <code role="code" class="dev-docs-inline-code"><head></code>:</p><div class="skip-search code-viewer-root code-viewer-theme-dark dev-docs-code-block"><div class="code-viewer-title"><span><div class="ant-space css-1me4733 ant-space-horizontal ant-space-align-start"><div class="ant-space-item" style="margin-right:11px"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="code-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.79043 12.7404L7.18024 2.99902L6.21431 3.25784L8.8245 12.9992L9.79043 12.7404ZM15.5 7.99844L12 4.49844L11.295 5.20344L14.085 7.99844L11.295 10.7934L12 11.4984L15.5 7.99844ZM0.499493 7.99844L3.99949 11.4984L4.70449 10.7934L1.91449 7.99844L4.70449 5.20344L3.99949 4.49844L0.499493 7.99844Z" fill="currentColor"></path></svg></div><div class="ant-space-item"><span class="code-viewer-title-text"></span></div></div></span><button class="code-viewer-title-copy"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></button></div><pre class="prismjs" style="margin:0"><code class="code-viewer-code-tag"><div class="code-viewer-snippet"><div class="code-viewer-snippet-lines"><span class=""><span class="token tag punctuation"><</span><span class="token tag">script</span><span class="token tag"> </span><span class="token tag attr-name">src</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">https://cdn.paddle.com/paddle/v2/paddle.js</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">></span><span class="token tag punctuation"></</span><span class="token tag">script</span><span class="token tag punctuation">></span></span></div></div></code></pre></div><h3 class="dev-docs-headings "><a id="include-paddle-js-environment" href="/build/checkout/build-overlay-checkout#include-paddle-js-environment">Set environment (optional) <span class="dev-docs-heading-anchor"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></span></a></h3><p class="dev-docs-paragraph">We recommend <a href="https://sandbox-login.paddle.com/signup?utm_source=dx&utm_medium=dev-docs" target="_blank" rel="noreferrer" class="dev-docs-link dev-docs-external-link">signing up for a sandbox account</a> to test and build your integration, then switching to a live account later when you're ready to go live.</p><p class="dev-docs-paragraph">If you're testing with the sandbox, call <a class="dev-docs-link" href="/paddlejs/methods/paddle-environment-set"><code role="code" class="dev-docs-inline-code">Paddle.Environment.set()</code></a> and set your environment to <code role="code" class="dev-docs-inline-code">sandbox</code>:</p><div class="skip-search code-viewer-root code-viewer-theme-dark dev-docs-code-block code-viewer-root-has-line-numbers"><div class="code-viewer-title"><span><div class="ant-space css-1me4733 ant-space-horizontal ant-space-align-start"><div class="ant-space-item" style="margin-right:11px"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="code-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.79043 12.7404L7.18024 2.99902L6.21431 3.25784L8.8245 12.9992L9.79043 12.7404ZM15.5 7.99844L12 4.49844L11.295 5.20344L14.085 7.99844L11.295 10.7934L12 11.4984L15.5 7.99844ZM0.499493 7.99844L3.99949 11.4984L4.70449 10.7934L1.91449 7.99844L4.70449 5.20344L3.99949 4.49844L0.499493 7.99844Z" fill="currentColor"></path></svg></div><div class="ant-space-item"><span class="code-viewer-title-text"></span></div></div></span><button class="code-viewer-title-copy"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></button></div><pre class="prismjs" style="margin:0"><code class="code-viewer-code-tag"><div class="code-viewer-snippet"><div class="code-viewer-snippet-line-numbers-root"><div class="code-viewer-snippet-line-numbers">1</div><div class="code-viewer-snippet-line-numbers">2</div><div class="code-viewer-snippet-line-numbers highlighted-line highlighted-line-number">3</div><div class="code-viewer-snippet-line-numbers">4</div></div><div class="code-viewer-snippet-lines"><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:1.25em;padding-right:1em;text-align:right;user-select:none">1</span><span class="token tag punctuation"><</span><span class="token tag">script</span><span class="token tag"> </span><span class="token tag attr-name">src</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">https://cdn.paddle.com/paddle/v2/paddle.js</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">></span><span class="token tag punctuation"></</span><span class="token tag">script</span><span class="token tag punctuation">></span><span class=""> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:1.25em;padding-right:1em;text-align:right;user-select:none">2</span><span class=""></span><span class="token tag punctuation"><</span><span class="token tag">script</span><span class="token tag"> </span><span class="token tag attr-name">type</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">text/javascript</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">></span><span class="token script language-javascript"> </span></span><span style="background:rgba(252, 252, 252, 0.1)" class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:1.25em;padding-right:1em;text-align:right;user-select:none">3</span><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">Paddle</span><span class="token script language-javascript punctuation">.</span><span class="token script language-javascript property-access maybe-class-name">Environment</span><span class="token script language-javascript punctuation">.</span><span class="token script language-javascript method function property-access">set</span><span class="token script language-javascript punctuation">(</span><span class="token script language-javascript string">"sandbox"</span><span class="token script language-javascript punctuation">)</span><span class="token script language-javascript punctuation">;</span><span class="token script language-javascript"> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:1.25em;padding-right:1em;text-align:right;user-select:none">4</span><span class="token script language-javascript"></span><span class="token tag punctuation"></</span><span class="token tag">script</span><span class="token tag punctuation">></span></span></div></div></code></pre></div><h3 class="dev-docs-headings "><a id="include-paddle-js-authenticate" href="/build/checkout/build-overlay-checkout#include-paddle-js-authenticate">Pass a client-side token <span class="dev-docs-heading-anchor"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></span></a></h3><p class="dev-docs-paragraph">Next, go to <strong>Paddle > Developer tools > Authentication</strong> and generate a client-side token. <a class="dev-docs-link" href="/api-reference/about/authentication#authentication-methods">Client-side tokens</a> let you interact with the Paddle platform in frontend code, like webpages or mobile apps. They have limited access to the data in your system, so they're safe to publish.</p><p class="dev-docs-paragraph">In your page, call <a class="dev-docs-link" href="/paddlejs/methods/paddle-initialize"><code role="code" class="dev-docs-inline-code">Paddle.Initialize()</code></a> and pass your client-side token as <code role="code" class="dev-docs-inline-code">token</code>. For best performance, do this just after calling <code role="code" class="dev-docs-inline-code">Paddle.Environment.set()</code>, like this:</p><div class="skip-search code-viewer-root code-viewer-theme-dark dev-docs-code-block code-viewer-root-has-line-numbers"><div class="code-viewer-title"><span><div class="ant-space css-1me4733 ant-space-horizontal ant-space-align-start"><div class="ant-space-item" style="margin-right:11px"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="code-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.79043 12.7404L7.18024 2.99902L6.21431 3.25784L8.8245 12.9992L9.79043 12.7404ZM15.5 7.99844L12 4.49844L11.295 5.20344L14.085 7.99844L11.295 10.7934L12 11.4984L15.5 7.99844ZM0.499493 7.99844L3.99949 11.4984L4.70449 10.7934L1.91449 7.99844L4.70449 5.20344L3.99949 4.49844L0.499493 7.99844Z" fill="currentColor"></path></svg></div><div class="ant-space-item"><span class="code-viewer-title-text"></span></div></div></span><button class="code-viewer-title-copy"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></button></div><pre class="prismjs" style="margin:0"><code class="code-viewer-code-tag"><div class="code-viewer-snippet"><div class="code-viewer-snippet-line-numbers-root"><div class="code-viewer-snippet-line-numbers">1</div><div class="code-viewer-snippet-line-numbers">2</div><div class="code-viewer-snippet-line-numbers highlighted-line highlighted-line-number">3</div><div class="code-viewer-snippet-line-numbers highlighted-line highlighted-line-number">4</div><div class="code-viewer-snippet-line-numbers highlighted-line highlighted-line-number">5</div><div class="code-viewer-snippet-line-numbers">6</div><div class="code-viewer-snippet-line-numbers">7</div></div><div class="code-viewer-snippet-lines"><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:1.25em;padding-right:1em;text-align:right;user-select:none">1</span><span class="token tag punctuation"><</span><span class="token tag">script</span><span class="token tag"> </span><span class="token tag attr-name">src</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">https://cdn.paddle.com/paddle/v2/paddle.js</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">></span><span class="token tag punctuation"></</span><span class="token tag">script</span><span class="token tag punctuation">></span><span class=""> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:1.25em;padding-right:1em;text-align:right;user-select:none">2</span><span class=""></span><span class="token tag punctuation"><</span><span class="token tag">script</span><span class="token tag"> </span><span class="token tag attr-name">type</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">text/javascript</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">></span><span class="token script language-javascript"> </span></span><span style="background:rgba(252, 252, 252, 0.1)" class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:1.25em;padding-right:1em;text-align:right;user-select:none">3</span><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">Paddle</span><span class="token script language-javascript punctuation">.</span><span class="token script language-javascript property-access maybe-class-name">Environment</span><span class="token script language-javascript punctuation">.</span><span class="token script language-javascript method function property-access">set</span><span class="token script language-javascript punctuation">(</span><span class="token script language-javascript string">"sandbox"</span><span class="token script language-javascript punctuation">)</span><span class="token script language-javascript punctuation">;</span><span class="token script language-javascript"> </span></span><span style="background:rgba(252, 252, 252, 0.1)" class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:1.25em;padding-right:1em;text-align:right;user-select:none">4</span><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">Paddle</span><span class="token script language-javascript punctuation">.</span><span class="token script language-javascript method function property-access maybe-class-name">Initialize</span><span class="token script language-javascript punctuation">(</span><span class="token script language-javascript punctuation">{</span><span class="token script language-javascript"> </span></span><span style="background:rgba(252, 252, 252, 0.1)" class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:1.25em;padding-right:1em;text-align:right;user-select:none">5</span><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property">token</span><span class="token script language-javascript operator">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string">"test_7d279f61a3499fed520f7cd8c08"</span><span class="token script language-javascript"> </span><span class="token script language-javascript comment">// replace with a client-side token</span><span class="token script language-javascript"> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:1.25em;padding-right:1em;text-align:right;user-select:none">6</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation">}</span><span class="token script language-javascript punctuation">)</span><span class="token script language-javascript punctuation">;</span><span class="token script language-javascript"> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:1.25em;padding-right:1em;text-align:right;user-select:none">7</span><span class="token script language-javascript"></span><span class="token tag punctuation"></</span><span class="token tag">script</span><span class="token tag punctuation">></span></span></div></div></code></pre></div><blockquote class="dev-docs-blockquote dev-docs-blockquote-info "><div class="dev-docs-blockquote-icon"><span role="img" aria-label="notification" class="anticon anticon-notification"><svg viewBox="64 64 896 896" focusable="false" data-icon="notification" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.6c-3.7 11.6-5.6 23.9-5.6 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1z"></path></svg></span></div><div class="dev-docs-blockquote-content"><div class="dev-docs-blockquote-content-message"><p class="dev-docs-paragraph">Client-side tokens are separate for your sandbox and live accounts. You'll need to generate a new client-side token for your live account. Sandbox tokens start with <code role="code" class="dev-docs-inline-code">test_</code> to make them easy to distinguish.</p></div></div></blockquote><h2 class="dev-docs-headings "><a id="add-checkout-trigger" href="/build/checkout/build-overlay-checkout#add-checkout-trigger">2. Add an overlay checkout button <span class="dev-docs-heading-anchor"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></span></a></h2><p class="dev-docs-paragraph">Next, we'll set an element on our page as a trigger for our overlay checkout. Overlay checkout works by presenting an overlay to handle the entire checkout process. When our button or other trigger element is clicked, Paddle.js launches a checkout for us.</p><h3 class="dev-docs-headings "><a id="add-checkout-trigger-create-button" href="/build/checkout/build-overlay-checkout#add-checkout-trigger-create-button">Create checkout button element <span class="dev-docs-heading-anchor"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></span></a></h3><p class="dev-docs-paragraph">Any element can be a trigger for an overlay checkout. In our sample, we're using a link (<code role="code" class="dev-docs-inline-code"><a></code>) that points to <code role="code" class="dev-docs-inline-code">#</code>. This means it doesn't open a new page.</p><div class="skip-search code-viewer-root code-viewer-theme-dark dev-docs-code-block code-viewer-root-has-line-numbers"><div class="code-viewer-title"><span><div class="ant-space css-1me4733 ant-space-horizontal ant-space-align-start"><div class="ant-space-item" style="margin-right:11px"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="code-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.79043 12.7404L7.18024 2.99902L6.21431 3.25784L8.8245 12.9992L9.79043 12.7404ZM15.5 7.99844L12 4.49844L11.295 5.20344L14.085 7.99844L11.295 10.7934L12 11.4984L15.5 7.99844ZM0.499493 7.99844L3.99949 11.4984L4.70449 10.7934L1.91449 7.99844L4.70449 5.20344L3.99949 4.49844L0.499493 7.99844Z" fill="currentColor"></path></svg></div><div class="ant-space-item"><span class="code-viewer-title-text"></span></div></div></span><button class="code-viewer-title-copy"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></button></div><pre class="prismjs" style="margin:0"><code class="code-viewer-code-tag"><div class="code-viewer-snippet"><div class="code-viewer-snippet-line-numbers-root"><div class="code-viewer-snippet-line-numbers">1</div></div><div class="code-viewer-snippet-lines"><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:1.25em;padding-right:1em;text-align:right;user-select:none">1</span><span class="token tag punctuation"><</span><span class="token tag">a</span><span class="token tag"> </span><span class="token tag attr-name">href</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">'</span><span class="token tag attr-value">#</span><span class="token tag attr-value punctuation">'</span><span class="token tag punctuation">></span><span class="">Sign up now</span><span class="token tag punctuation"></</span><span class="token tag">a</span><span class="token tag punctuation">></span></span></div></div></code></pre></div><h3 class="dev-docs-headings "><a id="add-checkout-trigger-add-trigger" href="/build/checkout/build-overlay-checkout#add-checkout-trigger-add-trigger">Set as a checkout trigger <span class="dev-docs-heading-anchor"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></span></a></h3><p class="dev-docs-paragraph">Next, we'll make our checkout element open an overlay checkout by making it a trigger.</p><p class="dev-docs-paragraph">There are two ways we can do this:</p><div class="dev-docs-multi-column-layout-root"><div class="dev-docs-multi-column-layout-cell-root"><h4 class="dev-docs-headings "><a id="paddle.checkout.open()-method" href="/build/checkout/build-overlay-checkout#paddle.checkout.open()-method">Paddle.Checkout.open() method<span class="dev-docs-heading-anchor"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></span></a></h4><p class="dev-docs-paragraph"><img src="/assets/images/illustration-javascript-20230314.png" alt="Code illustration showing an openCheckout() function. It's cut off, so you can't make out the full code." class="dev-docs-images"/></p><ul class="dev-docs-list dev-docs-un-ordered-list"><li class="dev-docs-list-item"><div>Works using JavaScript to open a checkout when an element is clicked.</div></li><li class="dev-docs-list-item"><div>You can pass items and settings as parameters to <a class="dev-docs-link" href="/paddlejs/methods/paddle-checkout-open"><code role="code" class="dev-docs-inline-code">Paddle.Checkout.open()</code></a>.</div></li><li class="dev-docs-list-item"><div>Recommended in most cases.</div></li><li class="dev-docs-list-item"><div>No styles applied to your element.</div></li><li class="dev-docs-list-item"><div>Best for passing multiple attributes.</div></li></ul></div><div class="dev-docs-multi-column-layout-cell-root"><h4 class="dev-docs-headings "><a id="html-data-attributes" href="/build/checkout/build-overlay-checkout#html-data-attributes">HTML data attributes<span class="dev-docs-heading-anchor"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></span></a></h4><p class="dev-docs-paragraph"><img src="/assets/images/illustration-html-data-attributes-20230314.png" alt="Code illustration showing HTML data attributes added to an a element. It's cut off, so you can't make out the full code." class="dev-docs-images"/></p><ul class="dev-docs-list dev-docs-un-ordered-list"><li class="dev-docs-list-item"><div>Works by adding a <code role="code" class="dev-docs-inline-code">paddle_button</code> class to an element, which Paddle.js turns into a checkout trigger.</div></li><li class="dev-docs-list-item"><div>You can pass items and settings as <a class="dev-docs-link" href="/paddlejs/html-data-attributes">data attributes</a> against the element.</div></li><li class="dev-docs-list-item"><div>Recommended when you can't use JavaScript.</div></li><li class="dev-docs-list-item"><div>Optionally styles your element to look like a button.</div></li><li class="dev-docs-list-item"><div>Best for passing few attributes.</div></li></ul></div></div><p class="dev-docs-paragraph">In general, we recommend using the <code role="code" class="dev-docs-inline-code">Paddle.Checkout.open()</code> method, but you can choose the option that makes the most sense for you.</p><div class="dev-docs-tabs dev-docs-tabs-top css-1me4733"><div role="tablist" class="dev-docs-tabs-nav"><div class="dev-docs-tabs-nav-wrap"><div class="dev-docs-tabs-nav-list" style="transform:translate(0px, 0px)"><div data-node-key="javascript" class="dev-docs-tabs-tab dev-docs-tabs-tab-active"><div role="tab" aria-selected="true" class="dev-docs-tabs-tab-btn" tabindex="0">JavaScript</div></div><div data-node-key="html" class="dev-docs-tabs-tab"><div role="tab" aria-selected="false" class="dev-docs-tabs-tab-btn" tabindex="0">HTML data attributes</div></div><div class="dev-docs-tabs-ink-bar dev-docs-tabs-ink-bar-animated"></div></div></div><div class="dev-docs-tabs-nav-operations dev-docs-tabs-nav-operations-hidden"><button type="button" class="dev-docs-tabs-nav-more" style="visibility:hidden;order:1" tabindex="-1" aria-hidden="true" aria-haspopup="listbox" aria-controls="null-more-popup" id="null-more" aria-expanded="false"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" focusable="false" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span></button></div></div><div class="dev-docs-tabs-content-holder"><div class="dev-docs-tabs-content dev-docs-tabs-content-top"><div role="tabpanel" tabindex="0" aria-hidden="false" class="dev-docs-tabs-tabpane dev-docs-tabs-tabpane-active"><p class="dev-docs-paragraph">Paddle.js comes with the <a class="dev-docs-link" href="/paddlejs/methods/paddle-checkout-open"><code role="code" class="dev-docs-inline-code">Paddle.Checkout.open()</code></a> method, which lets you open a checkout with <a class="dev-docs-link" href="/build/checkout/set-up-checkout-default-settings">settings</a>, <a class="dev-docs-link" href="/build/checkout/pass-update-checkout-items">items</a>, and <a class="dev-docs-link" href="/build/checkout/prefill-checkout-properties">customer</a> information.</p><p class="dev-docs-paragraph">In our sample, we've created a function called <code role="code" class="dev-docs-inline-code">openCheckout()</code> to open a checkout. Here's how it works:</p><ol class="dev-docs-list dev-docs-ordered-list dev-docs-list-custom-marker"><li class="dev-docs-list-item"><div><p class="dev-docs-paragraph">We create a variable called <code role="code" class="dev-docs-inline-code">itemsList</code> and pass an array of objects, where each object contains a <code role="code" class="dev-docs-inline-code">priceId</code> and <code role="code" class="dev-docs-inline-code">quantity</code>.</p></div></li><li class="dev-docs-list-item"><div><p class="dev-docs-paragraph">We create a function called <code role="code" class="dev-docs-inline-code">openCheckout()</code> that takes a parameter called <code role="code" class="dev-docs-inline-code">items</code>.</p></div></li><li class="dev-docs-list-item"><div><p class="dev-docs-paragraph">In our <code role="code" class="dev-docs-inline-code">openCheckout()</code> function, we call <code role="code" class="dev-docs-inline-code">Paddle.Checkout.open()</code>, passing the value of <code role="code" class="dev-docs-inline-code">items</code> as the items list for the checkout.</p></div></li><li class="dev-docs-list-item"><div><p class="dev-docs-paragraph">We add an <code role="code" class="dev-docs-inline-code">onclick</code> event to our checkout button to call <code role="code" class="dev-docs-inline-code">openCheckout()</code> when clicked, passing our <code role="code" class="dev-docs-inline-code">itemsList</code> variable as a parameter.</p></div></li></ol><section><blockquote class="dev-docs-blockquote dev-docs-blockquote-info "><div class="dev-docs-blockquote-icon"><span role="img" aria-label="notification" class="anticon anticon-notification"><svg viewBox="64 64 896 896" focusable="false" data-icon="notification" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.6c-3.7 11.6-5.6 23.9-5.6 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1z"></path></svg></span></div><div class="dev-docs-blockquote-content"><div class="dev-docs-blockquote-content-message"><p class="dev-docs-paragraph">Recurring items on a checkout must have the same billing interval. For example, you can't have a checkout with some prices that are billed monthly and some products that are billed annually.</p></div></div></blockquote></section><div class="skip-search code-viewer-root code-viewer-theme-dark dev-docs-code-block code-viewer-root-has-line-numbers"><div class="code-viewer-title"><span><div class="ant-space css-1me4733 ant-space-horizontal ant-space-align-start"><div class="ant-space-item" style="margin-right:11px"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="code-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.79043 12.7404L7.18024 2.99902L6.21431 3.25784L8.8245 12.9992L9.79043 12.7404ZM15.5 7.99844L12 4.49844L11.295 5.20344L14.085 7.99844L11.295 10.7934L12 11.4984L15.5 7.99844ZM0.499493 7.99844L3.99949 11.4984L4.70449 10.7934L1.91449 7.99844L4.70449 5.20344L3.99949 4.49844L0.499493 7.99844Z" fill="currentColor"></path></svg></div><div class="ant-space-item"><span class="code-viewer-title-text"></span></div></div></span><button class="code-viewer-title-copy"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></button></div><pre class="prismjs" style="margin:0"><code class="code-viewer-code-tag"><div class="code-viewer-snippet"><div class="code-viewer-snippet-line-numbers-root"><div class="code-viewer-snippet-line-numbers">1</div><div class="code-viewer-snippet-line-numbers">2</div><div class="code-viewer-snippet-line-numbers">3</div><div class="code-viewer-snippet-line-numbers">4</div><div class="code-viewer-snippet-line-numbers">5</div><div class="code-viewer-snippet-line-numbers">6</div><div class="code-viewer-snippet-line-numbers highlighted-line highlighted-line-number">7</div><div class="code-viewer-snippet-line-numbers highlighted-line highlighted-line-number">8</div><div class="code-viewer-snippet-line-numbers highlighted-line highlighted-line-number">9</div><div class="code-viewer-snippet-line-numbers highlighted-line highlighted-line-number">10</div><div class="code-viewer-snippet-line-numbers highlighted-line highlighted-line-number">11</div><div class="code-viewer-snippet-line-numbers highlighted-line highlighted-line-number">12</div><div class="code-viewer-snippet-line-numbers highlighted-line highlighted-line-number">13</div><div class="code-viewer-snippet-line-numbers highlighted-line highlighted-line-number">14</div><div class="code-viewer-snippet-line-numbers highlighted-line highlighted-line-number">15</div><div class="code-viewer-snippet-line-numbers highlighted-line highlighted-line-number">16</div><div class="code-viewer-snippet-line-numbers highlighted-line highlighted-line-number">17</div><div class="code-viewer-snippet-line-numbers highlighted-line highlighted-line-number">18</div><div class="code-viewer-snippet-line-numbers highlighted-line highlighted-line-number">19</div><div class="code-viewer-snippet-line-numbers highlighted-line highlighted-line-number">20</div></div><div class="code-viewer-snippet-lines"><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">1</span><span class="token tag punctuation"><</span><span class="token tag">script</span><span class="token tag"> </span><span class="token tag attr-name">type</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">text/javascript</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">></span><span class="token script language-javascript"> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">2</span><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">Paddle</span><span class="token script language-javascript punctuation">.</span><span class="token script language-javascript property-access maybe-class-name">Environment</span><span class="token script language-javascript punctuation">.</span><span class="token script language-javascript method function property-access">set</span><span class="token script language-javascript punctuation">(</span><span class="token script language-javascript string">"sandbox"</span><span class="token script language-javascript punctuation">)</span><span class="token script language-javascript punctuation">;</span><span class="token script language-javascript"> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">3</span><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">Paddle</span><span class="token script language-javascript punctuation">.</span><span class="token script language-javascript method function property-access maybe-class-name">Initialize</span><span class="token script language-javascript punctuation">(</span><span class="token script language-javascript punctuation">{</span><span class="token script language-javascript"> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">4</span><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property">token</span><span class="token script language-javascript operator">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string">"test_7d279f61a3499fed520f7cd8c08"</span><span class="token script language-javascript"> </span><span class="token script language-javascript comment">// replace with a client-side token</span><span class="token script language-javascript"> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">5</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation">}</span><span class="token script language-javascript punctuation">)</span><span class="token script language-javascript punctuation">;</span><span class="token script language-javascript"> </span></span><span class="token script language-javascript"><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">6</span> </span><span style="background:rgba(252, 252, 252, 0.1)" class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">7</span><span class="token script language-javascript"> </span><span class="token script language-javascript comment">// define items</span><span class="token script language-javascript"> </span></span><span style="background:rgba(252, 252, 252, 0.1)" class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">8</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword">let</span><span class="token script language-javascript"> itemsList </span><span class="token script language-javascript operator">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation">[</span><span class="token script language-javascript"> </span></span><span style="background:rgba(252, 252, 252, 0.1)" class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">9</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation">{</span><span class="token script language-javascript"> </span></span><span style="background:rgba(252, 252, 252, 0.1)" class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">10</span><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property">priceId</span><span class="token script language-javascript operator">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string">"pri_01gsz8ntc6z7npqqp6j4ys0w1w"</span><span class="token script language-javascript punctuation">,</span><span class="token script language-javascript"> </span></span><span style="background:rgba(252, 252, 252, 0.1)" class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">11</span><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property">quantity</span><span class="token script language-javascript operator">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript number">5</span><span class="token script language-javascript"> </span></span><span style="background:rgba(252, 252, 252, 0.1)" class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">12</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation">}</span><span class="token script language-javascript punctuation">,</span><span class="token script language-javascript"> </span></span><span style="background:rgba(252, 252, 252, 0.1)" class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">13</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation">{</span><span class="token script language-javascript"> </span></span><span style="background:rgba(252, 252, 252, 0.1)" class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">14</span><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property">priceId</span><span class="token script language-javascript operator">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string">"pri_01h1vjfevh5etwq3rb416a23h2"</span><span class="token script language-javascript punctuation">,</span><span class="token script language-javascript"> </span></span><span style="background:rgba(252, 252, 252, 0.1)" class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">15</span><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property">quantity</span><span class="token script language-javascript operator">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript number">1</span><span class="token script language-javascript"> </span></span><span style="background:rgba(252, 252, 252, 0.1)" class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">16</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation">}</span><span class="token script language-javascript"> </span></span><span style="background:rgba(252, 252, 252, 0.1)" class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">17</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation">]</span><span class="token script language-javascript punctuation">;</span><span class="token script language-javascript"> </span></span><span style="background:rgba(252, 252, 252, 0.1)" class="token script language-javascript"><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">18</span> </span><span style="background:rgba(252, 252, 252, 0.1)" class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">19</span><span class="token script language-javascript"> </span><span class="token script language-javascript comment">// open checkout</span><span class="token script language-javascript"> </span></span><span style="background:rgba(252, 252, 252, 0.1)" class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">20</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword">function</span><span class="token script language-javascript"> </span><span class="token script language-javascript function">openCheckout</span><span class="token script language-javascript punctuation">(</span><span class="token script language-javascript parameter">items</span><span class="token script language-javascript punctuation">)</span><span class="token script language-javascript punctuation">{</span><span class="token script language-javascript"> </span></span></div></div><div class="code-viewer-toggle-root code-viewer-inverted-icon code-viewer-toggle-bottom"><span class="code-viewer-toggle-icon" data-testid="show-all-lines-at-bottom"><svg width="17" height="24" viewBox="0 0 17 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.02531 7.705L7.82031 3.915V14H8.82031V3.915L12.6153 7.705L13.3203 7L8.32031 2L3.32031 7L4.02531 7.705Z" fill="currentColor"></path><path d="M1.68 20.64C1.19467 20.64 0.793334 20.7987 0.476 21.116C0.158667 21.4333 0 21.8347 0 22.32C0 22.8147 0.158667 23.216 0.476 23.524C0.793334 23.8413 1.19467 24 1.68 24C2.17467 24 2.576 23.8413 2.884 23.524C3.20133 23.216 3.36 22.8147 3.36 22.32C3.36 21.8347 3.20133 21.4333 2.884 21.116C2.576 20.7987 2.17467 20.64 1.68 20.64Z" fill="currentColor"></path><path d="M8.39437 20.6396C7.90904 20.6396 7.50771 20.7982 7.19038 21.1156C6.87305 21.4329 6.71438 21.8342 6.71438 22.3196C6.71438 22.8142 6.87305 23.2156 7.19038 23.5236C7.50771 23.8409 7.90904 23.9996 8.39437 23.9996C8.88904 23.9996 9.29037 23.8409 9.59837 23.5236C9.91571 23.2156 10.0744 22.8142 10.0744 22.3196C10.0744 21.8342 9.91571 21.4329 9.59837 21.1156C9.29037 20.7982 8.88904 20.6396 8.39437 20.6396Z" fill="currentColor"></path><path d="M15.1089 20.6396C14.6236 20.6396 14.2222 20.7982 13.9049 21.1156C13.5876 21.4329 13.4289 21.8342 13.4289 22.3196C13.4289 22.8142 13.5876 23.2156 13.9049 23.5236C14.2222 23.8409 14.6236 23.9996 15.1089 23.9996C15.6036 23.9996 16.0049 23.8409 16.3129 23.5236C16.6302 23.2156 16.7889 22.8142 16.7889 22.3196C16.7889 21.8342 16.6302 21.4329 16.3129 21.1156C16.0049 20.7982 15.6036 20.6396 15.1089 20.6396Z" fill="currentColor"></path></svg></span></div></code></pre></div></div></div></div></div><h2 class="dev-docs-headings "><a id="test-payment" href="/build/checkout/build-overlay-checkout#test-payment">3. Take a test payment <span class="dev-docs-heading-anchor"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></span></a></h2><p class="dev-docs-paragraph">We're now ready to test! Save your page, then open it in your browser. Click on your "Sign up now" button and Paddle.js should open an overlay checkout for the items that we passed.</p><section><p class="dev-docs-paragraph">If you're using a sandbox account, you can take a test payment using <a class="dev-docs-link" href="/concepts/payment-methods/credit-debit-card">our test card details</a>:</p><table class="dev-docs-table"><thead class="dev-docs-table-thead"></thead><tbody class="dev-docs-table-body"><tr class="dev-docs-table-row"><td class="dev-docs-table-data-cell"><strong>Email address</strong></td><td class="dev-docs-table-data-cell">An email address you own</td></tr><tr class="dev-docs-table-row"><td class="dev-docs-table-data-cell"><strong>Country</strong></td><td class="dev-docs-table-data-cell">Any valid country supported by Paddle</td></tr><tr class="dev-docs-table-row"><td class="dev-docs-table-data-cell"><strong>ZIP code</strong> (if required)</td><td class="dev-docs-table-data-cell">Any valid ZIP or postal code</td></tr><tr class="dev-docs-table-row"><td class="dev-docs-table-data-cell"><strong>Card number</strong></td><td class="dev-docs-table-data-cell"><code role="code" class="dev-docs-inline-code">4242 4242 4242 4242</code></td></tr><tr class="dev-docs-table-row"><td class="dev-docs-table-data-cell"><strong>Name on card</strong></td><td class="dev-docs-table-data-cell">Any name</td></tr><tr class="dev-docs-table-row"><td class="dev-docs-table-data-cell"><strong>Expiration date</strong></td><td class="dev-docs-table-data-cell">Any valid date in the future.</td></tr><tr class="dev-docs-table-row"><td class="dev-docs-table-data-cell"><strong>Security code</strong></td><td class="dev-docs-table-data-cell"><code role="code" class="dev-docs-inline-code">100</code></td></tr></tbody></table></section><p class="dev-docs-paragraph"><img src="/assets/images/overlay-checkout-test-payment-20230314.gif" alt="Short animation showing launching an overlay checkout, entering contact information, and entering test payment details." class="dev-docs-images"/></p><div class="ant-collapse ant-collapse-icon-position-end ant-collapse-ghost dev-docs-accordion css-1me4733" role="tablist"><div class="ant-collapse-item"><div class="ant-collapse-header" aria-expanded="false" aria-disabled="false" role="tab" tabindex="0"><div class="ant-collapse-expand-icon"><span role="img" aria-label="plus" class="anticon anticon-plus ant-collapse-arrow"><svg viewBox="64 64 896 896" focusable="false" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span></div><span class="ant-collapse-header-text"><div><div>Checkout not working?</div></div></span></div><div class="ant-collapse-content ant-collapse-content-inactive" style="display:none" role="tabpanel"><div class="ant-collapse-content-box"><p class="dev-docs-paragraph">If the checkout doesn't appear, or you get a message saying "Something went wrong," you can open your browser console to see any specific error messages from Paddle.js to help you troubleshoot.</p><blockquote class="dev-docs-blockquote dev-docs-blockquote-info "><div class="dev-docs-blockquote-icon"><span role="img" aria-label="notification" class="anticon anticon-notification"><svg viewBox="64 64 896 896" focusable="false" data-icon="notification" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.6c-3.7 11.6-5.6 23.9-5.6 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1z"></path></svg></span></div><div class="dev-docs-blockquote-content"><div class="dev-docs-blockquote-content-message"><p class="dev-docs-paragraph">Use <code role="code" class="dev-docs-inline-code">⌘ Command</code> + <code role="code" class="dev-docs-inline-code">⌥ Option</code> + <code role="code" class="dev-docs-inline-code">J</code> (Mac) or <code role="code" class="dev-docs-inline-code">Ctrl</code> + <code role="code" class="dev-docs-inline-code">⇧ Shift</code> + <code role="code" class="dev-docs-inline-code">J</code> (Windows) to quickly open your browser console in Google Chrome.</p></div></div></blockquote><h4 class="dev-docs-headings "><a id="test-payment-troubleshooting" href="/build/checkout/build-overlay-checkout#test-payment-troubleshooting">Common problems <span class="dev-docs-heading-anchor"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></span></a></h4><p class="dev-docs-paragraph">Check that:</p><ul class="dev-docs-list dev-docs-un-ordered-list"><li class="dev-docs-list-item"><div>You added a default payment link to your checkout under <strong>Paddle > Checkout > Checkout settings > Default payment link</strong>, and that this matches the domain where you're testing. You can use <code role="code" class="dev-docs-inline-code">localhost</code> if you're testing locally on sandbox.</div></li><li class="dev-docs-list-item"><div>You included Paddle.js correctly. If you're moving from Paddle Classic, the CDN URL has changed.</div></li><li class="dev-docs-list-item"><div>Your client-side token is correct and passed to <code role="code" class="dev-docs-inline-code">Paddle.Initialize()</code>.</div></li><li class="dev-docs-list-item"><div>You set the correct environment.</div></li><li class="dev-docs-list-item"><div>The Paddle IDs for price entities that you passed are correct. Sandbox and live systems are separate, so make sure you're passing price IDs for the environment that you're working in.</div></li><li class="dev-docs-list-item"><div>If you're using HTML data attributes, you used single quotation marks around the value of <code role="code" class="dev-docs-inline-code">data-items</code>, and double quotation marks around the property names and string values inside it</div></li></ul></div></div></div></div><h2 class="dev-docs-headings "><a id="prefill-customer" href="/build/checkout/build-overlay-checkout#prefill-customer">4. Prefill customer information (optional) <span class="dev-docs-heading-anchor"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></span></a></h2><p class="dev-docs-paragraph">So far, we've passed items to our checkout. When we click our trigger, Paddle opens a checkout for the items that we passed.</p><p class="dev-docs-paragraph">Paddle.js also lets you <a class="dev-docs-link" href="/build/checkout/prefill-checkout-properties">pass customer information to a checkout</a>. When we click our trigger, Paddle opens a checkout with the customer information prefilled. This means the first page of checkout is skipped entirely, so customers land on a screen where they can enter their payment information.</p><blockquote class="dev-docs-blockquote dev-docs-blockquote-neutral "><div class="dev-docs-blockquote-icon"><svg width="20" height="20" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.5 9.51735V11.4696C19.3052 11.4699 18.1222 11.7038 17.0186 12.1579C15.915 12.6119 14.9124 13.2773 14.0682 14.116C13.2239 14.9546 12.5546 15.9501 12.0985 17.0455C11.6423 18.141 11.4082 19.3148 11.4097 20.5H9.59031C9.58973 18.1086 8.63182 15.8154 6.92718 14.1244C5.22254 12.4334 2.91072 11.4832 0.5 11.4826V9.53037C1.69478 9.53008 2.87779 9.29621 3.98141 8.84214C5.08502 8.38806 6.08759 7.72267 6.93182 6.88401C7.77605 6.04535 8.44538 5.04986 8.90154 3.95445C9.3577 2.85904 9.59175 1.68519 9.59031 0.5H11.4097C11.4103 2.89137 12.3682 5.18464 14.0728 6.8756C15.7775 8.56655 18.0893 9.51678 20.5 9.51735Z" fill="currentColor"></path></svg></div><div class="dev-docs-blockquote-content"><div class="dev-docs-blockquote-content-message"><p class="dev-docs-paragraph">You can present customers with a one-page checkout experience by passing <code role="code" class="dev-docs-inline-code">variant</code> with the value <code role="code" class="dev-docs-inline-code">one-page</code> <a class="dev-docs-link" href="/build/checkout/set-up-checkout-default-settings">as a checkout setting</a>. You don't need to prefill information.</p></div></div></blockquote><div class="dev-docs-tabs dev-docs-tabs-top css-1me4733"><div role="tablist" class="dev-docs-tabs-nav"><div class="dev-docs-tabs-nav-wrap"><div class="dev-docs-tabs-nav-list" style="transform:translate(0px, 0px)"><div data-node-key="javascript" class="dev-docs-tabs-tab dev-docs-tabs-tab-active"><div role="tab" aria-selected="true" class="dev-docs-tabs-tab-btn" tabindex="0">JavaScript</div></div><div data-node-key="html" class="dev-docs-tabs-tab"><div role="tab" aria-selected="false" class="dev-docs-tabs-tab-btn" tabindex="0">HTML data attributes</div></div><div class="dev-docs-tabs-ink-bar dev-docs-tabs-ink-bar-animated"></div></div></div><div class="dev-docs-tabs-nav-operations dev-docs-tabs-nav-operations-hidden"><button type="button" class="dev-docs-tabs-nav-more" style="visibility:hidden;order:1" tabindex="-1" aria-hidden="true" aria-haspopup="listbox" aria-controls="null-more-popup" id="null-more" aria-expanded="false"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" focusable="false" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span></button></div></div><div class="dev-docs-tabs-content-holder"><div class="dev-docs-tabs-content dev-docs-tabs-content-top"><div role="tabpanel" tabindex="0" aria-hidden="false" class="dev-docs-tabs-tabpane dev-docs-tabs-tabpane-active"><p class="dev-docs-paragraph"><a class="dev-docs-link" href="/paddlejs/methods/paddle-checkout-open"><code role="code" class="dev-docs-inline-code">Paddle.Checkout.open()</code></a> takes a <code role="code" class="dev-docs-inline-code">customer</code> parameter, which lets you pass customer and address information.</p><p class="dev-docs-paragraph">In our sample, we've extended our <code role="code" class="dev-docs-inline-code">openCheckout()</code> function so that it passes customer and address information to our checkout. Here's what's going on:</p><ol class="dev-docs-list dev-docs-ordered-list dev-docs-list-custom-marker"><li class="dev-docs-list-item"><div><p class="dev-docs-paragraph">We create a variable called <code role="code" class="dev-docs-inline-code">customerInfo</code>, with an <code role="code" class="dev-docs-inline-code">email</code> key and an object for <code role="code" class="dev-docs-inline-code">address</code>. You may also pass Paddle IDs for an existing customer or address here.</p></div></li><li class="dev-docs-list-item"><div><p class="dev-docs-paragraph">We update our <code role="code" class="dev-docs-inline-code">openCheckout()</code> function so it takes another parameter called <code role="code" class="dev-docs-inline-code">customer</code>.</p></div></li><li class="dev-docs-list-item"><div><p class="dev-docs-paragraph">In our <code role="code" class="dev-docs-inline-code">openCheckout()</code> function, we added the <code role="code" class="dev-docs-inline-code">customer</code> parameter and passing the value of <code role="code" class="dev-docs-inline-code">customer</code> to this.</p></div></li><li class="dev-docs-list-item"><div><p class="dev-docs-paragraph">We updated the <code role="code" class="dev-docs-inline-code">onClick</code> event on our checkout button to pass our <code role="code" class="dev-docs-inline-code">customerInfo</code> variable as the parameter for <code role="code" class="dev-docs-inline-code">customer</code>.</p></div></li></ol><div class="skip-search code-viewer-root code-viewer-theme-dark dev-docs-code-block code-viewer-root-has-line-numbers"><div class="code-viewer-title"><span><div class="ant-space css-1me4733 ant-space-horizontal ant-space-align-start"><div class="ant-space-item" style="margin-right:11px"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="code-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.79043 12.7404L7.18024 2.99902L6.21431 3.25784L8.8245 12.9992L9.79043 12.7404ZM15.5 7.99844L12 4.49844L11.295 5.20344L14.085 7.99844L11.295 10.7934L12 11.4984L15.5 7.99844ZM0.499493 7.99844L3.99949 11.4984L4.70449 10.7934L1.91449 7.99844L4.70449 5.20344L3.99949 4.49844L0.499493 7.99844Z" fill="currentColor"></path></svg></div><div class="ant-space-item"><span class="code-viewer-title-text"></span></div></div></span><button class="code-viewer-title-copy"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></button></div><pre class="prismjs" style="margin:0"><code class="code-viewer-code-tag"><div class="code-viewer-snippet"><div class="code-viewer-snippet-line-numbers-root"><div class="code-viewer-snippet-line-numbers">1</div><div class="code-viewer-snippet-line-numbers">2</div><div class="code-viewer-snippet-line-numbers">3</div><div class="code-viewer-snippet-line-numbers">4</div><div class="code-viewer-snippet-line-numbers">5</div><div class="code-viewer-snippet-line-numbers">6</div><div class="code-viewer-snippet-line-numbers">7</div><div class="code-viewer-snippet-line-numbers">8</div><div class="code-viewer-snippet-line-numbers">9</div><div class="code-viewer-snippet-line-numbers">10</div><div class="code-viewer-snippet-line-numbers">11</div><div class="code-viewer-snippet-line-numbers">12</div><div class="code-viewer-snippet-line-numbers">13</div><div class="code-viewer-snippet-line-numbers">14</div><div class="code-viewer-snippet-line-numbers">15</div><div class="code-viewer-snippet-line-numbers">16</div><div class="code-viewer-snippet-line-numbers">17</div><div class="code-viewer-snippet-line-numbers">18</div><div class="code-viewer-snippet-line-numbers highlighted-line highlighted-line-number">19</div><div class="code-viewer-snippet-line-numbers highlighted-line highlighted-line-number">20</div></div><div class="code-viewer-snippet-lines"><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">1</span><span class="token tag punctuation"><</span><span class="token tag">script</span><span class="token tag"> </span><span class="token tag attr-name">type</span><span class="token tag attr-value punctuation attr-equals">=</span><span class="token tag attr-value punctuation">"</span><span class="token tag attr-value">text/javascript</span><span class="token tag attr-value punctuation">"</span><span class="token tag punctuation">></span><span class="token script language-javascript"> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">2</span><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">Paddle</span><span class="token script language-javascript punctuation">.</span><span class="token script language-javascript property-access maybe-class-name">Environment</span><span class="token script language-javascript punctuation">.</span><span class="token script language-javascript method function property-access">set</span><span class="token script language-javascript punctuation">(</span><span class="token script language-javascript string">"sandbox"</span><span class="token script language-javascript punctuation">)</span><span class="token script language-javascript punctuation">;</span><span class="token script language-javascript"> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">3</span><span class="token script language-javascript"> </span><span class="token script language-javascript maybe-class-name">Paddle</span><span class="token script language-javascript punctuation">.</span><span class="token script language-javascript method function property-access maybe-class-name">Initialize</span><span class="token script language-javascript punctuation">(</span><span class="token script language-javascript punctuation">{</span><span class="token script language-javascript"> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">4</span><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property">token</span><span class="token script language-javascript operator">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string">"test_7d279f61a3499fed520f7cd8c08"</span><span class="token script language-javascript"> </span><span class="token script language-javascript comment">// replace with a client-side token</span><span class="token script language-javascript"> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">5</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation">}</span><span class="token script language-javascript punctuation">)</span><span class="token script language-javascript punctuation">;</span><span class="token script language-javascript"> </span></span><span class="token script language-javascript"><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">6</span> </span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">7</span><span class="token script language-javascript"> </span><span class="token script language-javascript comment">// define items</span><span class="token script language-javascript"> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">8</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword">let</span><span class="token script language-javascript"> itemsList </span><span class="token script language-javascript operator">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation">[</span><span class="token script language-javascript"> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">9</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation">{</span><span class="token script language-javascript"> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">10</span><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property">priceId</span><span class="token script language-javascript operator">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string">"pri_01gsz8ntc6z7npqqp6j4ys0w1w"</span><span class="token script language-javascript punctuation">,</span><span class="token script language-javascript"> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">11</span><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property">quantity</span><span class="token script language-javascript operator">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript number">5</span><span class="token script language-javascript"> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">12</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation">}</span><span class="token script language-javascript punctuation">,</span><span class="token script language-javascript"> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">13</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation">{</span><span class="token script language-javascript"> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">14</span><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property">priceId</span><span class="token script language-javascript operator">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string">"pri_01h1vjfevh5etwq3rb416a23h2"</span><span class="token script language-javascript punctuation">,</span><span class="token script language-javascript"> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">15</span><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property">quantity</span><span class="token script language-javascript operator">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript number">1</span><span class="token script language-javascript"> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">16</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation">}</span><span class="token script language-javascript"> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">17</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation">]</span><span class="token script language-javascript punctuation">;</span><span class="token script language-javascript"> </span></span><span class="token script language-javascript"><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">18</span> </span><span style="background:rgba(252, 252, 252, 0.1)" class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">19</span><span class="token script language-javascript"> </span><span class="token script language-javascript comment">// define customer details</span><span class="token script language-javascript"> </span></span><span style="background:rgba(252, 252, 252, 0.1)" class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">20</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword">let</span><span class="token script language-javascript"> customerInfo </span><span class="token script language-javascript operator">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation">{</span><span class="token script language-javascript"> </span></span></div></div><div class="code-viewer-toggle-root code-viewer-inverted-icon code-viewer-toggle-bottom"><span class="code-viewer-toggle-icon" data-testid="show-all-lines-at-bottom"><svg width="17" height="24" viewBox="0 0 17 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.02531 7.705L7.82031 3.915V14H8.82031V3.915L12.6153 7.705L13.3203 7L8.32031 2L3.32031 7L4.02531 7.705Z" fill="currentColor"></path><path d="M1.68 20.64C1.19467 20.64 0.793334 20.7987 0.476 21.116C0.158667 21.4333 0 21.8347 0 22.32C0 22.8147 0.158667 23.216 0.476 23.524C0.793334 23.8413 1.19467 24 1.68 24C2.17467 24 2.576 23.8413 2.884 23.524C3.20133 23.216 3.36 22.8147 3.36 22.32C3.36 21.8347 3.20133 21.4333 2.884 21.116C2.576 20.7987 2.17467 20.64 1.68 20.64Z" fill="currentColor"></path><path d="M8.39437 20.6396C7.90904 20.6396 7.50771 20.7982 7.19038 21.1156C6.87305 21.4329 6.71438 21.8342 6.71438 22.3196C6.71438 22.8142 6.87305 23.2156 7.19038 23.5236C7.50771 23.8409 7.90904 23.9996 8.39437 23.9996C8.88904 23.9996 9.29037 23.8409 9.59837 23.5236C9.91571 23.2156 10.0744 22.8142 10.0744 22.3196C10.0744 21.8342 9.91571 21.4329 9.59837 21.1156C9.29037 20.7982 8.88904 20.6396 8.39437 20.6396Z" fill="currentColor"></path><path d="M15.1089 20.6396C14.6236 20.6396 14.2222 20.7982 13.9049 21.1156C13.5876 21.4329 13.4289 21.8342 13.4289 22.3196C13.4289 22.8142 13.5876 23.2156 13.9049 23.5236C14.2222 23.8409 14.6236 23.9996 15.1089 23.9996C15.6036 23.9996 16.0049 23.8409 16.3129 23.5236C16.6302 23.2156 16.7889 22.8142 16.7889 22.3196C16.7889 21.8342 16.6302 21.4329 16.3129 21.1156C16.0049 20.7982 15.6036 20.6396 15.1089 20.6396Z" fill="currentColor"></path></svg></span></div></code></pre></div></div></div></div></div><h3 class="dev-docs-headings "><a id="prefill-customer-test" href="/build/checkout/build-overlay-checkout#prefill-customer-test">Test your work <span class="dev-docs-heading-anchor"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></span></a></h3><p class="dev-docs-paragraph">Save your page, then open it in your browser. Click on your "Sign up now" button and Paddle.js should open an overlay checkout with the customer information prefilled. You should land on the second screen, ready to enter payment information.</p><p class="dev-docs-paragraph"><img src="/assets/images/overlay-checkout-one-page-20230314.gif" alt="Short animation showing overlay checkout landing on a screen asking for card details." class="dev-docs-images"/></p><div class="ant-collapse ant-collapse-icon-position-end ant-collapse-ghost dev-docs-accordion css-1me4733" role="tablist"><div class="ant-collapse-item"><div class="ant-collapse-header" aria-expanded="false" aria-disabled="false" role="tab" tabindex="0"><div class="ant-collapse-expand-icon"><span role="img" aria-label="plus" class="anticon anticon-plus ant-collapse-arrow"><svg viewBox="64 64 896 896" focusable="false" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span></div><span class="ant-collapse-header-text"><div><div>Checkout not working?</div></div></span></div><div class="ant-collapse-content ant-collapse-content-inactive" style="display:none" role="tabpanel"><div class="ant-collapse-content-box"><p class="dev-docs-paragraph">Where there's a problem passing optional information to a checkout, Paddle.js opens the checkout but emits a <a class="dev-docs-link" href="/paddlejs/general/checkout-warning"><code role="code" class="dev-docs-inline-code">checkout.warning</code></a> event. This means customers are always able to complete a purchase provided you've initialized Paddle.js and passed items successfully.</p><p class="dev-docs-paragraph">You can use the <code role="code" class="dev-docs-inline-code">eventCallback</code> parameter for <a class="dev-docs-link" href="/paddlejs/methods/paddle-initialize"><code role="code" class="dev-docs-inline-code">Paddle.Initialize()</code></a> to work with events emitted by Paddle.js. To print events emitted by Paddle.js to the console, update your <code role="code" class="dev-docs-inline-code">Paddle.Initialize()</code> function so it looks like this.</p><div class="skip-search code-viewer-root code-viewer-theme-dark dev-docs-code-block code-viewer-root-has-line-numbers"><div class="code-viewer-title"><span><div class="ant-space css-1me4733 ant-space-horizontal ant-space-align-start"><div class="ant-space-item" style="margin-right:11px"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="code-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.79043 12.7404L7.18024 2.99902L6.21431 3.25784L8.8245 12.9992L9.79043 12.7404ZM15.5 7.99844L12 4.49844L11.295 5.20344L14.085 7.99844L11.295 10.7934L12 11.4984L15.5 7.99844ZM0.499493 7.99844L3.99949 11.4984L4.70449 10.7934L1.91449 7.99844L4.70449 5.20344L3.99949 4.49844L0.499493 7.99844Z" fill="currentColor"></path></svg></div><div class="ant-space-item"><span class="code-viewer-title-text"></span></div></div></span><button class="code-viewer-title-copy"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></button></div><pre class="prismjs" style="margin:0"><code class="code-viewer-code-tag"><div class="code-viewer-snippet"><div class="code-viewer-snippet-line-numbers-root"><div class="code-viewer-snippet-line-numbers">1</div><div class="code-viewer-snippet-line-numbers">2</div><div class="code-viewer-snippet-line-numbers">3</div><div class="code-viewer-snippet-line-numbers highlighted-line highlighted-line-number">4</div><div class="code-viewer-snippet-line-numbers highlighted-line highlighted-line-number">5</div><div class="code-viewer-snippet-line-numbers highlighted-line highlighted-line-number">6</div><div class="code-viewer-snippet-line-numbers">7</div></div><div class="code-viewer-snippet-lines"><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">1</span><span class="token maybe-class-name">Paddle</span><span class="token punctuation">.</span><span class="token method function property-access maybe-class-name">Initialize</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class=""> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">2</span><span class=""> </span><span class="token literal-property property">token</span><span class="token operator">:</span><span class=""> </span><span class="token string">"test_7d279f61a3499fed520f7cd8c08"</span><span class="token punctuation">,</span><span class=""> </span><span class="token comment">// replace with a client-side token</span><span class=""> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">3</span><span class=""> </span><span class="token comment">// prints events to console for debugging</span><span class=""> </span></span><span style="background:rgba(252, 252, 252, 0.1)" class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">4</span><span class=""> </span><span class="token function-variable function">eventCallback</span><span class="token operator">:</span><span class=""> </span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span><span class=""> </span><span class="token punctuation">{</span><span class=""> </span></span><span style="background:rgba(252, 252, 252, 0.1)" class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">5</span><span class=""> </span><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="">data</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class=""> </span></span><span style="background:rgba(252, 252, 252, 0.1)" class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">6</span><span class=""> </span><span class="token punctuation">}</span><span class=""> </span></span><span class=""><span class="comment linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.25em;padding-right:1em;text-align:right;user-select:none">7</span><span class=""></span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span></div></div></code></pre></div><p class="dev-docs-paragraph">Then, open your browser console and check for events with the name <a class="dev-docs-link" href="/paddlejs/general/checkout-warning"><code role="code" class="dev-docs-inline-code">checkout.warning</code></a>. They should tell you what the problem is.</p><blockquote class="dev-docs-blockquote dev-docs-blockquote-info "><div class="dev-docs-blockquote-icon"><span role="img" aria-label="notification" class="anticon anticon-notification"><svg viewBox="64 64 896 896" focusable="false" data-icon="notification" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.6c-3.7 11.6-5.6 23.9-5.6 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1z"></path></svg></span></div><div class="dev-docs-blockquote-content"><div class="dev-docs-blockquote-content-message"><p class="dev-docs-paragraph">Use <code role="code" class="dev-docs-inline-code">⌘ Command</code> + <code role="code" class="dev-docs-inline-code">⌥ Option</code> + <code role="code" class="dev-docs-inline-code">J</code> (Mac) or <code role="code" class="dev-docs-inline-code">Ctrl</code> + <code role="code" class="dev-docs-inline-code">⇧ Shift</code> + <code role="code" class="dev-docs-inline-code">J</code> (Windows) to quickly open your browser console in Google Chrome.</p></div></div></blockquote><h4 class="dev-docs-headings "><a id="prefill-customer-troubleshooting" href="/build/checkout/build-overlay-checkout#prefill-customer-troubleshooting">Common problems <span class="dev-docs-heading-anchor"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></span></a></h4><p class="dev-docs-paragraph">Check that:</p><ul class="dev-docs-list dev-docs-un-ordered-list"><li class="dev-docs-list-item"><div>The email address that you passed is formatted correctly. Email addresses must not include spaces or non-ASCII characters.</div></li><li class="dev-docs-list-item"><div>If you passed an address country, you also passed a ZIP/postal code if the country requires it. Most countries don't require a ZIP/postal code, but it's <a class="dev-docs-link" href="/concepts/sell/supported-countries-locales">required in some places</a> for tax calculation and fraud prevention.</div></li><li class="dev-docs-list-item"><div>The Paddle IDs for customer, address, or business entities that you passed are correct. Sandbox and live systems are separate, so make sure you're passing Paddle IDs for the environment that you're working in.</div></li></ul></div></div></div></div><h2 class="dev-docs-headings "><a id="next-steps" href="/build/checkout/build-overlay-checkout#next-steps">Next steps <span class="dev-docs-heading-anchor"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></span></a></h2><p class="dev-docs-paragraph">That's it! Now you've built a checkout, you might like to extend Paddle Checkout by automatically applying a discount, passing optional checkout settings, or building a success workflow.</p><h3 class="dev-docs-headings "><a id="next-steps-discount" href="/build/checkout/build-overlay-checkout#next-steps-discount">Automatically apply a discount <span class="dev-docs-heading-anchor"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></span></a></h3><p class="dev-docs-paragraph">Extend your checkout by passing a discount. When we click our trigger, Paddle opens a checkout with the discount automatically applied (where it's valid).</p><div class="articles-section-root"><div class="articles-section-item-root skip-search"><div class="articles-section-item-image-placeholder"></div><div class="articles-section-item-text" title="Prefill checkout properties">Prefill checkout properties</div><div class="articles-section-item-link"><a href="/build/checkout/prefill-checkout-properties">Read more<span role="img" aria-label="arrow-right" class="anticon anticon-arrow-right"><svg viewBox="64 64 896 896" focusable="false" data-icon="arrow-right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M869 487.8L491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-.7 5.2-2L869 536.2a32.07 32.07 0 000-48.4z"></path></svg></span></a></div></div><div class="articles-section-item-root skip-search"><div class="articles-section-item-image-placeholder"></div><div class="articles-section-item-text" title="Create or update a discount">Create or update a discount</div><div class="articles-section-item-link"><a href="/build/products/offer-discounts-promotions-coupons">Read more<span role="img" aria-label="arrow-right" class="anticon anticon-arrow-right"><svg viewBox="64 64 896 896" focusable="false" data-icon="arrow-right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M869 487.8L491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-.7 5.2-2L869 536.2a32.07 32.07 0 000-48.4z"></path></svg></span></a></div></div></div><h3 class="dev-docs-headings "><a id="extend-checkout-other" href="/build/checkout/build-overlay-checkout#extend-checkout-other">Pass checkout settings <span class="dev-docs-heading-anchor"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></span></a></h3><p class="dev-docs-paragraph">You don't need to pass checkout settings when working with overlay checkout, but you can use them to give you more control over how opened checkouts work. For example, you can set the language that Paddle Checkout uses, hide the option to add a discount, or restrict payment methods shown to customers.</p><div class="articles-section-root"><div class="articles-section-item-root skip-search"><div class="articles-section-item-image-placeholder"></div><div class="articles-section-item-text" title="Pass checkout settings">Pass checkout settings</div><div class="articles-section-item-link"><a href="/build/checkout/set-up-checkout-default-settings">Read more<span role="img" aria-label="arrow-right" class="anticon anticon-arrow-right"><svg viewBox="64 64 896 896" focusable="false" data-icon="arrow-right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M869 487.8L491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-.7 5.2-2L869 536.2a32.07 32.07 0 000-48.4z"></path></svg></span></a></div></div><div class="articles-section-item-root skip-search"><div class="articles-section-item-image-placeholder"></div><div class="articles-section-item-text" title="Paddle.Checkout.open() method">Paddle.Checkout.open() method</div><div class="articles-section-item-link"><a href="/paddlejs/methods/paddle-checkout-open">Read more<span role="img" aria-label="arrow-right" class="anticon anticon-arrow-right"><svg viewBox="64 64 896 896" focusable="false" data-icon="arrow-right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M869 487.8L491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-.7 5.2-2L869 536.2a32.07 32.07 0 000-48.4z"></path></svg></span></a></div></div></div><h3 class="dev-docs-headings "><a id="extend-checkout-success" href="/build/checkout/build-overlay-checkout#extend-checkout-success">Build a success workflow <span class="dev-docs-heading-anchor"><span class="copy-icon" aria-label="Copy"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="copy-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 9H14.002V2H7.00195V1H14.002C14.2672 1 14.5215 1.10536 14.7091 1.29289C14.8966 1.48043 15.002 1.73478 15.002 2V9ZM2.00186 14.0001V5.0001H11.0019V14.0001H2.00186ZM11.0019 4.0001H2.00186C1.73664 4.0001 1.48229 4.10545 1.29475 4.29299C1.10721 4.48053 1.00186 4.73488 1.00186 5.0001V14.0001C1.00186 14.2653 1.10721 14.5197 1.29475 14.7072C1.48229 14.8947 1.73664 15.0001 2.00186 15.0001H11.0019C11.2671 15.0001 11.5214 14.8947 11.709 14.7072C11.8965 14.5197 12.0019 14.2653 12.0019 14.0001V5.0001C12.0019 4.73488 11.8965 4.48053 11.709 4.29299C11.5214 4.10545 11.2671 4.0001 11.0019 4.0001Z" fill="currentColor"></path></svg></span></span></a></h3><p class="dev-docs-paragraph">When customers complete checkout, Paddle Checkout has a final screen that lets customers know that their purchase was successful. If you like, you can redirect customers to your own page or use JavaScript event callbacks to build a more advanced success workflow.</p><div class="articles-section-root"><div class="articles-section-item-root skip-search"><div class="articles-section-item-image-placeholder"></div><div class="articles-section-item-text" title="Handle checkout success">Handle checkout success</div><div class="articles-section-item-link"><a href="/build/checkout/handle-success-post-checkout">Read more<span role="img" aria-label="arrow-right" class="anticon anticon-arrow-right"><svg viewBox="64 64 896 896" focusable="false" data-icon="arrow-right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M869 487.8L491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-.7 5.2-2L869 536.2a32.07 32.07 0 000-48.4z"></path></svg></span></a></div></div><div class="articles-section-item-root skip-search"><div class="articles-section-item-image-placeholder"></div><div class="articles-section-item-text" title="Paddle.js events reference">Paddle.js events reference</div><div class="articles-section-item-link"><a href="/paddlejs/events/overview">Read more<span role="img" aria-label="arrow-right" class="anticon anticon-arrow-right"><svg viewBox="64 64 896 896" focusable="false" data-icon="arrow-right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M869 487.8L491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-.7 5.2-2L869 536.2a32.07 32.07 0 000-48.4z"></path></svg></span></a></div></div></div></div><div class="markdown-context-menu-root"><div class="markdown-context-menu-container"><div class="markdown-context-menu-title">On this page</div><ul class="markdown-context-menu"><li class="markdown-context-menu-item markdown-context-menu-item-level-1"><a href="#build-an-overlay-checkout" title="Build an overlay checkout">Build an overlay checkout</a></li><li class="markdown-context-menu-item markdown-context-menu-item-level-2"><a href="#objectives" title="What are we building? ">What are we building? </a></li><li class="markdown-context-menu-item markdown-context-menu-item-level-2"><a href="#prerequisites" title="Before you begin ">Before you begin </a></li><li class="markdown-context-menu-item markdown-context-menu-item-level-3"><a href="#prerequisites-choose-implementation" title="Choose a type of checkout ">Choose a type of checkout </a></li><li class="markdown-context-menu-item markdown-context-menu-item-level-3"><a href="#prerequisites-create-product-price" title="Create products and prices ">Create products and prices </a></li><li class="markdown-context-menu-item markdown-context-menu-item-level-3"><a href="#prerequisites-default-payment-link" title="Set your default payment link ">Set your default payment link </a></li><li class="markdown-context-menu-item markdown-context-menu-item-level-2"><a href="##tutorial-steps" title="Get started ">Get started </a></li><li class="markdown-context-menu-item markdown-context-menu-item-level-2"><a href="#include-paddle-js" title="1. Include and initialize Paddle.js ">1. Include and initialize Paddle.js </a></li><li class="markdown-context-menu-item markdown-context-menu-item-level-3"><a href="#include-paddle-js-embed-script" title="Include Paddle.js script ">Include Paddle.js script </a></li><li class="markdown-context-menu-item markdown-context-menu-item-level-3"><a href="#include-paddle-js-environment" title="Set environment (optional) ">Set environment (optional) </a></li><li class="markdown-context-menu-item markdown-context-menu-item-level-3"><a href="#include-paddle-js-authenticate" title="Pass a client-side token ">Pass a client-side token </a></li><li class="markdown-context-menu-item markdown-context-menu-item-level-2"><a href="#add-checkout-trigger" title="2. Add an overlay checkout button ">2. Add an overlay checkout button </a></li><li class="markdown-context-menu-item markdown-context-menu-item-level-3"><a href="#add-checkout-trigger-create-button" title="Create checkout button element ">Create checkout button element </a></li><li class="markdown-context-menu-item markdown-context-menu-item-level-3"><a href="#add-checkout-trigger-add-trigger" title="Set as a checkout trigger ">Set as a checkout trigger </a></li><li class="markdown-context-menu-item markdown-context-menu-item-level-2"><a href="#test-payment" title="3. Take a test payment ">3. Take a test payment </a></li><li class="markdown-context-menu-item markdown-context-menu-item-level-2"><a href="#prefill-customer" title="4. Prefill customer information (optional) ">4. Prefill customer information (optional) </a></li><li class="markdown-context-menu-item markdown-context-menu-item-level-3"><a href="#prefill-customer-test" title="Test your work ">Test your work </a></li><li class="markdown-context-menu-item markdown-context-menu-item-level-2"><a href="#next-steps" title="Next steps ">Next steps </a></li><li class="markdown-context-menu-item markdown-context-menu-item-level-3"><a href="#next-steps-discount" title="Automatically apply a discount ">Automatically apply a discount </a></li><li class="markdown-context-menu-item markdown-context-menu-item-level-3"><a href="#extend-checkout-other" title="Pass checkout settings ">Pass checkout settings </a></li><li class="markdown-context-menu-item markdown-context-menu-item-level-3"><a href="#extend-checkout-success" title="Build a success workflow ">Build a success workflow </a></li></ul></div></div></div></div><div class="dev-docs-footer-root"><div class="dev-docs-footer-content"><div class="dev-docs-footer-email-section"><div class="dev-docs-footer-section-first-row"><div class="footer-subscribe-form-root"><h3>Sign up to get notified when our API evolves</h3><p>Absolutely no marketing emails, we promise.</p><div class="ant-space css-1me4733 ant-space-horizontal ant-space-align-start"><div class="ant-space-item" style="margin-right:10px"><div class="footer-subscribe-form-input-container"><span class="ant-input-affix-wrapper css-1me4733"><span class="ant-input-prefix"><span role="img" aria-label="mail" class="anticon anticon-mail"><svg viewBox="64 64 896 896" focusable="false" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span></span><input name="email" aria-label="Email Address" placeholder="Email address" class="ant-input css-1me4733" type="text" value=""/></span></div></div><div class="ant-space-item"><button type="button" class="ant-btn css-1me4733 ant-btn-primary dev-docs-button dev-docs-button-light"><span>Subscribe</span></button></div></div></div></div><div><div class="ant-space css-1me4733 ant-space-horizontal ant-space-align-center" style="flex-wrap:wrap;margin-bottom:-60px"><div class="ant-space-item" style="margin-right:60px;padding-bottom:60px"><a target="_blank" href="https://paddle.status.io/"><span><span class="dev-docs-footer-links-status dev-docs-footer-links-status-operational"></span><span>Status</span></span></a></div><div class="ant-space-item" style="margin-right:60px;padding-bottom:60px"><a target="_blank" href="https://www.paddle.com/">Paddle.com</a></div><div class="ant-space-item" style="margin-right:60px;padding-bottom:60px"><a target="_blank" href="https://security.paddle.com/">Security</a></div><div class="ant-space-item" style="padding-bottom:60px"><a href="/changelog/overview">Changelog</a></div></div></div></div><div class="dev-docs-footer-links-section"><div class="dev-docs-footer-section-first-row"><div class="ant-space css-1me4733 ant-space-vertical"><div class="ant-space-item" style="margin-bottom:41px"><img alt="Paddle Logo" loading="lazy" width="201" height="40" decoding="async" data-nimg="1" style="color:transparent" src="/logo-black.svg"/></div><div class="ant-space-item"><div class="ant-space css-1me4733 ant-space-horizontal ant-space-align-center dev-docs-footer-email-section-social-icons"><div class="ant-space-item" style="margin-right:20px"><a target="_blank" title="Twitter" href="https://twitter.com/PaddleHQ"><svg width="1200" height="1227" viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="black"></path></svg></a></div><div class="ant-space-item" style="margin-right:20px"><a target="_blank" title="LinkedIn" href="https://linkedin.com/company/paddle"><svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_2605_34752)"><path d="M28.6543 0H3.08984C1.86523 0 0.875 0.966797 0.875 2.16211V27.832C0.875 29.0273 1.86523 30 3.08984 30H28.6543C29.8789 30 30.875 29.0273 30.875 27.8379V2.16211C30.875 0.966797 29.8789 0 28.6543 0ZM9.77539 25.5645H5.32227V11.2441H9.77539V25.5645ZM7.54883 9.29297C6.11914 9.29297 4.96484 8.13867 4.96484 6.71484C4.96484 5.29102 6.11914 4.13672 7.54883 4.13672C8.97266 4.13672 10.127 5.29102 10.127 6.71484C10.127 8.13281 8.97266 9.29297 7.54883 9.29297ZM26.4395 25.5645H21.9922V18.6035C21.9922 16.9453 21.9629 14.8066 19.6777 14.8066C17.3633 14.8066 17.0117 16.6172 17.0117 18.4863V25.5645H12.5703V11.2441H16.8359V13.2012H16.8945C17.4863 12.0762 18.9395 10.8867 21.1016 10.8867C25.6074 10.8867 26.4395 13.8516 26.4395 17.707V25.5645Z" fill="url(#paint0_linear_2605_34752)"></path></g><defs><linearGradient id="paint0_linear_2605_34752" x1="29.0469" y1="-1.27659" x2="-3.62143" y2="10.081" gradientUnits="userSpaceOnUse"><stop stop-color="#202630"></stop><stop offset="1" stop-color="#0E1414"></stop></linearGradient><clipPath id="clip0_2605_34752"><rect width="30" height="30" fill="white" transform="translate(0.875)"></rect></clipPath></defs></svg></a></div><div class="ant-space-item"><a target="_blank" title="GitHub" href="https://github.com/PaddleHQ"><svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_2605_34751)"><path d="M15.9875 2.38477C8.25937 2.38164 2 8.63789 2 16.3598C2 22.466 5.91562 27.6566 11.3687 29.5629C12.1031 29.7473 11.9906 29.2254 11.9906 28.8691V26.4473C7.75 26.9441 7.57812 24.1379 7.29375 23.6691C6.71875 22.6879 5.35937 22.4379 5.76562 21.9691C6.73125 21.4723 7.71562 22.0941 8.85625 23.7785C9.68125 25.0004 11.2906 24.7941 12.1062 24.591C12.2844 23.8566 12.6656 23.2004 13.1906 22.691C8.79687 21.9035 6.96562 19.2223 6.96562 16.0348C6.96562 14.4879 7.475 13.066 8.475 11.9191C7.8375 10.0285 8.53437 8.40977 8.62812 8.16914C10.4437 8.00664 12.3312 9.46914 12.4781 9.58477C13.5094 9.30664 14.6875 9.15977 16.0062 9.15977C17.3312 9.15977 18.5125 9.31289 19.5531 9.59414C19.9062 9.32539 21.6562 8.06914 23.3437 8.22227C23.4344 8.46289 24.1156 10.0441 23.5156 11.9098C24.5281 13.0598 25.0437 14.4941 25.0437 16.0441C25.0437 19.2379 23.2 21.9223 18.7937 22.6973C19.1712 23.0684 19.4708 23.5111 19.6752 23.9993C19.8797 24.4876 19.9848 25.0117 19.9844 25.541V29.0566C20.0094 29.3379 19.9844 29.616 20.4531 29.616C25.9875 27.7504 29.9719 22.5223 29.9719 16.3629C29.9719 8.63789 23.7094 2.38477 15.9875 2.38477V2.38477Z" fill="url(#paint0_linear_2605_34751)"></path></g><defs><linearGradient id="paint0_linear_2605_34751" x1="29.0469" y1="2.32578" x2="-1.26401" y2="16.1512" gradientUnits="userSpaceOnUse"><stop stop-color="#202630"></stop><stop offset="1" stop-color="#0E1414"></stop></linearGradient><clipPath id="clip0_2605_34751"><rect width="30" height="30" fill="white" transform="translate(0.875)"></rect></clipPath></defs></svg></a></div></div></div></div></div><div><div class="ant-space css-1me4733 ant-space-horizontal ant-space-align-center" style="flex-wrap:wrap;margin-bottom:-22px"><div class="ant-space-item" style="margin-right:22px;padding-bottom:22px"><a target="_blank" href="https://www.paddle.com/legal/privacy">Privacy</a></div><div class="ant-space-item" style="margin-right:22px;padding-bottom:22px"><a target="_blank" href="https://www.paddle.com/legal/terms">Terms</a></div><div class="ant-space-item" style="padding-bottom:22px"><span class="dev-docs-footer-links-section-light-text">Paddle.com Market Ltd. © 2012—2024</span></div></div></div></div></div></div></div></div></div></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"title":"Build an overlay checkout","description":"Get a step-by-step overview of how to build a complete overlay checkout — including initializing Paddle.js, passing settings and items, prefilling customer information, and next steps.","lastUpdated":"","pageType":"api-reference","childProps":{"tocItems":[{"type":"item","title":"Overview","uri":"/index.md","slug":"overview"},{"type":"group","title":"Setup guides","slug":"checklist-fake-slug","items":[]},{"type":"item","title":"Setup checklist","uri":"/setup/set-up-checklist.md","slug":"onboarding/set-up-checklist"},{"type":"item","title":"Go-live checklist","uri":"/setup/go-live-checklist.md","slug":"onboarding/go-live-checklist"},{"type":"group","title":"Product catalog","slug":"products-build-fake-slug","items":[]},{"type":"item","title":"Create products and prices","uri":"/products/create-products-prices.md","slug":"products/create-products-prices"},{"type":"item","title":"Localize prices","uri":"/products/offer-localized-pricing.md","slug":"products/offer-localized-pricing"},{"type":"item","title":"Run promotions and discounts","uri":"/products/create-discounts-promotions.md","slug":"products/offer-discounts-promotions-coupons"},{"type":"group","title":"Tutorials","slug":"tutorials-fake-slug","items":[]},{"type":"item","title":"Build a pricing page","uri":"/sell/build-pricing-page.md","slug":"checkout/build-pricing-page"},{"type":"item","title":"Build an overlay checkout","uri":"/sell/checkout/build-overlay-checkout.md","slug":"checkout/build-overlay-checkout"},{"type":"item","title":"Build an inline checkout","uri":"/sell/checkout/build-inline-checkout.md","slug":"checkout/build-branded-inline-checkout"},{"type":"item","title":"Build and deploy a Next.js app","uri":"/vercel-starter-kit.md","slug":"nextjs-supabase-vercel-starter-kit"},{"type":"group","title":"Checkout","slug":"checkout-fake-slug","items":[]},{"type":"item","title":"Pass checkout settings","uri":"/sell/checkout/checkout-setup.md","slug":"checkout/set-up-checkout-default-settings"},{"type":"item","title":"Pass or update checkout items","uri":"/sell/checkout/work-with-checkout-items.md","slug":"checkout/pass-update-checkout-items"},{"type":"item","title":"Prefill checkout properties","uri":"/sell/checkout/prefill-checkout-properties.md","slug":"checkout/prefill-checkout-properties"},{"type":"item","title":"Handle checkout success","uri":"/sell/checkout/checkout-success.md","slug":"checkout/handle-success-post-checkout"},{"type":"item","title":"Present saved payment methods","uri":"/sell/checkout/saved-payment-methods.md","slug":"checkout/saved-payment-methods"},{"type":"item","title":"Brand inline checkout","uri":"/sell/checkout/customize-inline-checkout.md","slug":"checkout/brand-customize-inline-checkout"},{"type":"group","title":"Invoices","slug":"invoices-fake-slug","items":[]},{"type":"item","title":"Create and issue an invoice","uri":"/sell/invoices/create-issue-invoice.md","slug":"invoices/create-issue-invoices"},{"type":"item","title":"Cancel an invoice","uri":"/sell/invoices/cancel-invoice.md","slug":"invoices/cancel-invoices"},{"type":"group","title":"Transactions","slug":"transactions-fake-slug","items":[]},{"type":"item","title":"Create a transaction","uri":"/sell/transactions/create-transaction.md","slug":"transactions/create-transaction"},{"type":"item","title":"Set your default payment link","uri":"/sell/transactions/default-payment-link.md","slug":"transactions/default-payment-link"},{"type":"item","title":"Bill for non-catalog items","uri":"/sell/transactions/custom-prices.md","slug":"transactions/bill-create-custom-items-prices-products"},{"type":"item","title":"Pass a transaction to a checkout","uri":"/sell/transactions/transaction-checkout.md","slug":"transactions/pass-transaction-checkout"},{"type":"item","title":"Change collection mode","uri":"/sell/transactions/transaction-collection-mode.md","slug":"transactions/change-collection-mode-transaction"},{"type":"item","title":"Refund or credit a transaction","uri":"/sell/transactions/create-adjustment.md","slug":"transactions/create-transaction-adjustments"},{"type":"item","title":"Work with custom data","uri":"/sell/transactions/custom-data.md","slug":"transactions/custom-data"},{"type":"group","title":"Subscriptions","slug":"subscriptions-fake-slug","items":[]},{"type":"item","title":"Add or remove items","uri":"/subscriptions/add-remove-products.md","slug":"subscriptions/add-remove-products-prices-addons"},{"type":"item","title":"Upgrade or downgrade","uri":"/subscriptions/replace-products.md","slug":"subscriptions/replace-products-prices-upgrade-downgrade"},{"type":"item","title":"Bill for one-time charges","uri":"/subscriptions/create-one-time-charge.md","slug":"subscriptions/bill-add-one-time-charge"},{"type":"item","title":"Change billing dates","uri":"/subscriptions/change-billing-dates.md","slug":"subscriptions/change-billing-dates"},{"type":"item","title":"Update payment details","uri":"/subscriptions/update-payment-details.md","slug":"subscriptions/update-payment-details"},{"type":"item","title":"Pause a subscription","uri":"/subscriptions/pause-subscription.md","slug":"subscriptions/pause-subscriptions"},{"type":"item","title":"Cancel a subscription","uri":"/subscriptions/cancel-subscription.md","slug":"subscriptions/cancel-subscriptions"},{"type":"group","title":"Provisioning","items":[]},{"type":"item","title":"Provision your app","uri":"/lifecycle/overview.md","slug":"subscriptions/provision-access-webhooks"},{"type":"item","title":"Subscription creation","uri":"/lifecycle/new-subscription.md","slug":"lifecycle/subscription-creation"},{"type":"item","title":"Subscription renewal","uri":"/lifecycle/renew-subscription.md","slug":"lifecycle/subscription-renewal"},{"type":"item","title":"Subscription past due","uri":"/lifecycle/dunning.md","slug":"lifecycle/subscription-renewal-dunning"},{"type":"item","title":"Subscription pause or resume","uri":"/lifecycle/pause-resume-subscription.md","slug":"lifecycle/subscription-pause-resume"},{"type":"item","title":"Subscription cancellation","uri":"/lifecycle/cancel-subscription.md","slug":"lifecycle/subscription-cancellation"},{"type":"item","title":"Payment details update","uri":"/lifecycle/update-payment-method.md","slug":"lifecycle/payment-details-update"},{"type":"group","title":"Retain","slug":"retain-fake-slug","items":[]},{"type":"item","title":"Set up Retain","uri":"/retain/set-up-retain.md","slug":"retain/set-up-retain-profitwell"},{"type":"item","title":"Configure payment recovery","uri":"/retain/configure-payment-recovery.md","slug":"retain/configure-payment-recovery-dunning"},{"type":"item","title":"Build cancellation surveys","uri":"/retain/configure-cancellation-flows.md","slug":"retain/configure-cancellation-flows-surveys"},{"type":"item","title":"Proactively upgrade plans","uri":"/retain/configure-term-optimization.md","slug":"retain/configure-term-optimization-automatic-upgrades"},{"type":"group","title":"Trials","slug":"trials-fake-slug","items":[]},{"type":"item","title":"Work with trials","uri":"/subscriptions/work-with-trials.md","slug":"subscriptions/update-trials"},{"type":"item","title":"Extend or activate a trial","uri":"/subscriptions/change-trial-dates.md","slug":"subscriptions/extend-activate-change-date-trials"},{"type":"group","title":"Customers","slug":"customers-fake-slug","items":[]},{"type":"item","title":"Create or update a customer","uri":"/customers/create-update-customers.md","slug":"customers/create-update-customers"},{"type":"item","title":"Work with credit balances","uri":"/customers/credit-balances.md","slug":"customers/get-customer-credit-balances"},{"type":"item","title":"Get customer portal links","uri":"/customers/customer-portal.md","slug":"customers/integrate-customer-portal"},{"type":"group","title":"Reporting","slug":"admin-fake-slug","items":[]},{"type":"item","title":"Generate reports","uri":"/finance/generate-reports.md","slug":"finance/generate-reports"}],"pageContent":"{\"$$mdtype\":\"Tag\",\"name\":\"Fragment\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Heading\",\"attributes\":{\"level\":1,\"id\":\"build-an-overlay-checkout\"},\"children\":[\"Build an overlay checkout\"]},{\"$$mdtype\":\"Tag\",\"name\":\"PageSummary\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"Get a step-by-step overview of how to build a complete overlay checkout — including initializing Paddle.js, passing settings and items, prefilling customer information, and next steps.\"]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"The checkout is where customers make purchases. For SaaS businesses, it's the process where customers enter their details and payment information, and confirm that they'd like to sign up for a subscription with you.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"You can use \",{\"$$mdtype\":\"Tag\",\"name\":\"Link\",\"attributes\":{\"href\":\"/paddlejs/overview\"},\"children\":[\"Paddle.js\"]},\" to quickly add an overlay checkout into your app. \",{\"$$mdtype\":\"Tag\",\"name\":\"Link\",\"attributes\":{\"href\":\"/concepts/sell/overlay-checkout\"},\"children\":[\"Overlay checkout\"]},\" lets you present customers with an overlay that handles all parts of the checkout process — minimal frontend coding required.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Callout\",\"attributes\":{\"type\":\"neutral\"},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Heading\",\"attributes\":{\"level\":4,\"id\":\"grab-the-code-and-test-using-codepen\"},\"children\":[\"Grab the code and test using CodePen\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"CodePen is a platform for building and sharing frontend code. Explore the code for this tutorial and test right away using our overlay checkout pen.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Button\",\"attributes\":{\"type\":\"default\",\"link\":\"https://codepen.io/heymcgovern/pen/wvZMmGq\",\"text\":\"View on Codepen\",\"variant\":\"light\"},\"children\":[]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Heading\",\"attributes\":{\"id\":\"objectives\",\"level\":2},\"children\":[\"What are we building? \"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"In this tutorial, we'll launch a multi-page overlay checkout for two items in our product catalog, then we'll extend it by passing customer information.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"DefaultImage\",\"attributes\":{\"src\":\"/assets/images/checkout-overlay-checkout-hero-20230831.svg\",\"alt\":\"Illustration of an overlay checkout. The payment method form is open, with buttons for Apple Pay and PayPal along with the card details form underneath. The items list shows one item for 'Professional plan', with tax and totals underneath. The total overall is $3600, displayed at the top-left of the checkout.\"},\"children\":[]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"We'll learn how to:\"]},{\"$$mdtype\":\"Tag\",\"name\":\"List\",\"attributes\":{\"ordered\":false},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[\"Include and set up Paddle.js using a client-side token\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[\"Pass items to overlay checkout using \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"Paddle.Checkout.open()\"},\"children\":[]},\" or HTML data attributes\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[\"Take a test payment\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[\"Prefill customer information using \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"Paddle.Checkout.open()\"},\"children\":[]},\" or HTML data attributes\"]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"If you like, you can copy-paste the sample code in your editor or \",{\"$$mdtype\":\"Tag\",\"name\":\"Link\",\"attributes\":{\"href\":\"https://codepen.io/heymcgovern/pen/wvZMmGq\"},\"children\":[\"view on CodePen\"]},\" and follow along.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Accordion\",\"attributes\":{\"variant\":\"default\"},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"AccordionItem\",\"attributes\":{\"title\":\"Sample code\",\"key\":\"sample-code\"},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Section\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Fence\",\"attributes\":{\"content\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\" color-mode=\\\"user\\\"\u003e\\n\u003chead\u003e\\n \u003ctitle\u003eOverlay checkout demo\u003c/title\u003e\\n \u003cmeta charset=\\\"utf-8\\\"\u003e\\n \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1\\\"\u003e\\n \u003cscript src=\\\"https://cdn.paddle.com/paddle/v2/paddle.js\\\"\u003e\u003c/script\u003e\\n \u003cstyle\u003e\\n .page-container {\\n max-width: 900px;\\n margin: auto;\\n text-align: center;\\n margin-top: 2em;\\n padding-left: 1em;\\n padding-right: 1em;\\n }\\n .grid {\\n display: block;\\n margin-bottom: 1em;\\n }\\n .grid \u003e * {\\n padding: 1rem;\\n }\\n @media (min-width: 768px) {\\n .grid {\\n display: grid;\\n grid-auto-rows: 1fr;\\n grid-template-columns: 1fr 1fr;\\n }\\n }\\n \u003c/style\u003e\\n \u003c!-- MVP.css: https://andybrewer.github.io/mvp/ --\u003e\\n \u003clink rel=\\\"stylesheet\\\" href=\\\"https://unpkg.com/mvp.css@1.12.0/mvp.css\\\" media=\\\"print\\\" onload=\\\"this.media='all'\\\"\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n \u003cdiv class=\\\"page-container\\\"\u003e\\n \u003ch1\u003eSign up now\u003c/h1\u003e\\n \u003cdiv class=\\\"grid\\\"\u003e\\n \u003cdiv\u003e\\n \u003ch3\u003e\u003ccode\u003ePaddle.Checkout.open()\u003c/code\u003e\u003c/h3\u003e\\n \u003ca href=\\\"#\\\" onclick=\\\"openCheckout(itemsList)\\\"\u003e\u003cb\u003eSign up now\u003c/b\u003e\u003c/a\u003e\\n \u003c/div\u003e\\n \u003cdiv\u003e\\n \u003ch3\u003eHTML data attributes\u003c/h3\u003e\\n \u003ctable\u003e\\n \u003ctr\u003e\\n \u003ctd\u003e\u003ccode\u003edata-theme=\\\"light\\\"\u003c/code\u003e\u003c/td\u003e\\n \u003ctd\u003e\\n \u003ca class=\\\"paddle_button\\\" data-theme=\\\"light\\\" data-items='[{\\\"priceId\\\": \\\"pri_01gsz8ntc6z7npqqp6j4ys0w1w\\\",\\\"quantity\\\": 5},{\\\"priceId\\\": \\\"pri_01h1vjfevh5etwq3rb416a23h2\\\",\\\"quantity\\\": 1}]' href=\\\"#\\\"\u003e\\n Sign up now\\n \u003c/a\u003e\\n \u003c/td\u003e\\n \u003c/tr\u003e\\n \u003ctr\u003e\\n \u003ctd\u003e\u003ccode\u003edata-theme=\\\"dark\\\"\u003c/code\u003e\u003c/td\u003e\\n \u003ctd\u003e\\n \u003ca class=\\\"paddle_button\\\" data-theme=\\\"dark\\\" data-items='[{\\\"priceId\\\": \\\"pri_01gsz8ntc6z7npqqp6j4ys0w1w\\\",\\\"quantity\\\": 5},{\\\"priceId\\\": \\\"pri_01h1vjfevh5etwq3rb416a23h2\\\",\\\"quantity\\\": 1}]' href=\\\"#\\\"\u003e\\n Sign up now\\n \u003c/a\u003e\\n \u003c/td\u003e\\n \u003c/tr\u003e\\n \u003ctr\u003e\\n \u003ctd\u003eNo \u003ccode\u003edata-theme\u003c/code\u003e\u003c/td\u003e\\n \u003ctd\u003e\\n \u003ca class=\\\"paddle_button\\\" data-items='[{\\\"priceId\\\": \\\"pri_01gsz8ntc6z7npqqp6j4ys0w1w\\\",\\\"quantity\\\": 5},{\\\"priceId\\\": \\\"pri_01h1vjfevh5etwq3rb416a23h2\\\",\\\"quantity\\\": 1}]' href=\\\"#\\\"\u003e\\n Sign up now\\n \u003c/a\u003e\\n \u003c/td\u003e\\n \u003c/tr\u003e\\n \u003c/table\u003e\\n \u003c/div\u003e\\n \u003c/div\u003e\\n \u003ch2\u003ePrefilled customer information\u003c/h2\u003e\\n \u003cdiv class=\\\"grid\\\"\u003e\\n \u003cdiv\u003e\\n \u003ch3\u003e\u003ccode\u003ePaddle.Checkout.open()\u003c/code\u003e\u003c/h3\u003e\\n \u003ca href=\\\"#\\\" onclick=\\\"openCheckout(itemsList, customerInfo)\\\"\u003e\u003cb\u003eSign up now\u003c/b\u003e\u003c/a\u003e\\n \u003c/div\u003e\\n \u003cdiv\u003e\\n \u003ch3\u003eHTML data attributes\u003c/h3\u003e\\n \u003ctable\u003e\\n \u003ctr\u003e\\n \u003ctd\u003e\u003ccode\u003edata-theme=\\\"light\\\"\u003c/code\u003e\u003c/td\u003e\\n \u003ctd\u003e\\n \u003ca class=\\\"paddle_button\\\" data-theme=\\\"light\\\" data-items='[{\\\"priceId\\\": \\\"pri_01gsz8ntc6z7npqqp6j4ys0w1w\\\",\\\"quantity\\\": 5},{\\\"priceId\\\": \\\"pri_01h1vjfevh5etwq3rb416a23h2\\\",\\\"quantity\\\": 1}]' data-customer-email=\\\"sam@example.com\\\" data-customer-address-country-code=\\\"US\\\" data-customer-address-postal-code=\\\"10021\\\" href=\\\"#\\\"\u003e\\n Sign up now\\n \u003c/a\u003e\\n \u003c/td\u003e\\n \u003c/tr\u003e\\n \u003ctr\u003e\\n \u003ctd\u003e\u003ccode\u003edata-theme=\\\"dark\\\"\u003c/code\u003e\u003c/td\u003e\\n \u003ctd\u003e\\n \u003ca class=\\\"paddle_button\\\" data-theme=\\\"dark\\\" data-items='[{\\\"priceId\\\": \\\"pri_01gsz8ntc6z7npqqp6j4ys0w1w\\\",\\\"quantity\\\": 5},{\\\"priceId\\\": \\\"pri_01h1vjfevh5etwq3rb416a23h2\\\",\\\"quantity\\\": 1}]' data-customer-email=\\\"sam@example.com\\\" data-customer-address-country-code=\\\"US\\\" data-customer-address-postal-code=\\\"10021\\\" href=\\\"#\\\"\u003e\\n Sign up now\\n \u003c/a\u003e\\n \u003c/td\u003e\\n \u003c/tr\u003e\\n \u003ctr\u003e\\n \u003ctd\u003eNo \u003ccode\u003edata-theme\u003c/code\u003e\u003c/td\u003e\\n \u003ctd\u003e\\n \u003ca class=\\\"paddle_button\\\" data-items='[{\\\"priceId\\\": \\\"pri_01gsz8ntc6z7npqqp6j4ys0w1w\\\",\\\"quantity\\\": 5},{\\\"priceId\\\": \\\"pri_01h1vjfevh5etwq3rb416a23h2\\\",\\\"quantity\\\": 1}]' data-customer-email=\\\"sam@example.com\\\" data-customer-address-country-code=\\\"US\\\" data-customer-address-postal-code=\\\"10021\\\" href=\\\"#\\\"\u003e\\n Sign up now\\n \u003c/a\u003e\\n \u003c/td\u003e\\n \u003c/tr\u003e\\n \u003c/table\u003e\\n \u003c/div\u003e\\n \u003c/div\u003e\\n \u003c/div\u003e\\n \u003cfooter\u003e\\n \u003chr\u003e\\n \u003cp\u003e\u003csmall\u003e\\n For the tutorial, check out:\\n \u003ca href=\\\"https://developer.paddle.com/build/checkout/build-overlay-checkout\\\"\u003eBuild an overlay checkout\u003c/a\u003e -\\n \u003ca href=\\\"https://developer.paddle.com/\\\"\u003e\\n developer.paddle.com\\n \u003c/a\u003e\\n \u003c/small\u003e\u003c/p\u003e\\n \u003c/footer\u003e\\n\u003c/body\u003e\\n\u003cscript type=\\\"text/javascript\\\"\u003e\\n Paddle.Environment.set(\\\"sandbox\\\");\\n Paddle.Initialize({\\n token: \\\"test_7d279f61a3499fed520f7cd8c08\\\", // replace with a client-side token\\n // prints events to console for debugging\\n eventCallback: function(data) {\\n console.log(data);\\n }\\n });\\n\\n // define items\\n let itemsList = [\\n {\\n priceId: \\\"pri_01gsz8ntc6z7npqqp6j4ys0w1w\\\",\\n quantity: 5\\n },\\n {\\n priceId: \\\"pri_01h1vjfevh5etwq3rb416a23h2\\\",\\n quantity: 1\\n }\\n ];\\n\\n // define customer details\\n let customerInfo = {\\n email: \\\"sam@example.com\\\",\\n address: {\\n countryCode: \\\"US\\\",\\n postalCode: \\\"10021\\\"\\n }\\n }\\n\\n // open checkout\\n function openCheckout(items, customer){\\n Paddle.Checkout.open({\\n items: items,\\n customer: customer\\n });\\n }\\n\u003c/script\u003e\\n\u003c/html\u003e\\n\",\"language\":\"html\"},\"children\":[\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\" color-mode=\\\"user\\\"\u003e\\n\u003chead\u003e\\n \u003ctitle\u003eOverlay checkout demo\u003c/title\u003e\\n \u003cmeta charset=\\\"utf-8\\\"\u003e\\n \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1\\\"\u003e\\n \u003cscript src=\\\"https://cdn.paddle.com/paddle/v2/paddle.js\\\"\u003e\u003c/script\u003e\\n \u003cstyle\u003e\\n .page-container {\\n max-width: 900px;\\n margin: auto;\\n text-align: center;\\n margin-top: 2em;\\n padding-left: 1em;\\n padding-right: 1em;\\n }\\n .grid {\\n display: block;\\n margin-bottom: 1em;\\n }\\n .grid \u003e * {\\n padding: 1rem;\\n }\\n @media (min-width: 768px) {\\n .grid {\\n display: grid;\\n grid-auto-rows: 1fr;\\n grid-template-columns: 1fr 1fr;\\n }\\n }\\n \u003c/style\u003e\\n \u003c!-- MVP.css: https://andybrewer.github.io/mvp/ --\u003e\\n \u003clink rel=\\\"stylesheet\\\" href=\\\"https://unpkg.com/mvp.css@1.12.0/mvp.css\\\" media=\\\"print\\\" onload=\\\"this.media='all'\\\"\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n \u003cdiv class=\\\"page-container\\\"\u003e\\n \u003ch1\u003eSign up now\u003c/h1\u003e\\n \u003cdiv class=\\\"grid\\\"\u003e\\n \u003cdiv\u003e\\n \u003ch3\u003e\u003ccode\u003ePaddle.Checkout.open()\u003c/code\u003e\u003c/h3\u003e\\n \u003ca href=\\\"#\\\" onclick=\\\"openCheckout(itemsList)\\\"\u003e\u003cb\u003eSign up now\u003c/b\u003e\u003c/a\u003e\\n \u003c/div\u003e\\n \u003cdiv\u003e\\n \u003ch3\u003eHTML data attributes\u003c/h3\u003e\\n \u003ctable\u003e\\n \u003ctr\u003e\\n \u003ctd\u003e\u003ccode\u003edata-theme=\\\"light\\\"\u003c/code\u003e\u003c/td\u003e\\n \u003ctd\u003e\\n \u003ca class=\\\"paddle_button\\\" data-theme=\\\"light\\\" data-items='[{\\\"priceId\\\": \\\"pri_01gsz8ntc6z7npqqp6j4ys0w1w\\\",\\\"quantity\\\": 5},{\\\"priceId\\\": \\\"pri_01h1vjfevh5etwq3rb416a23h2\\\",\\\"quantity\\\": 1}]' href=\\\"#\\\"\u003e\\n Sign up now\\n \u003c/a\u003e\\n \u003c/td\u003e\\n \u003c/tr\u003e\\n \u003ctr\u003e\\n \u003ctd\u003e\u003ccode\u003edata-theme=\\\"dark\\\"\u003c/code\u003e\u003c/td\u003e\\n \u003ctd\u003e\\n \u003ca class=\\\"paddle_button\\\" data-theme=\\\"dark\\\" data-items='[{\\\"priceId\\\": \\\"pri_01gsz8ntc6z7npqqp6j4ys0w1w\\\",\\\"quantity\\\": 5},{\\\"priceId\\\": \\\"pri_01h1vjfevh5etwq3rb416a23h2\\\",\\\"quantity\\\": 1}]' href=\\\"#\\\"\u003e\\n Sign up now\\n \u003c/a\u003e\\n \u003c/td\u003e\\n \u003c/tr\u003e\\n \u003ctr\u003e\\n \u003ctd\u003eNo \u003ccode\u003edata-theme\u003c/code\u003e\u003c/td\u003e\\n \u003ctd\u003e\\n \u003ca class=\\\"paddle_button\\\" data-items='[{\\\"priceId\\\": \\\"pri_01gsz8ntc6z7npqqp6j4ys0w1w\\\",\\\"quantity\\\": 5},{\\\"priceId\\\": \\\"pri_01h1vjfevh5etwq3rb416a23h2\\\",\\\"quantity\\\": 1}]' href=\\\"#\\\"\u003e\\n Sign up now\\n \u003c/a\u003e\\n \u003c/td\u003e\\n \u003c/tr\u003e\\n \u003c/table\u003e\\n \u003c/div\u003e\\n \u003c/div\u003e\\n \u003ch2\u003ePrefilled customer information\u003c/h2\u003e\\n \u003cdiv class=\\\"grid\\\"\u003e\\n \u003cdiv\u003e\\n \u003ch3\u003e\u003ccode\u003ePaddle.Checkout.open()\u003c/code\u003e\u003c/h3\u003e\\n \u003ca href=\\\"#\\\" onclick=\\\"openCheckout(itemsList, customerInfo)\\\"\u003e\u003cb\u003eSign up now\u003c/b\u003e\u003c/a\u003e\\n \u003c/div\u003e\\n \u003cdiv\u003e\\n \u003ch3\u003eHTML data attributes\u003c/h3\u003e\\n \u003ctable\u003e\\n \u003ctr\u003e\\n \u003ctd\u003e\u003ccode\u003edata-theme=\\\"light\\\"\u003c/code\u003e\u003c/td\u003e\\n \u003ctd\u003e\\n \u003ca class=\\\"paddle_button\\\" data-theme=\\\"light\\\" data-items='[{\\\"priceId\\\": \\\"pri_01gsz8ntc6z7npqqp6j4ys0w1w\\\",\\\"quantity\\\": 5},{\\\"priceId\\\": \\\"pri_01h1vjfevh5etwq3rb416a23h2\\\",\\\"quantity\\\": 1}]' data-customer-email=\\\"sam@example.com\\\" data-customer-address-country-code=\\\"US\\\" data-customer-address-postal-code=\\\"10021\\\" href=\\\"#\\\"\u003e\\n Sign up now\\n \u003c/a\u003e\\n \u003c/td\u003e\\n \u003c/tr\u003e\\n \u003ctr\u003e\\n \u003ctd\u003e\u003ccode\u003edata-theme=\\\"dark\\\"\u003c/code\u003e\u003c/td\u003e\\n \u003ctd\u003e\\n \u003ca class=\\\"paddle_button\\\" data-theme=\\\"dark\\\" data-items='[{\\\"priceId\\\": \\\"pri_01gsz8ntc6z7npqqp6j4ys0w1w\\\",\\\"quantity\\\": 5},{\\\"priceId\\\": \\\"pri_01h1vjfevh5etwq3rb416a23h2\\\",\\\"quantity\\\": 1}]' data-customer-email=\\\"sam@example.com\\\" data-customer-address-country-code=\\\"US\\\" data-customer-address-postal-code=\\\"10021\\\" href=\\\"#\\\"\u003e\\n Sign up now\\n \u003c/a\u003e\\n \u003c/td\u003e\\n \u003c/tr\u003e\\n \u003ctr\u003e\\n \u003ctd\u003eNo \u003ccode\u003edata-theme\u003c/code\u003e\u003c/td\u003e\\n \u003ctd\u003e\\n \u003ca class=\\\"paddle_button\\\" data-items='[{\\\"priceId\\\": \\\"pri_01gsz8ntc6z7npqqp6j4ys0w1w\\\",\\\"quantity\\\": 5},{\\\"priceId\\\": \\\"pri_01h1vjfevh5etwq3rb416a23h2\\\",\\\"quantity\\\": 1}]' data-customer-email=\\\"sam@example.com\\\" data-customer-address-country-code=\\\"US\\\" data-customer-address-postal-code=\\\"10021\\\" href=\\\"#\\\"\u003e\\n Sign up now\\n \u003c/a\u003e\\n \u003c/td\u003e\\n \u003c/tr\u003e\\n \u003c/table\u003e\\n \u003c/div\u003e\\n \u003c/div\u003e\\n \u003c/div\u003e\\n \u003cfooter\u003e\\n \u003chr\u003e\\n \u003cp\u003e\u003csmall\u003e\\n For the tutorial, check out:\\n \u003ca href=\\\"https://developer.paddle.com/build/checkout/build-overlay-checkout\\\"\u003eBuild an overlay checkout\u003c/a\u003e -\\n \u003ca href=\\\"https://developer.paddle.com/\\\"\u003e\\n developer.paddle.com\\n \u003c/a\u003e\\n \u003c/small\u003e\u003c/p\u003e\\n \u003c/footer\u003e\\n\u003c/body\u003e\\n\u003cscript type=\\\"text/javascript\\\"\u003e\\n Paddle.Environment.set(\\\"sandbox\\\");\\n Paddle.Initialize({\\n token: \\\"test_7d279f61a3499fed520f7cd8c08\\\", // replace with a client-side token\\n // prints events to console for debugging\\n eventCallback: function(data) {\\n console.log(data);\\n }\\n });\\n\\n // define items\\n let itemsList = [\\n {\\n priceId: \\\"pri_01gsz8ntc6z7npqqp6j4ys0w1w\\\",\\n quantity: 5\\n },\\n {\\n priceId: \\\"pri_01h1vjfevh5etwq3rb416a23h2\\\",\\n quantity: 1\\n }\\n ];\\n\\n // define customer details\\n let customerInfo = {\\n email: \\\"sam@example.com\\\",\\n address: {\\n countryCode: \\\"US\\\",\\n postalCode: \\\"10021\\\"\\n }\\n }\\n\\n // open checkout\\n function openCheckout(items, customer){\\n Paddle.Checkout.open({\\n items: items,\\n customer: customer\\n });\\n }\\n\u003c/script\u003e\\n\u003c/html\u003e\\n\"]}]}]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Heading\",\"attributes\":{\"id\":\"prerequisites\",\"level\":2},\"children\":[\"Before you begin \"]},{\"$$mdtype\":\"Tag\",\"name\":\"Heading\",\"attributes\":{\"id\":\"prerequisites-choose-implementation\",\"level\":3},\"children\":[\"Choose a type of checkout \"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"This tutorial walks through creating an \",{\"$$mdtype\":\"Tag\",\"name\":\"Link\",\"attributes\":{\"href\":\"/concepts/sell/overlay-checkout\"},\"children\":[\"overlay checkout\"]},\". You can also create \",{\"$$mdtype\":\"Tag\",\"name\":\"Link\",\"attributes\":{\"href\":\"/concepts/sell/branded-integrated-inline-checkout\"},\"children\":[\"inline checkouts\"]},\", which lets you build Paddle Checkout right into your app or website.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"We recommend building an overlay checkout if you're new to Paddle. Inline checkouts use the same JavaScript methods as overlay checkouts, so you can switch to an inline checkout later.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Accordion\",\"attributes\":{\"variant\":\"default\"},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"AccordionItem\",\"attributes\":{\"title\":\"Types of checkout\",\"key\":\"checkout-types\"},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"MultiColumnLayout\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"MultiColumnLayoutCell\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Heading\",\"attributes\":{\"id\":\"prerequisites-choose-implementation-overlay\",\"level\":4},\"children\":[\"Overlay checkout \"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"Integrate Paddle in just a few lines of code. Launches an overlay to capture payment.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"DefaultImage\",\"attributes\":{\"src\":\"/assets/images/checkout-overlay-checkout-overview-20230824.svg\",\"alt\":\"Illustration showing an overlay checkout. The items summary is simplified, showing gray boxes to illustrate items and totals. The right-hand side of the overlay checkout shows the payment form, with buttons for Apple Pay, PayPal, and the card details entry form.\"},\"children\":[]}]}]},{\"$$mdtype\":\"Tag\",\"name\":\"MultiColumnLayoutCell\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Heading\",\"attributes\":{\"id\":\"prerequisites-choose-implementation-inline\",\"level\":4},\"children\":[\"Inline checkout \"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"Get complete control of the checkout experience. Captures payment directly in your app.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"DefaultImage\",\"attributes\":{\"src\":\"/assets/images/checkout-inline-checkout-overview-20230824.svg\",\"alt\":\"Illustration showing an inline checkout. The inline checkout frame shows the payment form, and is in crop-marks on the left to show where it's been embedded. The items list is on the right with a total at the top.\"},\"children\":[]}]}]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"Learn more about the differences between overlay and inline checkouts: \",{\"$$mdtype\":\"Tag\",\"name\":\"Link\",\"attributes\":{\"href\":\"/concepts/sell/self-serve-checkout\"},\"children\":[\"Paddle Checkout\"]}]}]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Heading\",\"attributes\":{\"id\":\"prerequisites-create-product-price\",\"level\":3},\"children\":[\"Create products and prices \"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"Paddle Checkout works with products and prices to say what you're billing for, so you'll need to \",{\"$$mdtype\":\"Tag\",\"name\":\"Link\",\"attributes\":{\"href\":\"/build/checkout/build-branded-inline-checkout\"},\"children\":[\"create a product and at least one related price\"]},\" to pass to your checkout.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Heading\",\"attributes\":{\"id\":\"prerequisites-default-payment-link\",\"level\":3},\"children\":[\"Set your default payment link \"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"You'll also need to:\"]},{\"$$mdtype\":\"Tag\",\"name\":\"List\",\"attributes\":{\"ordered\":false},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Link\",\"attributes\":{\"href\":\"/build/transactions/default-payment-link\"},\"children\":[\"Set your default payment link\"]},\" under \",{\"$$mdtype\":\"Tag\",\"name\":\"strong\",\"attributes\":{},\"children\":[\"Paddle \u003e Checkout \u003e Checkout settings \u003e Default payment link\"]},\".\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[\"Get your default payment link domain approved, if you're working with the live environment.\"]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Callout\",\"attributes\":{\"type\":\"info\"},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"We recommend starting the domain approval early in your integration process, so your domains are approved for when you're ready to go-live.\"]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Heading\",\"attributes\":{\"id\":\"#tutorial-steps\",\"level\":2},\"children\":[\"Get started \"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"Add an overlay checkout to your website or app in four steps:\"]},{\"$$mdtype\":\"Tag\",\"name\":\"List\",\"attributes\":{\"ordered\":true},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Link\",\"attributes\":{\"href\":\"#include-paddle-js\"},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"strong\",\"attributes\":{},\"children\":[\"Include and initialize Paddle.js\"]}]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"Add Paddle.js to your app or website, so you can securely capture payment information and build subscription billing experiences.\"]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Link\",\"attributes\":{\"href\":\"#add-checkout-trigger\"},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"strong\",\"attributes\":{},\"children\":[\"Add an overlay checkout button\"]}]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"Set any element on your page as a trigger for Paddle Checkout.\"]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Link\",\"attributes\":{\"href\":\"#test-payment\"},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"strong\",\"attributes\":{},\"children\":[\"Take a test payment\"]}]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"Make sure that your checkout loads successfully, then take a test payment.\"]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Link\",\"attributes\":{\"href\":\"#prefill-customer\"},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"strong\",\"attributes\":{},\"children\":[\"Prefill customer information\"]},\" — optional\"]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"Extend your checkout by prefilling customer and address information.\"]}]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Heading\",\"attributes\":{\"id\":\"include-paddle-js\",\"level\":2},\"children\":[\"1. Include and initialize Paddle.js \"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Link\",\"attributes\":{\"href\":\"/paddlejs/overview\"},\"children\":[\"Paddle.js\"]},\" is a lightweight JavaScript library that lets you build rich, integrated subscription billing experiences using Paddle. We can use Paddle.js to securely work with products and prices in our Paddle system, as well as opening checkouts and capturing payment information.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Heading\",\"attributes\":{\"id\":\"include-paddle-js-embed-script\",\"level\":3},\"children\":[\"Include Paddle.js script \"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"Start with a blank webpage, or an existing page on your website. Then, \",{\"$$mdtype\":\"Tag\",\"name\":\"Link\",\"attributes\":{\"href\":\"/paddlejs/include-paddlejs\"},\"children\":[\"include Paddle.js\"]},\" by adding this script to the \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"\u003chead\u003e\"},\"children\":[]},\":\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Fence\",\"attributes\":{\"content\":\"\u003cscript src=\\\"https://cdn.paddle.com/paddle/v2/paddle.js\\\"\u003e\u003c/script\u003e\\n\",\"language\":\"html\",\"showLineNumbers\":false},\"children\":[\"\u003cscript src=\\\"https://cdn.paddle.com/paddle/v2/paddle.js\\\"\u003e\u003c/script\u003e\\n\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Heading\",\"attributes\":{\"id\":\"include-paddle-js-environment\",\"level\":3},\"children\":[\"Set environment (optional) \"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"We recommend \",{\"$$mdtype\":\"Tag\",\"name\":\"Link\",\"attributes\":{\"href\":\"https://sandbox-login.paddle.com/signup?utm_source=dx\u0026utm_medium=dev-docs\"},\"children\":[\"signing up for a sandbox account\"]},\" to test and build your integration, then switching to a live account later when you're ready to go live.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"If you're testing with the sandbox, call \",{\"$$mdtype\":\"Tag\",\"name\":\"Link\",\"attributes\":{\"href\":\"/paddlejs/methods/paddle-environment-set\"},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"Paddle.Environment.set()\"},\"children\":[]}]},\" and set your environment to \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"sandbox\"},\"children\":[]},\":\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Fence\",\"attributes\":{\"content\":\"\u003cscript src=\\\"https://cdn.paddle.com/paddle/v2/paddle.js\\\"\u003e\u003c/script\u003e\\n\u003cscript type=\\\"text/javascript\\\"\u003e\\n Paddle.Environment.set(\\\"sandbox\\\");\\n\u003c/script\u003e\\n\",\"language\":\"html\",\"highlight\":\"3\"},\"children\":[\"\u003cscript src=\\\"https://cdn.paddle.com/paddle/v2/paddle.js\\\"\u003e\u003c/script\u003e\\n\u003cscript type=\\\"text/javascript\\\"\u003e\\n Paddle.Environment.set(\\\"sandbox\\\");\\n\u003c/script\u003e\\n\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Heading\",\"attributes\":{\"id\":\"include-paddle-js-authenticate\",\"level\":3},\"children\":[\"Pass a client-side token \"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"Next, go to \",{\"$$mdtype\":\"Tag\",\"name\":\"strong\",\"attributes\":{},\"children\":[\"Paddle \u003e Developer tools \u003e Authentication\"]},\" and generate a client-side token. \",{\"$$mdtype\":\"Tag\",\"name\":\"Link\",\"attributes\":{\"href\":\"/api-reference/about/authentication#authentication-methods\"},\"children\":[\"Client-side tokens\"]},\" let you interact with the Paddle platform in frontend code, like webpages or mobile apps. They have limited access to the data in your system, so they're safe to publish.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"In your page, call \",{\"$$mdtype\":\"Tag\",\"name\":\"Link\",\"attributes\":{\"href\":\"/paddlejs/methods/paddle-initialize\"},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"Paddle.Initialize()\"},\"children\":[]}]},\" and pass your client-side token as \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"token\"},\"children\":[]},\". For best performance, do this just after calling \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"Paddle.Environment.set()\"},\"children\":[]},\", like this:\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Fence\",\"attributes\":{\"content\":\"\u003cscript src=\\\"https://cdn.paddle.com/paddle/v2/paddle.js\\\"\u003e\u003c/script\u003e\\n\u003cscript type=\\\"text/javascript\\\"\u003e\\n Paddle.Environment.set(\\\"sandbox\\\");\\n Paddle.Initialize({ \\n token: \\\"test_7d279f61a3499fed520f7cd8c08\\\" // replace with a client-side token\\n });\\n\u003c/script\u003e\\n\",\"language\":\"html\",\"highlight\":\"3-5\"},\"children\":[\"\u003cscript src=\\\"https://cdn.paddle.com/paddle/v2/paddle.js\\\"\u003e\u003c/script\u003e\\n\u003cscript type=\\\"text/javascript\\\"\u003e\\n Paddle.Environment.set(\\\"sandbox\\\");\\n Paddle.Initialize({ \\n token: \\\"test_7d279f61a3499fed520f7cd8c08\\\" // replace with a client-side token\\n });\\n\u003c/script\u003e\\n\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Callout\",\"attributes\":{\"type\":\"info\"},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"Client-side tokens are separate for your sandbox and live accounts. You'll need to generate a new client-side token for your live account. Sandbox tokens start with \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"test_\"},\"children\":[]},\" to make them easy to distinguish.\"]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Heading\",\"attributes\":{\"id\":\"add-checkout-trigger\",\"level\":2},\"children\":[\"2. Add an overlay checkout button \"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"Next, we'll set an element on our page as a trigger for our overlay checkout. Overlay checkout works by presenting an overlay to handle the entire checkout process. When our button or other trigger element is clicked, Paddle.js launches a checkout for us.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Heading\",\"attributes\":{\"id\":\"add-checkout-trigger-create-button\",\"level\":3},\"children\":[\"Create checkout button element \"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"Any element can be a trigger for an overlay checkout. In our sample, we're using a link (\",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"\u003ca\u003e\"},\"children\":[]},\") that points to \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"#\"},\"children\":[]},\". This means it doesn't open a new page.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Fence\",\"attributes\":{\"content\":\"\u003ca href='#'\u003eSign up now\u003c/a\u003e\\n\",\"language\":\"html\"},\"children\":[\"\u003ca href='#'\u003eSign up now\u003c/a\u003e\\n\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Heading\",\"attributes\":{\"id\":\"add-checkout-trigger-add-trigger\",\"level\":3},\"children\":[\"Set as a checkout trigger \"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"Next, we'll make our checkout element open an overlay checkout by making it a trigger.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"There are two ways we can do this:\"]},{\"$$mdtype\":\"Tag\",\"name\":\"MultiColumnLayout\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"MultiColumnLayoutCell\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Heading\",\"attributes\":{\"level\":4,\"id\":\"paddle.checkout.open()-method\"},\"children\":[\"Paddle.Checkout.open() method\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"DefaultImage\",\"attributes\":{\"src\":\"/assets/images/illustration-javascript-20230314.png\",\"alt\":\"Code illustration showing an openCheckout() function. It's cut off, so you can't make out the full code.\"},\"children\":[]}]},{\"$$mdtype\":\"Tag\",\"name\":\"List\",\"attributes\":{\"ordered\":false},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[\"Works using JavaScript to open a checkout when an element is clicked.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[\"You can pass items and settings as parameters to \",{\"$$mdtype\":\"Tag\",\"name\":\"Link\",\"attributes\":{\"href\":\"/paddlejs/methods/paddle-checkout-open\"},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"Paddle.Checkout.open()\"},\"children\":[]}]},\".\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[\"Recommended in most cases.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[\"No styles applied to your element.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[\"Best for passing multiple attributes.\"]}]}]},{\"$$mdtype\":\"Tag\",\"name\":\"MultiColumnLayoutCell\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Heading\",\"attributes\":{\"level\":4,\"id\":\"html-data-attributes\"},\"children\":[\"HTML data attributes\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"DefaultImage\",\"attributes\":{\"src\":\"/assets/images/illustration-html-data-attributes-20230314.png\",\"alt\":\"Code illustration showing HTML data attributes added to an a element. It's cut off, so you can't make out the full code.\"},\"children\":[]}]},{\"$$mdtype\":\"Tag\",\"name\":\"List\",\"attributes\":{\"ordered\":false},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[\"Works by adding a \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"paddle_button\"},\"children\":[]},\" class to an element, which Paddle.js turns into a checkout trigger.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[\"You can pass items and settings as \",{\"$$mdtype\":\"Tag\",\"name\":\"Link\",\"attributes\":{\"href\":\"/paddlejs/html-data-attributes\"},\"children\":[\"data attributes\"]},\" against the element.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[\"Recommended when you can't use JavaScript.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[\"Optionally styles your element to look like a button.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[\"Best for passing few attributes.\"]}]}]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"In general, we recommend using the \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"Paddle.Checkout.open()\"},\"children\":[]},\" method, but you can choose the option that makes the most sense for you.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Tabs\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"section\",\"attributes\":{\"title\":\"JavaScript\",\"key\":\"javascript\"},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"Paddle.js comes with the \",{\"$$mdtype\":\"Tag\",\"name\":\"Link\",\"attributes\":{\"href\":\"/paddlejs/methods/paddle-checkout-open\"},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"Paddle.Checkout.open()\"},\"children\":[]}]},\" method, which lets you open a checkout with \",{\"$$mdtype\":\"Tag\",\"name\":\"Link\",\"attributes\":{\"href\":\"/build/checkout/set-up-checkout-default-settings\"},\"children\":[\"settings\"]},\", \",{\"$$mdtype\":\"Tag\",\"name\":\"Link\",\"attributes\":{\"href\":\"/build/checkout/pass-update-checkout-items\"},\"children\":[\"items\"]},\", and \",{\"$$mdtype\":\"Tag\",\"name\":\"Link\",\"attributes\":{\"href\":\"/build/checkout/prefill-checkout-properties\"},\"children\":[\"customer\"]},\" information.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"In our sample, we've created a function called \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"openCheckout()\"},\"children\":[]},\" to open a checkout. Here's how it works:\"]},{\"$$mdtype\":\"Tag\",\"name\":\"List\",\"attributes\":{\"ordered\":true,\"customMarker\":true},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"We create a variable called \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"itemsList\"},\"children\":[]},\" and pass an array of objects, where each object contains a \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"priceId\"},\"children\":[]},\" and \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"quantity\"},\"children\":[]},\".\"]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"We create a function called \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"openCheckout()\"},\"children\":[]},\" that takes a parameter called \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"items\"},\"children\":[]},\".\"]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"In our \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"openCheckout()\"},\"children\":[]},\" function, we call \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"Paddle.Checkout.open()\"},\"children\":[]},\", passing the value of \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"items\"},\"children\":[]},\" as the items list for the checkout.\"]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"We add an \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"onclick\"},\"children\":[]},\" event to our checkout button to call \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"openCheckout()\"},\"children\":[]},\" when clicked, passing our \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"itemsList\"},\"children\":[]},\" variable as a parameter.\"]}]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Section\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Callout\",\"attributes\":{\"type\":\"info\"},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"Recurring items on a checkout must have the same billing interval. For example, you can't have a checkout with some prices that are billed monthly and some products that are billed annually.\"]}]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Fence\",\"attributes\":{\"content\":\"\u003cscript type=\\\"text/javascript\\\"\u003e\\n Paddle.Environment.set(\\\"sandbox\\\");\\n Paddle.Initialize({\\n token: \\\"test_7d279f61a3499fed520f7cd8c08\\\" // replace with a client-side token\\n });\\n \\n // define items\\n let itemsList = [\\n {\\n priceId: \\\"pri_01gsz8ntc6z7npqqp6j4ys0w1w\\\",\\n quantity: 5\\n },\\n {\\n priceId: \\\"pri_01h1vjfevh5etwq3rb416a23h2\\\",\\n quantity: 1\\n }\\n ];\\n \\n // open checkout\\n function openCheckout(items){\\n Paddle.Checkout.open({\\n items: items\\n });\\n }\\n\u003c/script\u003e\\n\\n\u003ca href=\\\"#\\\" onclick=\\\"openCheckout(itemsList)\\\"\u003e\u003cb\u003eSign up now\u003c/b\u003e\u003c/a\u003e\\n\",\"language\":\"html\",\"highlight\":\"7-32\"},\"children\":[\"\u003cscript type=\\\"text/javascript\\\"\u003e\\n Paddle.Environment.set(\\\"sandbox\\\");\\n Paddle.Initialize({\\n token: \\\"test_7d279f61a3499fed520f7cd8c08\\\" // replace with a client-side token\\n });\\n \\n // define items\\n let itemsList = [\\n {\\n priceId: \\\"pri_01gsz8ntc6z7npqqp6j4ys0w1w\\\",\\n quantity: 5\\n },\\n {\\n priceId: \\\"pri_01h1vjfevh5etwq3rb416a23h2\\\",\\n quantity: 1\\n }\\n ];\\n \\n // open checkout\\n function openCheckout(items){\\n Paddle.Checkout.open({\\n items: items\\n });\\n }\\n\u003c/script\u003e\\n\\n\u003ca href=\\\"#\\\" onclick=\\\"openCheckout(itemsList)\\\"\u003e\u003cb\u003eSign up now\u003c/b\u003e\u003c/a\u003e\\n\"]}]},{\"$$mdtype\":\"Tag\",\"name\":\"section\",\"attributes\":{\"title\":\"HTML data attributes\",\"key\":\"html\"},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Link\",\"attributes\":{\"href\":\"/paddlejs/html-data-attributes\"},\"children\":[\"HTML data attributes\"]},\" are the simplest way to get started. Instead of passing parameters using JavaScript, you can add them directly as attributes to your checkout trigger element.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"This is especially good when working with a CMS that has limited customization options, or if you're not comfortable with JavaScript.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"In our sample, we've updated our checkout trigger element so that it's styled like a button and opens a checkout when clicked. We've added line breaks for clarity, but you don't need to do this. Here's how it works:\"]},{\"$$mdtype\":\"Tag\",\"name\":\"List\",\"attributes\":{\"ordered\":true,\"customMarker\":true},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"We set \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"class\"},\"children\":[]},\" of this element to \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"paddle_button\"},\"children\":[]},\". This tells Paddle.js that you're using HTML data attributes and that this element should open a checkout when clicked.\"]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"We add a \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"data-theme\"},\"children\":[]},\" attribute and set the value to \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"light\"},\"children\":[]},\". Paddle.js styles this element like a button, and the overlay checkout opens in light mode. You can pass \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"light\"},\"children\":[]},\" or \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"dark\"},\"children\":[]},\", or omit to leave the element unstyled.\"]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"We add a \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"data-items\"},\"children\":[]},\" attribute and pass a list of objects, where each object contains a \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"priceId\"},\"children\":[]},\" and \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"quantity\"},\"children\":[]},\". Note that we've used single quotation marks around the value of \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"data-items\"},\"children\":[]},\".\"]}]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Fence\",\"attributes\":{\"content\":\"\u003ca \\n href=\\\"#\\\"\\n class=\\\"paddle_button\\\"\\n data-theme=\\\"light\\\"\\n data-items='[\\n {\\n \\\"priceId\\\": \\\"pri_01gs59hve0hrz6nyybj56z04eq\\\",\\n \\\"quantity\\\": 1\\n },\\n {\\n \\\"priceId\\\": \\\"pri_01gs59p7rcxmzab2dm3gfqq00a\\\",\\n \\\"quantity\\\": 1\\n }\\n ]'\\n\u003e\\n Sign up now\\n\u003c/a\u003e\\n\",\"language\":\"html\",\"highlight\":\"3-14\"},\"children\":[\"\u003ca \\n href=\\\"#\\\"\\n class=\\\"paddle_button\\\"\\n data-theme=\\\"light\\\"\\n data-items='[\\n {\\n \\\"priceId\\\": \\\"pri_01gs59hve0hrz6nyybj56z04eq\\\",\\n \\\"quantity\\\": 1\\n },\\n {\\n \\\"priceId\\\": \\\"pri_01gs59p7rcxmzab2dm3gfqq00a\\\",\\n \\\"quantity\\\": 1\\n }\\n ]'\\n\u003e\\n Sign up now\\n\u003c/a\u003e\\n\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Callout\",\"attributes\":{\"type\":\"warning\"},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"Use single quotation marks around the value of \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"data-items\"},\"children\":[]},\", and double quotation marks around the property names and string values inside it.\"]}]}]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Heading\",\"attributes\":{\"id\":\"test-payment\",\"level\":2},\"children\":[\"3. Take a test payment \"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"We're now ready to test! Save your page, then open it in your browser. Click on your \\\"Sign up now\\\" button and Paddle.js should open an overlay checkout for the items that we passed.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Section\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"If you're using a sandbox account, you can take a test payment using \",{\"$$mdtype\":\"Tag\",\"name\":\"Link\",\"attributes\":{\"href\":\"/concepts/payment-methods/credit-debit-card\"},\"children\":[\"our test card details\"]},\":\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Table\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"TableHead\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"TableRow\",\"attributes\":{\"hideRow\":true},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"TableHeaderCell\",\"attributes\":{},\"children\":[]},{\"$$mdtype\":\"Tag\",\"name\":\"TableHeaderCell\",\"attributes\":{},\"children\":[]}]}]},{\"$$mdtype\":\"Tag\",\"name\":\"TableBody\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"TableRow\",\"attributes\":{\"hideRow\":false},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"TableDataCell\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"strong\",\"attributes\":{},\"children\":[\"Email address\"]}]},{\"$$mdtype\":\"Tag\",\"name\":\"TableDataCell\",\"attributes\":{},\"children\":[\"An email address you own\"]}]},{\"$$mdtype\":\"Tag\",\"name\":\"TableRow\",\"attributes\":{\"hideRow\":false},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"TableDataCell\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"strong\",\"attributes\":{},\"children\":[\"Country\"]}]},{\"$$mdtype\":\"Tag\",\"name\":\"TableDataCell\",\"attributes\":{},\"children\":[\"Any valid country supported by Paddle\"]}]},{\"$$mdtype\":\"Tag\",\"name\":\"TableRow\",\"attributes\":{\"hideRow\":false},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"TableDataCell\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"strong\",\"attributes\":{},\"children\":[\"ZIP code\"]},\" (if required)\"]},{\"$$mdtype\":\"Tag\",\"name\":\"TableDataCell\",\"attributes\":{},\"children\":[\"Any valid ZIP or postal code\"]}]},{\"$$mdtype\":\"Tag\",\"name\":\"TableRow\",\"attributes\":{\"hideRow\":false},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"TableDataCell\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"strong\",\"attributes\":{},\"children\":[\"Card number\"]}]},{\"$$mdtype\":\"Tag\",\"name\":\"TableDataCell\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"4242 4242 4242 4242\"},\"children\":[]}]}]},{\"$$mdtype\":\"Tag\",\"name\":\"TableRow\",\"attributes\":{\"hideRow\":false},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"TableDataCell\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"strong\",\"attributes\":{},\"children\":[\"Name on card\"]}]},{\"$$mdtype\":\"Tag\",\"name\":\"TableDataCell\",\"attributes\":{},\"children\":[\"Any name\"]}]},{\"$$mdtype\":\"Tag\",\"name\":\"TableRow\",\"attributes\":{\"hideRow\":false},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"TableDataCell\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"strong\",\"attributes\":{},\"children\":[\"Expiration date\"]}]},{\"$$mdtype\":\"Tag\",\"name\":\"TableDataCell\",\"attributes\":{},\"children\":[\"Any valid date in the future.\"]}]},{\"$$mdtype\":\"Tag\",\"name\":\"TableRow\",\"attributes\":{\"hideRow\":false},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"TableDataCell\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"strong\",\"attributes\":{},\"children\":[\"Security code\"]}]},{\"$$mdtype\":\"Tag\",\"name\":\"TableDataCell\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"100\"},\"children\":[]}]}]}]}]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"DefaultImage\",\"attributes\":{\"src\":\"/assets/images/overlay-checkout-test-payment-20230314.gif\",\"alt\":\"Short animation showing launching an overlay checkout, entering contact information, and entering test payment details.\"},\"children\":[]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Accordion\",\"attributes\":{\"variant\":\"default\"},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"AccordionItem\",\"attributes\":{\"title\":\"Checkout not working?\",\"key\":\"checkout-not-working\"},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"If the checkout doesn't appear, or you get a message saying \\\"Something went wrong,\\\" you can open your browser console to see any specific error messages from Paddle.js to help you troubleshoot.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Callout\",\"attributes\":{\"type\":\"info\"},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"Use \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"⌘ Command\"},\"children\":[]},\" + \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"⌥ Option\"},\"children\":[]},\" + \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"J\"},\"children\":[]},\" (Mac) or \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"Ctrl\"},\"children\":[]},\" + \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"⇧ Shift\"},\"children\":[]},\" + \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"J\"},\"children\":[]},\" (Windows) to quickly open your browser console in Google Chrome.\"]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Heading\",\"attributes\":{\"id\":\"test-payment-troubleshooting\",\"level\":4},\"children\":[\"Common problems \"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"Check that:\"]},{\"$$mdtype\":\"Tag\",\"name\":\"List\",\"attributes\":{\"ordered\":false},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[\"You added a default payment link to your checkout under \",{\"$$mdtype\":\"Tag\",\"name\":\"strong\",\"attributes\":{},\"children\":[\"Paddle \u003e Checkout \u003e Checkout settings \u003e Default payment link\"]},\", and that this matches the domain where you're testing. You can use \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"localhost\"},\"children\":[]},\" if you're testing locally on sandbox.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[\"You included Paddle.js correctly. If you're moving from Paddle Classic, the CDN URL has changed.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[\"Your client-side token is correct and passed to \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"Paddle.Initialize()\"},\"children\":[]},\".\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[\"You set the correct environment.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[\"The Paddle IDs for price entities that you passed are correct. Sandbox and live systems are separate, so make sure you're passing price IDs for the environment that you're working in.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[\"If you're using HTML data attributes, you used single quotation marks around the value of \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"data-items\"},\"children\":[]},\", and double quotation marks around the property names and string values inside it\"]}]}]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Heading\",\"attributes\":{\"id\":\"prefill-customer\",\"level\":2},\"children\":[\"4. Prefill customer information (optional) \"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"So far, we've passed items to our checkout. When we click our trigger, Paddle opens a checkout for the items that we passed.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"Paddle.js also lets you \",{\"$$mdtype\":\"Tag\",\"name\":\"Link\",\"attributes\":{\"href\":\"/build/checkout/prefill-checkout-properties\"},\"children\":[\"pass customer information to a checkout\"]},\". When we click our trigger, Paddle opens a checkout with the customer information prefilled. This means the first page of checkout is skipped entirely, so customers land on a screen where they can enter their payment information.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Callout\",\"attributes\":{\"type\":\"neutral\"},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"You can present customers with a one-page checkout experience by passing \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"variant\"},\"children\":[]},\" with the value \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"one-page\"},\"children\":[]},\" \",{\"$$mdtype\":\"Tag\",\"name\":\"Link\",\"attributes\":{\"href\":\"/build/checkout/set-up-checkout-default-settings\"},\"children\":[\"as a checkout setting\"]},\". You don't need to prefill information.\"]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Tabs\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"section\",\"attributes\":{\"title\":\"JavaScript\",\"key\":\"javascript\"},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Link\",\"attributes\":{\"href\":\"/paddlejs/methods/paddle-checkout-open\"},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"Paddle.Checkout.open()\"},\"children\":[]}]},\" takes a \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"customer\"},\"children\":[]},\" parameter, which lets you pass customer and address information.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"In our sample, we've extended our \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"openCheckout()\"},\"children\":[]},\" function so that it passes customer and address information to our checkout. Here's what's going on:\"]},{\"$$mdtype\":\"Tag\",\"name\":\"List\",\"attributes\":{\"ordered\":true,\"customMarker\":true},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"We create a variable called \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"customerInfo\"},\"children\":[]},\", with an \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"email\"},\"children\":[]},\" key and an object for \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"address\"},\"children\":[]},\". You may also pass Paddle IDs for an existing customer or address here.\"]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"We update our \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"openCheckout()\"},\"children\":[]},\" function so it takes another parameter called \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"customer\"},\"children\":[]},\".\"]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"In our \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"openCheckout()\"},\"children\":[]},\" function, we added the \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"customer\"},\"children\":[]},\" parameter and passing the value of \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"customer\"},\"children\":[]},\" to this.\"]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"We updated the \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"onClick\"},\"children\":[]},\" event on our checkout button to pass our \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"customerInfo\"},\"children\":[]},\" variable as the parameter for \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"customer\"},\"children\":[]},\".\"]}]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Fence\",\"attributes\":{\"content\":\"\u003cscript type=\\\"text/javascript\\\"\u003e\\n Paddle.Environment.set(\\\"sandbox\\\");\\n Paddle.Initialize({\\n token: \\\"test_7d279f61a3499fed520f7cd8c08\\\" // replace with a client-side token\\n });\\n \\n // define items\\n let itemsList = [\\n {\\n priceId: \\\"pri_01gsz8ntc6z7npqqp6j4ys0w1w\\\",\\n quantity: 5\\n },\\n {\\n priceId: \\\"pri_01h1vjfevh5etwq3rb416a23h2\\\",\\n quantity: 1\\n }\\n ];\\n \\n // define customer details\\n let customerInfo = {\\n email: \\\"sam@example.com\\\",\\n address: {\\n countryCode: \\\"US\\\", \\n postalCode: \\\"10021\\\"\\n }\\n }\\n \\n // open checkout\\n function openCheckout(items, customer){\\n Paddle.Checkout.open({\\n items: items,\\n customer: customer\\n });\\n }\\n\u003c/script\u003e\\n\\n\u003ca href=\\\"#\\\" onclick=\\\"openCheckout(itemsList, customerInfo)\\\"\u003e\u003cb\u003eSign up now\u003c/b\u003e\u003c/a\u003e\\n\",\"language\":\"html\",\"highlightLines\":[19,20,21,22,23,24,25,26,29,32]},\"children\":[\"\u003cscript type=\\\"text/javascript\\\"\u003e\\n Paddle.Environment.set(\\\"sandbox\\\");\\n Paddle.Initialize({\\n token: \\\"test_7d279f61a3499fed520f7cd8c08\\\" // replace with a client-side token\\n });\\n \\n // define items\\n let itemsList = [\\n {\\n priceId: \\\"pri_01gsz8ntc6z7npqqp6j4ys0w1w\\\",\\n quantity: 5\\n },\\n {\\n priceId: \\\"pri_01h1vjfevh5etwq3rb416a23h2\\\",\\n quantity: 1\\n }\\n ];\\n \\n // define customer details\\n let customerInfo = {\\n email: \\\"sam@example.com\\\",\\n address: {\\n countryCode: \\\"US\\\", \\n postalCode: \\\"10021\\\"\\n }\\n }\\n \\n // open checkout\\n function openCheckout(items, customer){\\n Paddle.Checkout.open({\\n items: items,\\n customer: customer\\n });\\n }\\n\u003c/script\u003e\\n\\n\u003ca href=\\\"#\\\" onclick=\\\"openCheckout(itemsList, customerInfo)\\\"\u003e\u003cb\u003eSign up now\u003c/b\u003e\u003c/a\u003e\\n\"]}]},{\"$$mdtype\":\"Tag\",\"name\":\"section\",\"attributes\":{\"title\":\"HTML data attributes\",\"key\":\"html\"},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"Paddle.js includes HTML data attributes that you can use to prefill customer information.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"In our sample, we've updated our checkout trigger element so that it passes a customer email address, country code, and ZIP code. We've added line breaks for clarity, but you don't need to do this.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Fence\",\"attributes\":{\"content\":\"\u003ca href=\\\"#\\\"\\n class=\\\"paddle_button\\\"\\n data-theme=\\\"light\\\"\\n data-items='[\\n {\\n \\\"priceId\\\": \\\"pri_01gs59hve0hrz6nyybj56z04eq\\\",\\n \\\"quantity\\\": 1\\n },\\n {\\n \\\"priceId\\\": \\\"pri_01gs59p7rcxmzab2dm3gfqq00a\\\",\\n \\\"quantity\\\": 1\\n }\\n ]'\\n data-customer-email=\\\"sam@example.com\\\"\\n data-customer-address-country-code=\\\"US\\\"\\n data-customer-address-postal-code=\\\"10021\\\"\u003e\\n Sign up now\\n\u003c/a\u003e\\n\",\"language\":\"html\",\"highlight\":\"15-17\"},\"children\":[\"\u003ca href=\\\"#\\\"\\n class=\\\"paddle_button\\\"\\n data-theme=\\\"light\\\"\\n data-items='[\\n {\\n \\\"priceId\\\": \\\"pri_01gs59hve0hrz6nyybj56z04eq\\\",\\n \\\"quantity\\\": 1\\n },\\n {\\n \\\"priceId\\\": \\\"pri_01gs59p7rcxmzab2dm3gfqq00a\\\",\\n \\\"quantity\\\": 1\\n }\\n ]'\\n data-customer-email=\\\"sam@example.com\\\"\\n data-customer-address-country-code=\\\"US\\\"\\n data-customer-address-postal-code=\\\"10021\\\"\u003e\\n Sign up now\\n\u003c/a\u003e\\n\"]}]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Heading\",\"attributes\":{\"id\":\"prefill-customer-test\",\"level\":3},\"children\":[\"Test your work \"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"Save your page, then open it in your browser. Click on your \\\"Sign up now\\\" button and Paddle.js should open an overlay checkout with the customer information prefilled. You should land on the second screen, ready to enter payment information.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"DefaultImage\",\"attributes\":{\"src\":\"/assets/images/overlay-checkout-one-page-20230314.gif\",\"alt\":\"Short animation showing overlay checkout landing on a screen asking for card details.\"},\"children\":[]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Accordion\",\"attributes\":{\"variant\":\"default\"},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"AccordionItem\",\"attributes\":{\"title\":\"Checkout not working?\",\"key\":\"checkout-not-working\"},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"Where there's a problem passing optional information to a checkout, Paddle.js opens the checkout but emits a \",{\"$$mdtype\":\"Tag\",\"name\":\"Link\",\"attributes\":{\"href\":\"/paddlejs/general/checkout-warning\"},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"checkout.warning\"},\"children\":[]}]},\" event. This means customers are always able to complete a purchase provided you've initialized Paddle.js and passed items successfully.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"You can use the \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"eventCallback\"},\"children\":[]},\" parameter for \",{\"$$mdtype\":\"Tag\",\"name\":\"Link\",\"attributes\":{\"href\":\"/paddlejs/methods/paddle-initialize\"},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"Paddle.Initialize()\"},\"children\":[]}]},\" to work with events emitted by Paddle.js. To print events emitted by Paddle.js to the console, update your \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"Paddle.Initialize()\"},\"children\":[]},\" function so it looks like this.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Fence\",\"attributes\":{\"content\":\"Paddle.Initialize({\\n token: \\\"test_7d279f61a3499fed520f7cd8c08\\\", // replace with a client-side token\\n // prints events to console for debugging\\n eventCallback: function(data) {\\n console.log(data);\\n }\\n});\\n\",\"language\":\"javascript\",\"highlight\":\"4-6\"},\"children\":[\"Paddle.Initialize({\\n token: \\\"test_7d279f61a3499fed520f7cd8c08\\\", // replace with a client-side token\\n // prints events to console for debugging\\n eventCallback: function(data) {\\n console.log(data);\\n }\\n});\\n\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"Then, open your browser console and check for events with the name \",{\"$$mdtype\":\"Tag\",\"name\":\"Link\",\"attributes\":{\"href\":\"/paddlejs/general/checkout-warning\"},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"checkout.warning\"},\"children\":[]}]},\". They should tell you what the problem is.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Callout\",\"attributes\":{\"type\":\"info\"},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"Use \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"⌘ Command\"},\"children\":[]},\" + \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"⌥ Option\"},\"children\":[]},\" + \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"J\"},\"children\":[]},\" (Mac) or \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"Ctrl\"},\"children\":[]},\" + \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"⇧ Shift\"},\"children\":[]},\" + \",{\"$$mdtype\":\"Tag\",\"name\":\"Code\",\"attributes\":{\"content\":\"J\"},\"children\":[]},\" (Windows) to quickly open your browser console in Google Chrome.\"]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Heading\",\"attributes\":{\"id\":\"prefill-customer-troubleshooting\",\"level\":4},\"children\":[\"Common problems \"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"Check that:\"]},{\"$$mdtype\":\"Tag\",\"name\":\"List\",\"attributes\":{\"ordered\":false},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[\"The email address that you passed is formatted correctly. Email addresses must not include spaces or non-ASCII characters.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[\"If you passed an address country, you also passed a ZIP/postal code if the country requires it. Most countries don't require a ZIP/postal code, but it's \",{\"$$mdtype\":\"Tag\",\"name\":\"Link\",\"attributes\":{\"href\":\"/concepts/sell/supported-countries-locales\"},\"children\":[\"required in some places\"]},\" for tax calculation and fraud prevention.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Item\",\"attributes\":{},\"children\":[\"The Paddle IDs for customer, address, or business entities that you passed are correct. Sandbox and live systems are separate, so make sure you're passing Paddle IDs for the environment that you're working in.\"]}]}]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Heading\",\"attributes\":{\"id\":\"next-steps\",\"level\":2},\"children\":[\"Next steps \"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"That's it! Now you've built a checkout, you might like to extend Paddle Checkout by automatically applying a discount, passing optional checkout settings, or building a success workflow.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"Heading\",\"attributes\":{\"id\":\"next-steps-discount\",\"level\":3},\"children\":[\"Automatically apply a discount \"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"Extend your checkout by passing a discount. When we click our trigger, Paddle opens a checkout with the discount automatically applied (where it's valid).\"]},{\"$$mdtype\":\"Tag\",\"name\":\"ArticlesSection\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"ArticlesItem\",\"attributes\":{\"title\":\"Prefill checkout properties\",\"link\":\"/build/checkout/prefill-checkout-properties\"},\"children\":[]},{\"$$mdtype\":\"Tag\",\"name\":\"ArticlesItem\",\"attributes\":{\"title\":\"Create or update a discount\",\"link\":\"/build/products/offer-discounts-promotions-coupons\"},\"children\":[]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Heading\",\"attributes\":{\"id\":\"extend-checkout-other\",\"level\":3},\"children\":[\"Pass checkout settings \"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"You don't need to pass checkout settings when working with overlay checkout, but you can use them to give you more control over how opened checkouts work. For example, you can set the language that Paddle Checkout uses, hide the option to add a discount, or restrict payment methods shown to customers.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"ArticlesSection\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"ArticlesItem\",\"attributes\":{\"title\":\"Pass checkout settings\",\"link\":\"/build/checkout/set-up-checkout-default-settings\"},\"children\":[]},{\"$$mdtype\":\"Tag\",\"name\":\"ArticlesItem\",\"attributes\":{\"title\":\"Paddle.Checkout.open() method\",\"link\":\"/paddlejs/methods/paddle-checkout-open\"},\"children\":[]}]},{\"$$mdtype\":\"Tag\",\"name\":\"Heading\",\"attributes\":{\"id\":\"extend-checkout-success\",\"level\":3},\"children\":[\"Build a success workflow \"]},{\"$$mdtype\":\"Tag\",\"name\":\"Paragraph\",\"attributes\":{},\"children\":[\"When customers complete checkout, Paddle Checkout has a final screen that lets customers know that their purchase was successful. If you like, you can redirect customers to your own page or use JavaScript event callbacks to build a more advanced success workflow.\"]},{\"$$mdtype\":\"Tag\",\"name\":\"ArticlesSection\",\"attributes\":{},\"children\":[{\"$$mdtype\":\"Tag\",\"name\":\"ArticlesItem\",\"attributes\":{\"title\":\"Handle checkout success\",\"link\":\"/build/checkout/handle-success-post-checkout\"},\"children\":[]},{\"$$mdtype\":\"Tag\",\"name\":\"ArticlesItem\",\"attributes\":{\"title\":\"Paddle.js events reference\",\"link\":\"/paddlejs/events/overview\"},\"children\":[]}]}]}","pageMeta":{"type":"markdown","title":"Build an overlay checkout","uri":"/sell/checkout/build-overlay-checkout.md","slug":"checkout/build-overlay-checkout","breadcrumbs":["build","Build an overlay checkout"],"description":"Get a step-by-step overview of how to build a complete overlay checkout — including initializing Paddle.js, passing settings and items, prefilling customer information, and next steps."}}},"__N_SSG":true},"page":"/[section]/[[...slug]]","query":{"section":"build","slug":["checkout","build-overlay-checkout"]},"buildId":"mrJjJqeVlmZxT_9DK3FAL","isFallback":false,"gsp":true,"scriptLoader":[]}</script></body></html>