apricote/ein-pfeil-am-rechten-fleck.de
1
0
Fork 0
mirror of https://github.com/apricote/ein-pfeil-am-rechten-fleck.de.git synced 2026-01-13 21:11:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: remove payment

Browse source
This commit is contained in:
Julian Tölle 2023-03-25 21:24:54 +01:00
parent 897acf27de
commit b42145b54e
10 changed files with 2044 additions and 1098 deletions
Download patch file Download diff file Expand all files Collapse all files

3
.env.template
View file

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

2562
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

1
package.json
View file

@ -9,7 +9,6 @@
"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",

15
src/global.d.ts vendored
View file

@ -1,18 +1,3 @@
/// <reference types="@sveltejs/kit" />
/// <reference types="svelte" />
/// <reference types="vite/client" />
declare namespace paypal {
interface Button {
render(selector: string): void;
}
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;
}

52
src/lib/buy/PayPalCheckout.svelte
View file

@ -1,52 +0,0 @@
<script lang="ts">
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: {
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",
},
});
},
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");
}
</script>
<svelte:head>
<script
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>
<div id="paypal-checkout" />

45
src/lib/buy/Plan.svelte
View file

@ -1,45 +0,0 @@
<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>

12
src/lib/buy/paypal-sdk.ts
View file

@ -1,12 +0,0 @@
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);

1
src/routes/__layout.svelte
View file

@ -13,7 +13,6 @@
<NavLink href="/#heroes" text="Unsere Helden" />
<NavLink href="/#listen" text="Hörprobe" />
<NavLink href="/credits" text="Besetzung" />
<NavLink href="/buy" text="Shop" />
</ul>
</nav>

7
src/routes/api/process-order.ts
View file

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

36
src/routes/buy.svelte
View file

@ -1,36 +0,0 @@
<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} />