Widget & Checkout Web

Comienza a aceptar pagos de manera segura en minutos

Acepta pagos en tu sitio web en minutos usando una de nuestras dos opciones de Checkout:

Widget
Web Checkout

Permite que tus clientes completen el pago sin salir de tu sitio web, dentro de nuestro widget de pagos, simplemente incluyendo una etiqueta <script> (debes poder incluir Javascript en tu sitio). Puedes ver un ejemplo a continuación:

Deja que tus clientes completen el pago fuera de tu website, a través de nuestro Checkout usando un formulario HTML estándar.

Ambos métodos de integración ofrecen una experiencia de pago rápida y segura para tus clientes.

Paso a paso

Paso 1 — Alista tu llave pública de comercio.
Paso 2 — Genera una referencia única de pago
Paso 3 — Prepara una URL de redirección para el momento de finalizar el pago
Paso 4 — Ten en cuenta los parámetros obligatorios y opcionales de una transacción
Paso 5 — Escoge un método de integración de checkout

Por último, mientras estés completado la integración, la mejor manera de verificarla es realizar una transacción de pruebas.

Usa HTTPS

Te recomendamos fuertemente usar HTTPS en tu sitio web, ya que no sólo tus clientes se sentirán más seguros a la hora de navegar y hacer pagos, sino que también evitarás que tu sitio sea marcado como "No seguro", un cambio que Google Chrome alertó que haría desde el 24 de julio de 2018. Algo importante a tener en cuenta ya que sólo este navegador representa más del 60% del tráfico en la web.

Paso 1: Alista tu llave pública de comercio

Para cualquiera de las integraciones que hagas con Wompi, deberás contar con una llave pública de comercio, que se ve como la siguiente:

pub_prod_Kw4aC0rZVgLZQn209NbEKPuXLzBD28Zx

Obtén tus llaves Wompi

Para obtener tus par de llaves Wompi, sólo debes registrarte en nuestro dashboard de Comercios si aún no lo has hecho. ¡Es así de fácil!

Esta nos permite identificarte cada vez que se procesa un pago a través de Wompi. Si no tienes tu llave pública aún, haz clic acá para entender cómo obtener una llave pública de comercio.

Recuerda que hay llaves de sandbox y producción

Las llaves de sandbox (entorno de pruebas) tienen el prefijo pub_test_, mientras que las de producción tienen el prefijo pub_prod_. Para transacciones reales usa la llave de producción; para hacer transacciones de prueba, mientras integras y desarrollas, usa la llave de sandbox

Paso 2: Genera una referencia única de pago

Para cada compra que tus clientes hagan en tu website, deberás generar una referencia única de pago (similar a como funciona un número de factura en el mundo real). De esta manera podrás
hacer seguimiento a cada transacción que se complete en Wompi y evitarás duplicar transacciones por accidente. Esto quiere decir que una vez se complete una transacción, no podrás reutilizar una referencia que ya exista en tu base de datos.

Recomendamos usar referencias numéricas o alfanuméricas, que pueden o no incluir guiones (-) o guiones bajos (_). Los siguientes son ejemplos de referencias válidas:

  • 3b4393bafed398ba2
  • 54937
  • 10384200283
  • 58e281-177ab976cbf9-d162d2
  • 38932_3293298
  • 0f760951ed_a0086f

Paso 3: URL de redirección

Al finalizar una transacción, Wompi redirigirá al usuario a una URL (que debe pertenecer a tu sitio web), en la cual podrás consultar el resultado final (status) de la transacción. Esto lo puedes hacer usando el id de la transacción, el cual estará disponible como un parámetro de la URL.

Así por ejemplo, si tu URL es:

https://mitienda.com.co/pagos/respuesta

La URL a la que Wompi redirigirá es similar a la siguiente:

https://mitienda.com.co/pagos/respuesta?id=01-1531231271-19365

Así, puedes usar el parámetro id disponible en la URL para verificar la transacción usando nuestro API.

Paso 4: Parámetros de la transacción

Para cada transacción puedes proveer parámetros como el monto a cobrar, la moneda en la que quieres cobrar, etc. Algunos de estos parámetros son obligatorios y otros son opcionales.

Parámetros obligatorios

Los siguientes son los parámetros obligatorios que debes tener en cuenta para crear una transacción:

  • public-key (Llave pública de comercio): Llave pública de comercio.
  • currency (Moneda): Moneda en la que vas a hacer el cobro. La única moneda disponible actualmente es COP (pesos colombianos).
  • amount-in-cents (Monto en centavos): Monto a cobrar, en centavos. Por ejemplo si deseas cobrar $95.000 COP, deberás ingresar: 9500000
  • reference (Referencia única de pago): Referencia única de pago.
  • redirect-url (URL de redirección): Es la URL a la que el usuario será redirigido luego completar el proceso de pago, conteniendo el id de la transacción respectiva.

Paso 5: Escoge un método de integración

Escoge una de las dos opciones de integración:

  • Widget: Permite que tus clientes completen el pago dentro de tu sitio web en nuestro Widget.
  • Web: Tus clientes completan el pago en nuestro Web Checkout.

Widget Checkout

Este el el método más simple para que tus clientes completen un pago sin salir de tu sitio web. Con tan solo unas líneas de HTML, un botón de pagos se mostrará automáticamente.

Al hacer clic en el botón, el cliente continúa el proceso de pago dentro de nuestro widget, sin salir de tu sitio web. Si quieres un botón a la medida, lee la sección de Botón personalizado.

