I want to implement a Mollie simulation into my webapp. I'm using SvelteKit but I got all tangled up with the documentation..
So until this moment, I was comfortable with makig requests to my database by using +page.server.ts, but to use Mollie, I need to do it differently. But doing it differently holds me back for a moment...
I just can't seem to figure out how SvelteKit works when it comes to API calls and handling the data on the server and the client.
If I take a look on the documentation from Mollie, I just can't find a way to use it inside SvelteKit, so I was hoping someone could enlighten me.
This is what I got for the moment:
+page.svelte
<script lang="ts">
// @ts-nocheck
import Header from '/src/components/Header.svelte';
import type { PageData } from '../new-survey/$types';
import { enhance } from "$app/forms";
export let data: PageData;
export let form;
import { addToast } from '../../../../stores';
import { tick } from "svelte";
</script>
<Header {data} />
<main>
<h1>Almost there!</h1>
<p>Just click on the button to confirm your payment</p>
<button on:click={}>Confirm</button>
</main>
+server.js
import createMollieClient from "@mollie/api-client";
import MOLLIE from '$env/static/private'
const mollie = createMollieClient({
apiKey: MOLLIE,
})
export const POST = async ({ request }) => {
try {
const { payment } = await mollie.payments.create({
amount: {
value: '10.00',
currency: 'EUR',
},
description: 'My first API payment',
redirectUrl: '/dashboard',
webhookUrl: 'https://example.com/webhook',
})
return {
status: 200,
body: {
payment,
},
}
} catch (error) {
console.log(error)
}
}
So I want to click on the confirm button and that button should take me to the mollie payment page. But how do I lay that connection? How does my app know it have to take me there when I click that button?
Thanks in advance!