getting-started.md

Getting Started

Installation

NPM

npm install @vue-stripe/vue-stripe

Yarn

yarn add @vue-stripe/vue-stripe

Composable Usage

<script setup>
import { onMounted, ref } from 'vue';
import { useStripe } from '@vue-stripe/vue-stripe';

const { initStripe } = useStripe();
const stripe = ref(null);

onMounted(async () => {
  // Initialize Stripe.js
  stripe.value = await initStripe('pk_...');
});
</script>

Component Usage

<script setup>
import { VueStripe, Elements, PaymentIntent } from '@vue-stripe/vue-stripe';
const pk = 'pk_...';
</script>

<template>
  <VueStripe 
    :pk="pk"
    v-slot:default="{ stripe }"
  >
    <Elements 
      :stripe="stripe" 
      :client-secret="clientSecret"
      v-slot:default="{ element }"
    >
      <PaymentIntent 
        :stripe="stripe" 
        :element="element"
      />
    </Elements>
  </VueStripe>
</template>