Mollie payment simulation with SvelteKit

45 views Asked by At

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!

0

There are 0 answers