mirror of
https://github.com/KevinMidboe/planetposen-frontend.git
synced 2025-10-29 13:10:12 +00:00
Kevin Midboe
1fb3fdd502
- When stripe responds with success we forward to receipt page which waits for stripe webhook to updated order status. - Moved stripe logic out of card component and into stripeApi.ts. - Get stripe api token from +page.server.ts environment variable. - Spinner for stripe payment for feedback on payment until stripe verifies and responds. - Error stack component trying to create card stack animation.
66 lines
1.3 KiB
Svelte
66 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import stripeApi from '$lib/stripe/index';
|
|
import type { StripeCardElement } from '@stripe/stripe-js/types';
|
|
|
|
export let card: StripeCardElement;
|
|
export let stripeApiKey: string;
|
|
|
|
async function mountCard() {
|
|
let stripe = await stripeApi.load(stripeApiKey);
|
|
const elements = stripe?.elements();
|
|
if (!elements) return;
|
|
|
|
const options = {
|
|
hidePostalCode: true,
|
|
style: {
|
|
base: {
|
|
color: '#32325d',
|
|
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
|
|
fontSmoothing: 'antialiased',
|
|
fontSize: '18px',
|
|
'::placeholder': {
|
|
color: '#aab7c4'
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
card = elements.create('card', options);
|
|
|
|
card.mount(cardElement);
|
|
}
|
|
|
|
onMount(() => mountCard());
|
|
|
|
let cardElement: HTMLElement;
|
|
let confirmDiag: HTMLElement;
|
|
</script>
|
|
|
|
<div class="card">
|
|
<div bind:this="{cardElement}"></div>
|
|
</div>
|
|
|
|
<div class="stripe-feedback" bind:this="{confirmDiag}"></div>
|
|
|
|
<style lang="scss" module="scoped">
|
|
@import '../../styles/media-queries.scss';
|
|
|
|
.card {
|
|
// padding: 1rem;
|
|
border: 2px solid black;
|
|
|
|
@include desktop {
|
|
max-width: 75%;
|
|
}
|
|
}
|
|
|
|
.stripe-feedback {
|
|
margin: 0.5rem;
|
|
}
|
|
|
|
:global(.card .StripeElement) {
|
|
padding: 0.5rem;
|
|
}
|
|
</style>
|