> 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

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.

{% 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!

![](https://1663381750-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MV1ocDMN1KvnqnXyK_m%2F-MeBw_BriptAxF8fAzSs%2F-MeBxjTpQ30OK56sRn-G%2FF548EF45-6B01-4C4E-BA29-377FCAAA2B59.png?alt=media\&token=373892f0-1d9d-48fe-91d4-7655c96a0a80)

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

![](https://1663381750-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MV1ocDMN1KvnqnXyK_m%2F-Meb9gmwJ-aZZTe_7Nqs%2F-MelFB0E64TLSabwpZDG%2FDAC25C8C-5F54-41B4-9A1A-F52570B11C67.png?alt=media\&token=0e3a4027-4699-4264-84eb-b103e5799c99)

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

![](https://1663381750-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MV1ocDMN1KvnqnXyK_m%2F-Meb9gmwJ-aZZTe_7Nqs%2F-MelGejFzJdrpZO3BuYJ%2F33AE8D6B-3CA8-479D-85D2-9389AD866464.png?alt=media\&token=b4fac39d-af2e-4e79-9ada-663803ab33fc)

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