<template>
    <AppLayout title="Payment">
        <section id="stripe-payment-form"></section>
    </AppLayout>
</template>

<script>
import { loadStripe } from "@stripe/stripe-js";

export default {
    props: {
        client_secret: String,
    },
    data() {
        return {
            stripe: null,
            elements: null,
            paymentElement: null,
            appearance: {
                theme: "stripe",

                variables: {
                    colorPrimary: "#29419B",
                    colorBackground: "#ffffff",
                    colorText: "#222222",
                    colorDanger: "#F1416C",
                    fontFamily: "Inter, system-ui, -apple-system",
                    spacingUnit: "6px",
                    borderRadius: "8px",
                },
            },
        };
    },
    methods: {
        async initStripe() {
            this.stripe = await loadStripe(this.$page.props.stripe.key);
            this.elements = await this.stripe.elements({
                clientSecret: this.client_secret,
                appearance: this.appearance,
            });
            this.createPaymentElement();
        },
        async createPaymentElement() {
            this.paymentElement = await this.elements.create("payment");
            this.mountElement(this.paymentElement, "#stripe-payment-form");
        },
        mountElement(element, container) {
            element.mount(container);
        },
    },
    mounted() {
        this.initStripe();
        // const strp = Stripe();
    },
};
</script>