A continuación verás un ejemplo del botón generado con el mismo código que encuentras debajo:

<form>
  <script
    src="https://checkout.wompi.co/widget.js"
    data-render="button"
    data-public-key="pub_test_Q5yDA9xoKdePzhSGeVe9HAez7HgGORGf"
    data-currency="COP"
    data-amount-in-cents="4950000"
    data-reference="4XMPGKWWPKWQ"
    data-redirect-url="https://transaction-redirect.wompi.co/check"
    >
  </script>
</form>

El código que ves arriba tiene los parámetros mínimos necesarios para generar un botón de pago que permite a tu cliente pagar en nuestro widget. Así, sólo necesitas incluir una etiqueta <script> con los parámetros de la transacción, dentro de una etiqueta <form> en tu código, para generar el botón.

Sólo necesitas tener en cuenta dos cosas para generar el botón:

  1. Incluye el parámetro data-render="button", que indica que quieres generar un botón automáticamente.
  2. Para los parámetros listados arriba debes usar el prefijo data- en cada uno, para especificarlo (i.e. data-reference, data-currency, data-amount-in-cents, etc.)

Un ejemplo con todos los parámetros se ve como el siguiente:

<form>
  <script
    src="https://checkout.wompi.co/widget.js"
    data-render="button"
    data-public-key="pub_test_Q5yDA9xoKdePzhSGeVe9HAez7HgGORGf"
    data-currency="COP"
    data-amount-in-cents="7890000"
    data-reference="37DNKF84S92N1S"
    data-redirect-url="https://transaction-redirect.wompi.co/check"
    >
  </script>
</form>

Web Checkout

Este es el método más rápido para integrar Wompi en tu sitio web, usando únicamente un formulario HTML estándar:

<form action="https://checkout.wompi.co/p/" method="GET">
  <!-- OBLIGATORIOS -->
  <input type="hidden" name="public-key" value="LLAVE_PUBLICA_DEL_COMERCIO" />
  <input type="hidden" name="currency" value="MONEDA" />
  <input type="hidden" name="amount-in-cents" value="MONTO_EN_CENTAVOS" />
  <input type="hidden" name="reference" value="REFERENCIA_DE_PAGO" />
  <!-- OPCIONALES -->
  <input type="hidden" name="redirect-url" value="URL_REDIRECCION" />
  
  <button type="submit">Pagar con Wompi</button>
</form>

De esta forma, sólo debes asegurarte de llenar correctamente los parámetros obligatorios e incluir este código en donde quieras que tus clientes vean el botón para completar el pago. Una vez hagan clic en él, serán llevados a nuestro Web Checkout donde podrán completar el pago de manera rápida y segura.

Transacción de pruebas

Para realizar una transacción de pruebas sólo debes asegurarte que estás usando una llave pública de comercio para el ambiente Sandbox. Recuerda que esta tiene el prefijo pub_test_.

A continuación verás los datos de prueba necesarios para cada uno de los métodos de pago:

Tarjeta de crédito

Para una transacción de pruebas con tarjeta de crédito puedes usar los siguientes números de tarjeta para obtener respuestas distintas:

  • 4242 4242 4242 4242 para una transacción aprobada (APPROVED). Cualquier fecha de expiración en el futuro y CVC de 3 dígitos son válidos.
  • 4111 1111 1111 1111 para una transacción declinada (DECLINED). Cualquier fecha de expiración en el futuro y CVC de 3 dígitos son válidos.

Otras tarjetas

Si usas cualquier otra tarjeta que no sea alguna de estas dos, el estado final de la transacción será ERROR.

Nequi

Para realizar transacciones aprobadas o rechazadas en modo Sandbox sólo debes tener en cuenta los siguientes números:

  • 3991111111 para generar una transacción aprobada (APPROVED)
  • 3992222222 para generar una transacción declinada (DECLINED)

Ten en cuenta que cualquier otro número que utilices resultará en una transacción en estado final de ERROR

PSE

Para pagos simulados con PSE saldrán listados dos únicamente dos bancos que entregarán resultados específicos de transacciones:

  • Banco que aprueba: Con este, obtienes una transacción aprobada de PSE.
  • Banco que rechaza: Con este, obtienes una transacción declinada de PSE.

Botón personalizado (opcional)

Si quieres ofrecer una integración personalizada a tus clientes, como por ejemplo un botón con estilos propios, o abrir el widget dada cierta acción de un usuario, simplemente debes seguir los siguientes pasos:

Paso 1: Incluye el script del widget

Agrega esta etiqueta preferiblemente dentro del <head> de tu HTML:

<script type="text/javascript" src="https://checkout.wompi.co/widget.js"></script>

Paso 2: Configura los datos de la transacción

Configura una instancia del checkout con el objeto de configuración, cuyos campos se muestran a continuación con valores de ejemplo. Todos son obligatorios, excepto redirectUrl.

let checkout = new WidgetCheckout({
  currency: 'COP',
  amountInCents: 2490000,
  reference: 'AD002901221',
  publicKey: 'pub_fENJ3hdTJxdzs3hd35PxDBSMB4f85VrgiY3b6s1',
  redirectUrl: 'https://transaction-redirect.wompi.co/check' // Opcional
})

Paso 3: Abre el widget

Finalmente, en el momento en que quieras abrir el widget que configuraste anteriormente simplemente debes llamar la función open, así:

checkout.open()

Widget & Checkout Web


Comienza a aceptar pagos de manera segura en minutos

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.