WIP

src/global.d.ts

@@ -1,3 +1,11 @@
 /// <reference types="@sveltejs/kit" />
 /// <reference types="svelte" />
 /// <reference types="vite/client" />
+
+declare namespace paypal {
+  interface Button {
+    render(selector: string): void;
+  }
+
+  function Buttons(options: { createOrder: (data: unknown, actions: unknown) => unknown }): Button;
+}

src/lib/buy/PayPalCheckout.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  export let priceEur: string;
+
+  function paypalLoaded() {
+    paypal
+      .Buttons({
+        createOrder: (data, actions: any) => {
+          return actions.order.create({
+            purchase_units: [
+              {
+                amount: {
+                  value: `${priceEur}`,
+                },
+                description: 'Hörbuch Download "Ein Pfeil am rechten Fleck"',
+              },
+            ],
+
+            applicationContext: {
+              brand_name: "Ein Pfeil am Rechten Fleck",
+              shipping_preference: "NO_SHIPPING",
+              user_action: "PAY_NOW",
+            },
+          });
+        },
+      })
+      .render("#paypal-checkout");
+  }
+</script>
+
+<svelte:head>
+  <script
+    src="https://www.paypal.com/sdk/js?currency=EUR&client-id=AVcPTp_QKzuaY2IdybCl1br396M2IXmRF6zHb6nTliLrC_WD6QqLfCFJW9YmbGSiPN_OcmpMuuqTI8Rp&debug=true"
+    on:load={paypalLoaded}></script>
+</svelte:head>
+
+<div id="paypal-checkout" />

src/lib/buy/Plan.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  export let name: string;
+  export let features: string[];
+  export let price: string;
+  export let selected: boolean;
+</script>
+
+<div
+  class="{selected
+    ? 'bg-gray-100'
+    : 'bg-gray-500'} flex flex-wrap items-start justify-start transition duration-500 ease-in-out border-2 border-gray-600 rounded-lg"
+>
+  <div class="w-full md:w-3/4">
+    <div class="relative flex flex-col h-full p-8">
+      <h2
+        class="mb-4 {selected
+          ? 'font-extrabold'
+          : 'font-semibold'} transition-all tracking-widest text-gray-800 uppercase"
+      >
+        {name}
+      </h2>
+      <ul class="list-disc list-inside">
+        {#each features as feature}
+          <li class="mb-2 text-lg font-normal tracking-wide flex-shrink-0 h-5 text-gray-800">
+            {feature}
+          </li>
+        {/each}
+      </ul>
+    </div>
+  </div>
+  <div class="w-full md:w-1/4 lg:ml-auto transition ease-in-out duration-1000">
+    <div class="relative flex flex-col h-full p-8">
+      <h1 class="mx-auto text-3xl leading-none">
+        {price}
+      </h1>
+      <p
+        class="{selected
+          ? ''
+          : 'invisible'} transition-all ease-in-out text-gray-500 duration-1000 mx-auto mt-6 text-xs"
+      >
+        Aktuell ausgewählt
+      </p>
+    </div>
+  </div>
+</div>

src/routes/__layout.svelte

@@ -16,7 +16,7 @@
   </ul>
 </nav>
 
-<main class="bg-amber-200 max-w-md">
+<main class="bg-amber-200 py-16">
   <slot />
 </main>
 

src/routes/buy.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import PayPalCheckout from "$lib/buy/PayPalCheckout.svelte";
+  import Plan from "$lib/buy/Plan.svelte";
+
+  let priceEur = 10;
+  const minPrice = 1;
+</script>
+
+<Plan
+  name="Standard"
+  features={["Hörbuch als mp3 (192kbps)"]}
+  price="ab 1€"
+  selected={priceEur >= 1 && priceEur < 15}
+/>
+<Plan
+  name="Premium"
+  features={["Hörbuch als mp3 (192kbps)", "Hörbuch als flac", "Drehbuch als PDF"]}
+  price="ab 15€"
+  selected={priceEur >= 15}
+/>
+
+<div class="flex flex-row h-10 rounded-lg relative bg-transparent mt-1">
+  <label for="audiobook-price" class="text-gray-700 text-sm font-semibold"
+    >Wähle deinen Preis (€):</label
+  >
+  <input
+    name="audiobook-price"
+    type="number"
+    bind:value={priceEur}
+    min={minPrice}
+    id="foo"
+    class="outline-none focus:outline-none text-center bg-gray-300 font-semibold text-md hover:text-black focus:text-black  md:text-basecursor-default flex items-center text-gray-700 rounded"
+  />
+</div>
+
+<PayPalCheckout {priceEur} />