diff --git a/website/assets/subscribe.js b/website/assets/subscribe.js
new file mode 100644
index 0000000..961524d
--- /dev/null
+++ b/website/assets/subscribe.js
@@ -0,0 +1,30 @@
+const ITEM_ID = 'pro_01hmetcfzgwtjb75msm8sr8snn'
+
+Paddle.Setup({
+  token: 'live_69ccb2c84631cfdc44e78975c88',
+  eventCallback: function (data) {
+    console.log(data)
+  },
+  checkout: {
+    settings: {
+      displayMode: 'inline',
+      frameTarget: 'checkout-container',
+      // frameInitialHeight: "450",
+      // frameStyle: "width: 100%; min-width: 312px; background-color: transparent; border: none;"
+    },
+  },
+})
+
+Paddle.Checkout.open({
+  settings: {
+    displayMode: 'inline',
+    frameTarget: 'checkout-container',
+    // frameInitialHeight: "450",
+    // frameStyle: "width: 100%; min-width: 312px; background-color: transparent; border: none;"
+  },
+  items: [
+    {
+      priceId: ITEM_ID,
+    },
+  ],
+})
diff --git a/website/generate.py b/website/generate.py
index 5757369..5664db9 100755
--- a/website/generate.py
+++ b/website/generate.py
@@ -38,6 +38,7 @@ def copy_assets():
         'style.css',
         'map_howto.js',
         'support_plans.js',
+        'subscribe.js',
         'logo.jpg',
         'favicon.ico',
         'github.svg',
diff --git a/website/subscribe.html b/website/subscribe.html
index b56839b..66e42a4 100644
--- a/website/subscribe.html
+++ b/website/subscribe.html
@@ -6,14 +6,12 @@
     <title>OpenFreeMap subscribe</title>
     <link rel="stylesheet" href="style.css" />
     <script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script>
-    <script type="text/javascript">
-      Paddle.Setup({
-        token: 'live_69ccb2c84631cfdc44e78975c88',
-      })
-    </script>
+
   </head>
 
   <body>
     <h1>OpenFreeMap subscribe</h1>
+    <div class="checkout-container"></div>
+    <script src="subscribe.js"></script>
   </body>
 </html>
