accounts/**

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",

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;