Show stripe pricing table test or live mode based on env var (#693)

Author: ngnijland

docs/.env.development

@@ -0,0 +1,3 @@
+# Stripe configuration - DEVELOPMENT
+PUBLIC_STRIPE_PRICING_TABLE_ID=prctbl_1QXOfxAprKYhJoSqlhKti4l9
+PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_51QT1gdAprKYhJoSqUitnAapm7ALqXLl71MbbMB3wqwCwTrRb2im1dwre6ObCDlupfgm8R2UseLZDS3NNSKX4KTAv008Ih97Npd

docs/.env.production

@@ -0,0 +1,3 @@
+# Stripe configuration - PRODUCTION
+PUBLIC_STRIPE_PRICING_TABLE_ID=prctbl_1QXPD3AprKYhJoSqYHAc7Uqn
+PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_51QT1gdAprKYhJoSqnISZjmO3BIfZpA01ZXMM697LzdrkD6LqrqlNvx2Y5SzgazuUoq7iOgN4iAbSvSpV4Jvc6Gcl00D4hvBbyO

docs/.gitignore

@@ -13,10 +13,6 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 
-# environment variables
-.env
-.env.production
-
 # macOS-specific files
 .DS_Store
 

docs/src/components/Pricing.astro

@@ -1,5 +1,9 @@
 ---
 import SectionHeader from "./SectionHeader.astro";
+
+// Access environment variables for Stripe configuration
+const STRIPE_PRICING_TABLE_ID = import.meta.env.PUBLIC_STRIPE_PRICING_TABLE_ID;
+const STRIPE_PUBLISHABLE_KEY = import.meta.env.PUBLIC_STRIPE_PUBLISHABLE_KEY;
 ---
 
 <style>
@@ -43,8 +47,8 @@ import SectionHeader from "./SectionHeader.astro";
     <script is:inline async src="https://js.stripe.com/v3/pricing-table.js"
     ></script>
     <stripe-pricing-table
-      pricing-table-id="prctbl_1QXPD3AprKYhJoSqYHAc7Uqn"
-      publishable-key="pk_live_51QT1gdAprKYhJoSqnISZjmO3BIfZpA01ZXMM697LzdrkD6LqrqlNvx2Y5SzgazuUoq7iOgN4iAbSvSpV4Jvc6Gcl00D4hvBbyO"
+      pricing-table-id={STRIPE_PRICING_TABLE_ID}
+      publishable-key={STRIPE_PUBLISHABLE_KEY}
     >
     </stripe-pricing-table>
     <p class="text-center mt-3 gray-text">