WIP

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>