mirror of
https://github.com/apricote/ein-pfeil-am-rechten-fleck.de.git
synced 2026-01-13 13:01:02 +00:00
feat: remove payment
This commit is contained in:
parent
897acf27de
commit
b42145b54e
10 changed files with 2044 additions and 1098 deletions
|
|
@ -1,3 +0,0 @@
|
||||||
VITE_PAYPAL_CLIENT_ID=
|
|
||||||
PAYPAL_CLIENT_SECRET=
|
|
||||||
VITE_PAYPAL_ENV=
|
|
||||||
2970
package-lock.json
generated
2970
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -9,7 +9,6 @@
|
||||||
"format": "prettier --write --plugin-search-dir=. ."
|
"format": "prettier --write --plugin-search-dir=. ."
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@paypal/checkout-server-sdk": "^1.0.2",
|
|
||||||
"@sveltejs/adapter-vercel": "next",
|
"@sveltejs/adapter-vercel": "next",
|
||||||
"@sveltejs/kit": "next",
|
"@sveltejs/kit": "next",
|
||||||
"@typescript-eslint/eslint-plugin": "^4.23.0",
|
"@typescript-eslint/eslint-plugin": "^4.23.0",
|
||||||
|
|
|
||||||
15
src/global.d.ts
vendored
15
src/global.d.ts
vendored
|
|
@ -1,18 +1,3 @@
|
||||||
/// <reference types="@sveltejs/kit" />
|
/// <reference types="@sveltejs/kit" />
|
||||||
/// <reference types="svelte" />
|
/// <reference types="svelte" />
|
||||||
/// <reference types="vite/client" />
|
/// <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;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -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" />
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -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);
|
|
||||||
|
|
@ -13,7 +13,6 @@
|
||||||
<NavLink href="/#heroes" text="Unsere Helden" />
|
<NavLink href="/#heroes" text="Unsere Helden" />
|
||||||
<NavLink href="/#listen" text="Hörprobe" />
|
<NavLink href="/#listen" text="Hörprobe" />
|
||||||
<NavLink href="/credits" text="Besetzung" />
|
<NavLink href="/credits" text="Besetzung" />
|
||||||
<NavLink href="/buy" text="Shop" />
|
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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: {} };
|
|
||||||
};
|
|
||||||
|
|
@ -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} />
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue