> For the complete documentation index, see [llms.txt](https://docs.directopago.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.directopago.com/integraciones/boton-de-pago.md).

# 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 %}