WIP2

.env.template

@@ -0,0 +1,3 @@
+VITE_PAYPAL_CLIENT_ID=
+PAYPAL_CLIENT_SECRET=
+VITE_PAYPAL_ENV=

.eslintrc.cjs

@@ -6,7 +6,7 @@ module.exports = {
   ignorePatterns: ["*.cjs"],
   overrides: [{ files: ["*.svelte"], processor: "svelte3/svelte3" }],
   settings: {
-    "svelte3/typescript": require("typescript"),
+    "svelte3/typescript": () => require("typescript"),
   },
   parserOptions: {
     sourceType: "module",

package-lock.json

@@ -151,6 +151,21 @@
         "fastq": "^1.6.0"
       }
     },
+    "@paypal/checkout-server-sdk": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@paypal/checkout-server-sdk/-/checkout-server-sdk-1.0.2.tgz",
+      "integrity": "sha512-9wNxqgXrolEPfX62PEwyUB3SBGVF7v9N28rNJpXNp89qEpLoLStM+CT4wm/fcfYiVj9BHpimKcB4B7CBbLirxQ==",
+      "dev": true,
+      "requires": {
+        "@paypal/paypalhttp": "^1.0.0"
+      }
+    },
+    "@paypal/paypalhttp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@paypal/paypalhttp/-/paypalhttp-1.0.0.tgz",
+      "integrity": "sha512-6gHT5HhPLObICXU8LFFiuoH0vCh3y1y0jl0OWDRuTZvptZ1WRS2eKcHigheytqxk+CWTH0qh0M3S5vEf1PJrSw==",
+      "dev": true
+    },
     "@rollup/pluginutils": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.1.0.tgz",

package.json

@@ -5,10 +5,11 @@
     "dev": "svelte-kit dev",
     "build": "svelte-kit build",
     "preview": "svelte-kit preview",
-    "lint": "prettier --check . && eslint --ignore-path .gitignore .",
+    "lint": "prettier --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
-    "format": "prettier --write ."
+    "format": "prettier --write --plugin-search-dir=. ."
   },
   "devDependencies": {
+    "@paypal/checkout-server-sdk": "^1.0.2",
     "@sveltejs/adapter-vercel": "next",
     "@sveltejs/kit": "next",
     "@typescript-eslint/eslint-plugin": "^4.23.0",
@@ -26,8 +27,7 @@
     "svelte-preprocess": "^4.7.3",
     "tailwindcss": "^2.1.1",
     "tslib": "^2.0.0",
-    "typescript": "^4.0.0",
+    "typescript": "^4.0.0"
-    "vite": "^2.3.2"
   },
   "type": "module"
 }

src/global.d.ts

@@ -7,5 +7,12 @@ declare namespace paypal {
     render(selector: string): void;
   }
 
-  function Buttons(options: { createOrder: (data: unknown, actions: unknown) => unknown }): Button;
+  interface ButtonOptions {
+    createOrder: (data: unknown, actions: unknown) => unknown;
+    onApprove: (data: unknown, actions: unknown) => unknown;
+    onCancel: (data: unknown) => unknown;
+    onError: (data: unknown) => unknown;
+  }
+
+  function Buttons(options: ButtonOptions): Button;
 }

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);

src/routes/api/process-order.ts

@@ -0,0 +1,7 @@
+import type { RequestHandler } from "@sveltejs/kit";
+
+export const post: RequestHandler = async () => {
+  console.log(import.meta.env.VITE_PAYPAL_CLIENT_ID);
+
+  return { body: {} };
+};

svelte.config.js

@@ -1,21 +1,20 @@
-import sveltePreprocess from "svelte-preprocess";
+import preprocess from "svelte-preprocess";
 import vercel from "@sveltejs/adapter-vercel";
 
-/** @type {import("@sveltejs/kit").Config} */
+/** @type {import('@sveltejs/kit').Config} */
 const config = {
   // Consult https://github.com/sveltejs/svelte-preprocess
   // for more information about preprocessors
   preprocess: [
-    sveltePreprocess({
+    preprocess({
       postcss: true,
     }),
   ],
 
   kit: {
-    adapter: vercel(),
-
     // hydrate the <div id="svelte"> element in src/app.html
     target: "#svelte",
+    adapter: vercel(),
   },
 };