WIP2

src/lib/buy/PayPalCheckout.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
-  export let priceEur: string;
+  export let priceEur: number;
 
   function paypalLoaded() {
     paypal
       .Buttons({
         createOrder: (data, actions: any) => {
           return actions.order.create({
+            // Payment will be captured in endpoint /api/process-order
+            intent: "AUTHORIZE",
+
             purchase_units: [
               {
                 amount: {
@@ -22,6 +25,17 @@
             },
           });
         },
+        onApprove: (data) => {
+          // Sent order to backend to capture funds, save data to db and send email with download link
+          console.log("onApprove", data);
+        },
+        onError: (data) => {
+          // Show error to user
+          console.log("onError", data);
+        },
+        onCancel: (data) => {
+          console.log("onCancel", data);
+        },
       })
       .render("#paypal-checkout");
   }
@@ -29,7 +43,9 @@
 
 <svelte:head>
   <script
-    src="https://www.paypal.com/sdk/js?currency=EUR&client-id=AVcPTp_QKzuaY2IdybCl1br396M2IXmRF6zHb6nTliLrC_WD6QqLfCFJW9YmbGSiPN_OcmpMuuqTI8Rp&debug=true"
+    src={`https://www.paypal.com/sdk/js?currency=EUR&client-id=${
+      import.meta.env.VITE_PAYPAL_CLIENT_ID
+    }&debug=true`}
     on:load={paypalLoaded}></script>
 </svelte:head>
 

src/lib/buy/paypal-sdk.ts

@@ -0,0 +1,12 @@
+import paypal from "@paypal/checkout-server-sdk";
+
+// Creating an environment
+const clientId = import.meta.env.VITE_PAYPAL_CLIENT_ID;
+const clientSecret = import.meta.env.PAYPAL_CLIENT_SECRET;
+
+const environment =
+  import.meta.env.VITE_PAYPAL_ENV === "live"
+    ? new paypal.core.LiveEnvironment(clientId, clientSecret)
+    : new paypal.core.SandboxEnvironment(clientId, clientSecret);
+
+export const client = new paypal.core.PayPalHttpClient(environment);