diff --git a/packages/dashboard/package.json b/packages/dashboard/package.json
index fa0a7f45..8a911f07 100644
--- a/packages/dashboard/package.json
+++ b/packages/dashboard/package.json
@@ -10,6 +10,8 @@
   "dependencies": {
     "@fontsource/metropolis": "^4.1.0",
     "@ory/kratos-client": "^0.5.4-alpha.1",
+    "@stripe/react-stripe-js": "^1.3.0",
+    "@stripe/stripe-js": "^1.13.0",
     "@tailwindcss/forms": "^0.2.1",
     "autoprefixer": "^10.2.4",
     "classnames": "^2.2.6",
diff --git a/packages/dashboard/src/pages/_app.js b/packages/dashboard/src/pages/_app.js
index ee495472..aa74a14f 100644
--- a/packages/dashboard/src/pages/_app.js
+++ b/packages/dashboard/src/pages/_app.js
@@ -1,8 +1,16 @@
+import { Elements } from "@stripe/react-stripe-js";
+import { loadStripe } from "@stripe/stripe-js";
 import "tailwindcss/tailwind.css";
 import "@fontsource/metropolis/all.css";
 
+const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);
+
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />;
+  return (
+    <Elements stripe={stripePromise}>
+      <Component {...pageProps} />
+    </Elements>
+  );
 }
 
 export default MyApp;