Vue

El paquete @apolopay-sdk/vue proporciona un componente nativo de Vue 3 para el botón de pago SmartPay.

Instalación

npm install @apolopay-sdk/vue

Uso

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

const processId = ref('');

onMounted(async () => {
  // Llama a tu backend para crear un proceso de pago
  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>Completa tu Compra</h1>
    <PaymentButton
      publicKey="TU_LLAVE_PUBLICA"
      :processId="processId"
    />
  </div>
</template>

Propiedades (Props)

Propiedad	Tipo	Requerido	Descripción
publicKey	string	✅	La llave pública de tu botón de pago
processId	string	✅	El process ID desde tu backend

Siguientes Pasos

• Integración Backend → — Configura la llamada a la API de preorden
• Webhooks → — Recibe notificaciones cuando los pagos se completen