aboutsummaryrefslogtreecommitdiffstats
path: root/src/routes/launch/purchase/card
diff options
context:
space:
mode:
Diffstat (limited to 'src/routes/launch/purchase/card')
-rw-r--r--src/routes/launch/purchase/card/+page.server.js16
-rw-r--r--src/routes/launch/purchase/card/+page.svelte169
2 files changed, 82 insertions, 103 deletions
diff --git a/src/routes/launch/purchase/card/+page.server.js b/src/routes/launch/purchase/card/+page.server.js
index eaa8d5f3..34a2a8e1 100644
--- a/src/routes/launch/purchase/card/+page.server.js
+++ b/src/routes/launch/purchase/card/+page.server.js
@@ -1,16 +1,19 @@
import { env } from '$env/dynamic/private';
+import { error, redirect } from '@sveltejs/kit';
+import { post, auth } from '$lib/utils';
+import { createTicket } from "$lib/ticket";
let stripe = 'https://api.stripe.com/v1';
export const actions = {
- default: async ({ request }) => {
+ default: async ({ cookies, request }) => {
let form = await request.formData();
let headers = new Headers();
headers.set('Authorization', 'Basic ' + new Buffer(env.STRIPE + ':').toString('base64'));
let body = new URLSearchParams({
- 'card[number]': form.get('number'),
+ 'card[number]': form.get('number').replace(/\s+/g, ''),
'card[exp_month]': form.get('expiry').slice(0, 2),
'card[exp_year]': form.get('expiry').slice(-2),
'card[cvc]': form.get('cvc')
@@ -29,8 +32,13 @@ export const actions = {
description: 'launch ticket'
});
- let r = await fetch(`${stripe}/charges`, { body, headers, method }).then((r) => r.json());
+ let { status } = await fetch(`${stripe}/charges`, { body, headers, method }).then((r) =>
+ r.json()
+ );
+
+ if (status !== 'succeeded') throw error(500, { message: 'Card payment failed' });
+ let asset = await createTicket(cookies, form.get('username'));
- console.log(r);
+ throw redirect(307, `/launch/thanks/${asset}`);
}
};
diff --git a/src/routes/launch/purchase/card/+page.svelte b/src/routes/launch/purchase/card/+page.svelte
index 79240078..2ab5fb86 100644
--- a/src/routes/launch/purchase/card/+page.svelte
+++ b/src/routes/launch/purchase/card/+page.svelte
@@ -1,109 +1,80 @@
<script>
+ import { enhance } from '$app/forms';
+ import { Lock, Card, Calendar, Spinner } from '$comp';
+
+ export let data;
+
+ let { username } = data.user;
+ let loading;
</script>
-<form method="POST" class="flex flex-wrap gap-3 w-full p-5">
- <label class="relative w-full flex flex-col">
- <span class="font-bold mb-3">Card number</span>
- <input
- class="rounded-md peer pl-12 pr-2 py-2 border-2 border-gray-200 placeholder-gray-300"
- type="text"
- name="number"
- placeholder="0000 0000 0000"
- value="4242424242424242"
- />
- <svg
- xmlns="http://www.w3.org/2000/svg"
- class="absolute bottom-0 left-0 -mb-0.5 transform translate-x-1/2 -translate-y-1/2 text-black peer-placeholder-shown:text-gray-300 h-6 w-6"
- fill="none"
- viewBox="0 0 24 24"
- stroke="currentColor"
- >
- <path
- stroke-linecap="round"
- stroke-linejoin="round"
- stroke-width="2"
- d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
+<div class="container max-w-lg px-4 mx-auto space-y-5">
+ <form
+ method="POST"
+ class="flex flex-wrap gap-5 w-full p-5 mt-20"
+ use:enhance={() => {
+ loading = true;
+ return ({ update }) => update() && (loading = false);
+ }}
+ >
+ <input type="hidden" name="username" value={username} />
+ <label class="relative w-full flex flex-col">
+ <span class="font-bold mb-3">Card number</span>
+ <input
+ class="rounded-md peer pl-12 pr-2 py-2 border-2 border-gray-200 placeholder-gray-300"
+ type="text"
+ name="number"
+ placeholder="0000 0000 0000"
+ value="4242424242424242"
/>
- </svg>
- </label>
+ <Card />
+ </label>
- <label class="relative flex-1 flex flex-col">
- <span class="font-bold mb-3">Expire date</span>
- <input
- class="rounded-md peer pl-12 pr-2 py-2 border-2 border-gray-200 placeholder-gray-300"
- type="text"
- name="expiry"
- placeholder="MM/YY"
- value="0123"
- />
- <svg
- xmlns="http://www.w3.org/2000/svg"
- class="absolute bottom-0 left-0 -mb-0.5 transform translate-x-1/2 -translate-y-1/2 text-black peer-placeholder-shown:text-gray-300 h-6 w-6"
- fill="none"
- viewBox="0 0 24 24"
- stroke="currentColor"
- >
- <path
- stroke-linecap="round"
- stroke-linejoin="round"
- stroke-width="2"
- d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+ <label class="relative flex-1 flex flex-col">
+ <span class="font-bold mb-3">Expire date</span>
+ <input
+ class="rounded-md peer pl-12 pr-2 py-2 border-2 border-gray-200 placeholder-gray-300"
+ type="text"
+ name="expiry"
+ placeholder="MM/YY"
+ value="0123"
/>
- </svg>
- </label>
+ <Calendar />
+ </label>
- <label class="relative flex-1 flex flex-col">
- <span class="font-bold flex items-center gap-3 mb-3">
- CVC/CVV
- <span class="relative group">
- <span
- class="hidden group-hover:flex justify-center items-center px-2 py-1 text-xs absolute -right-2 transform translate-x-full -translate-y-1/2 w-max top-1/2 bg-black text-white"
- >
- 3-digit number on the back of your card</span
- >
- <svg
- xmlns="http://www.w3.org/2000/svg"
- class="h-4 w-4"
- fill="none"
- viewBox="0 0 24 24"
- stroke="currentColor"
- >
- <path
- stroke-linecap="round"
- stroke-linejoin="round"
- stroke-width="2"
- d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
- />
- </svg>
+ <label class="relative flex-1 flex flex-col">
+ <span class="font-bold flex items-center gap-3 mb-3">
+ CVC/CVV
+ <span class="relative group">
+ <span
+ class="hidden group-hover:flex justify-center items-center px-2 py-1 text-xs absolute -right-2 transform translate-x-full -translate-y-1/2 w-max top-1/2 bg-black text-white"
+ >
+ 3-digit number on the back of your card</span
+ >
+ </span>
</span>
- </span>
- <input
- class="rounded-md peer pl-12 pr-2 py-2 border-2 border-gray-200 placeholder-gray-300"
- type="text"
- name="cvc"
- placeholder="&bull;&bull;&bull;"
- value="123"
- />
- <svg
- xmlns="http://www.w3.org/2000/svg"
- class="absolute bottom-0 left-0 -mb-0.5 transform translate-x-1/2 -translate-y-1/2 text-black peer-placeholder-shown:text-gray-300 h-6 w-6"
- fill="none"
- viewBox="0 0 24 24"
- stroke="currentColor"
- >
- <path
- stroke-linecap="round"
- stroke-linejoin="round"
- stroke-width="2"
- d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+ <input
+ class="rounded-md peer pl-12 pr-2 py-2 border-2 border-gray-200 placeholder-gray-300"
+ type="text"
+ name="cvc"
+ placeholder="&bull;&bull;&bull;"
+ value="123"
/>
- </svg>
- </label>
+ <Lock />
+ </label>
- <div class="w-full flex">
- <button
- class="bg-black text-white border rounded-full px-8 py-4 font-bold hover:opacity-80 mx-auto text-2xl"
- type="submit">Submit</button
- >
- </div>
-</form>
+ <div class="w-full flex mt-8">
+ <button
+ class="bg-black text-white border rounded-full px-8 py-4 font-bold hover:opacity-80 mx-auto text-xl"
+ type="submit"
+ disabled={loading}
+ >
+ {#if loading}
+ <Spinner />
+ {:else}
+ Submit
+ {/if}
+ </button>
+ </div>
+ </form>
+</div>
generated by cgit v1.2.3 (git 2.51.0) at 2026-10-15 22:15:04 +0000