Skip to main content

Vue

The @apolopay-sdk/vue package provides a native Vue 3 component for the SmartPay payment button.

Installation​

npm install @apolopay-sdk/vue

Usage​

<script setup>
import { ref, onMounted } from 'vue';
import { PaymentButton } from '@apolopay-sdk/vue';

const processId = ref('');

onMounted(async () => {
  // Call your backend to create a payment process
  const response = await fetch('/api/create-payment', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ amount: 25.50 }),
  });
  const data = await response.json();
  processId.value = data.processId;
});
</script>

<template>
  <div>
    <h1>Complete Your Purchase</h1>
    <PaymentButton
      publicKey="YOUR_PUBLIC_KEY"
      :processId="processId"
    />
  </div>
</template>

Props​

PropTypeRequiredDescription
publicKeystring✅Your payment button's public key
processIdstring✅The process ID from your backend

Next Steps​