# Botón de pago

{% hint style="success" %}
Si aún no creaste tu cuenta en Directo Pago, visita primero el siguiente link: <https://docs.directopago.com/primeros-pasos>
{% endhint %}

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

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!

![](/files/-MeBxjTpQ30OK56sRn-G)

## 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.](https://panel.directopago.com/payment-integration?item=3)

![](/files/-MelFB0E64TLSabwpZDG)

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.&#x20;

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".&#x20;

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. &#x20;

{% hint style="info" %}
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.
{% endhint %}

## 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:

```javascript
<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.

```javascript
const directoPago = new DirectoPago('API_key');
```

Para acceder a su API Key deberá ingresar en el [Panel](https://panel.directopago.com/) 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:

```javascript
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](/integraciones/checkout-api/ambiente-de-pruebas.md)

### 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.

{% hint style="info" %}
Pueden utilizarse todos los parámetros definidos en [nuestra API](/integraciones/checkout-api.md).
{% endhint %}

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

```javascript
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":

```javascript
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:

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

![](/files/-MelGejFzJdrpZO3BuYJ)

{% hint style="info" %}
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](/sistema-de-niveles.md).
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.directopago.com/integraciones/boton-de-pago.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.