Botón de pago

Crea un botón de pago e insértalo en tu sitio web para comenzar a recibir pagos de manera fácil, rápida y segura.

Si aún no creaste tu cuenta en Directo Pago, visita primero el siguiente link: https://docs.directopago.com/primeros-pasos

Utiliza nuestro botón de pago para recibir múltiples pagos de un mismo monto.

Si configuras un monto en USD, puedes utilizar un único botón para cobrar a todos los países que tenemos disponibles! También es posible crear botones en cualquier moneda local.

¡Integra fácilmente nuestro botón y comienza a recibir pagos de manera fácil, rápida y segura!

Generar botón utilizando el panel

Existen dos formas de generar nuestro botón de pago, la más sencilla y que no requiere conocimientos técnicos es la de utilizar nuestro formulario disponible en el panel.

Si deseas cobrar un monto en USD en cualquiera de los países disponibles, simplemente debes ingresar un monto en USD y seleccionar "Todos" en el campo de país.

Si deseas cobrar un monto en moneda local para un país determinado, simplemente debes ingresar el país, elegir entre moneda local o USD y el monto del producto o servicio que deseas cobrar y hacer click en el botón "Crear".

Se generará un código en la caja de debajo que debe ser copiado e insertado en su sitio web para comenzar a recibir pagos.

Recuerde que en caso de elegir USD como moneda, el monto se convertirá automáticamente a la moneda local de tu cliente, de forma que tu cliente siempre pague en su moneda local.

Generar botón mediante código

La segunda manera de generar un botón de Directo Pago consiste en utilizar nuestra SDK Javascript. Esta segunda manera si bien requiere de conocimientos técnicos, permite una mayor flexibilidad y la posibilidad de configurar todos los parámetros disponibles en nuestra API.

Paso 1: Importar la SDK Javascript de Directo Pago

El primer paso para generar un botón de pago es incluir la SDK JS de la siguiente manera:

<script src="https://static.directopago.com/directopago.min.js"></script>

Paso 2: Crear una instancia de DirectoPago

Para generar una instancia de DirectoPago, precisará utilizar su API Key que puede ser obtenida desde el Panel.

const directoPago = new DirectoPago('API_key');

Para acceder a su API Key deberá ingresar en el Panel y hacer click en la opción Integración de pago del menú

Ambiente de pruebas

Para utilizar la SDK en nuestro ambiente de pruebas, se debe instanciar de la siguiente forma:

const directoPago = new DirectoPago('API_key_test', true);

En este caso, deberás utilizar la API key de tu cuenta de test. Si no sabes cómo obtener una visita: Ambiente de pruebas

Paso 3: Generar el botón de pago

Para poder generar un botón de pago, deberá utilizar los parámetros de configuración. El único parámetro requerido es amount. También se pueden incluir los parámetros currency (si no se incluye, se asume por defecto USD como moneda para el pago) y country (si no se incluye, se asumen todos).

Luego de definir el array de parámetros, el mismo debe ser utilizando al invocar la función createCheckout junto con el ID del elemento HTML del DOM donde se quiere desplegar el botón.

Pueden utilizarse todos los parámetros definidos en nuestra API.

const params = {				
    amount: 100.00 // Cobra 100 USD en todos los países
}
directopago.createCheckout('CONTAINER_ID', params);

const params = {		
    country: 'BR',		
    currency: 'BRL',		
    amount: 700.00	
}
directopago.createCheckout('CONTAINER_ID', params);

Paso 4 (opcional): Personalizar texto y estilos

Es posible elegir el texto del botón mediante el parámetro "text":

const params = {
  amount: 100.00,
  currency: 'USD',
  country: 'MX',
  text: 'Haz clic aquí para realizar el pago'
};
directopago.createCheckout('directopago', params);

Además, es posible personalizar el estilo del botón sobrescribiendo la siguiente clase CSS:

<style>
   .DirectoPagoButton {
   // Estilos para el botón
   }
</style>

Es recomendable enviar la documentación necesaria para subir la cuenta de nivel antes de comenzar a utilizar la integración, ya que de esta forma podrás acceder a límites mayores. Más información.