Parameterises PayPal product details

3 files changed, 34 insertions, 9 deletions

diff --git a/src/components/LallansIssue.astro b/src/components/LallansIssue.astro
index 690e96c..37875e3 100644
--- a/src/components/LallansIssue.astro
+++ b/src/components/LallansIssue.astro
@@ -28,6 +28,9 @@ const t = translate(locale);
       <img alt="" src={`/images/lallans/issue${issue.issueNumber}.jpg`} />
       <PayPalButtons
         successPageUrl={relativePath(Astro.url.pathname, `payment-success-confirmation`)}
+        productDescription={`Lallans ${issue.issueNumber} | ${issue.issueName}`}
+        shortDescription={`Lallans ${issue.issueNumber}`}
+        totalPrice={issue.price}
       />
     </div>
   </div>
diff --git a/src/components/PayPalButtons.astro b/src/components/PayPalButtons.astro
index 80d52ff..cdea5cb 100644
--- a/src/components/PayPalButtons.astro
+++ b/src/components/PayPalButtons.astro
@@ -1,17 +1,27 @@
 ---
 import env from '$lib/env';
+import type Price from '$types/Price';
 
 interface Props {
   successPageUrl: string;
+  productDescription: string;
+  shortDescription: string;
+  totalPrice: Price;
 }
 
-const { successPageUrl } = Astro.props;
+const { successPageUrl, productDescription, shortDescription, totalPrice } = Astro.props;
 
 const PAYPAL_CLIENT_ID =
   env.ENVIRONMENT === 'prod' ? env.PAYPAL_LIVE_CLIENT_ID : env.PAYPAL_SANDBOX_CLIENT_ID;
 ---
 
-<paypal-buttons data-paypal-client-id={PAYPAL_CLIENT_ID} data-success-page-url={successPageUrl}>
+<paypal-buttons
+  data-paypal-client-id={PAYPAL_CLIENT_ID}
+  data-success-page-url={successPageUrl}
+  data-product-description={productDescription}
+  data-short-description={shortDescription}
+  data-total-price={totalPrice}
+>
   <div id="paypal-button-container"></div>
 </paypal-buttons>
 
@@ -24,10 +34,7 @@ const PAYPAL_CLIENT_ID =
     constructor() {
       super();
 
-      const paypalClientId = this.dataset['paypalClientId'];
-      if (!paypalClientId || typeof paypalClientId !== 'string') {
-        throw new Error('PayPal Client ID not provided to PayPalButtons component.');
-      }
+      const paypalClientId = this.getStringDataAttribute('paypalClientId');
 
       const paypalOptions = {
         clientId: paypalClientId,
@@ -56,13 +63,17 @@ const PAYPAL_CLIENT_ID =
       constructButtons: Required<PayPalNamespace>['Buttons'],
       successPageUrl: string
     ) {
+      const productDescription = this.getStringDataAttribute('productDescription');
+      const shortDescription = this.getStringDataAttribute('shortDescription');
+      const totalPrice = this.getStringDataAttribute('totalPrice');
+
       return constructButtons({
         // This function is called to set up the transaction details without actually carrying it out
         async createOrder() {
           const body = JSON.stringify({
-            productDescription: 'my product description',
-            shortDescription: 'my product',
-            totalPrice: 15.5,
+            productDescription,
+            shortDescription,
+            totalPrice,
           });
           const headers = {
             'Content-Type': 'application/json',
@@ -125,6 +136,14 @@ const PAYPAL_CLIENT_ID =
         },
       });
     }
+
+    getStringDataAttribute(key: string): string {
+      const value = this.dataset[key];
+      if (!value || typeof value !== 'string') {
+        throw new Error(`data-${key} attribute not provided to PayPalButtons component.`);
+      }
+      return value;
+    }
   }
 
   customElements.define('paypal-buttons', PayPalButtons);
diff --git a/src/components/Scotsoun.astro b/src/components/Scotsoun.astro
index a0600d1..c1d8fdf 100644
--- a/src/components/Scotsoun.astro
+++ b/src/components/Scotsoun.astro
@@ -33,6 +33,9 @@ const t = translate(locale);
       <img src={`/images/scotsoun/sscd${scotsoun.scotsounId}.jpg`} />
       <PayPalButtons
         successPageUrl={relativePath(Astro.url.pathname, `payment-success-confirmation`)}
+        productDescription={scotsoun.longName}
+        shortDescription={scotsoun.title}
+        totalPrice={scotsoun.price}
       />
     </div>
   </div>