<template>
  <div>
    <client-only>
      <stripe-checkout
        ref="checkoutRef"
        mode="payment"
        :pk="publishableKey"
        :line-items="lineItems"
        :success-url="successURL"
        :cancel-url="cancelURL"
        @loading="(v) => (loading = v)"
      />
    </client-only>
    <button @click="submit">Pay now!</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      publishableKey: <my_secret_pk>, //Better if read from env or $config
      loading: false,
      lineItems: [
        {
          price: 'price_kjlshf&DSf(6676S', // The id of the one-time price you created in your Stripe dashboard
          quantity: 1,
        },
      ],
      successURL: 'http://localhost:3000?status=success',
      cancelURL: 'http://localhost:3000?status=fail',
    }
  },
  methods: {
    submit() {
      // You will be redirected to Stripe's secure checkout page
      this.$refs.checkoutRef.redirectToCheckout()
    },
  },
}
</script>