Cobrar a tarjeta

En esta sección veremos como cobrar a tarjetas de crédito o débito usando la API de QVO.

Desde el punto de vista del cliente, el flujo de pago empieza cuando es redirigido desde tu sitio web/aplicación a un sitio seguro provisto por Transbank. Aquí el cliente ingresa los datos de su tarjeta para luego volver a tu sitio web/aplicación donde se le informa si la transacción fue exitosa o fallida.


Flujo pago de cara a cliente


Para realizar este flujo necesitas completar 3 pasos:

  1. Iniciar el cobro y redirigir al cliente
  2. Capturar la respuesta
  3. Obtener el resultado

Paso 1: Iniciar el cobro y redirigir al cliente

Para iniciar el cobro debes realizar una llamada a

POST https://playground.qvo.cl/webpay_plus/charge

Especificando el monto amount y la url de retorno return_url. Opcionalmente puedes agregar información adicional (ver documentación completa).

curl --request POST "https://playground.qvo.cl/webpay_plus/charge" \
  -H "Authorization: Bearer <COPIA TU API TOKEN AQUÍ>" \
  -d amount=2000 \
  -d return_url="https://www.tu-aplicacion.com/return" \
<?php
require 'guzzle.phar';

$client = new GuzzleHttp\Client();

$body = $client->request('POST', 'https://playground.qvo.cl/webpay_plus/charge', [
  'json' => [
    'amount' => 2000,
    'return_url' => "https://www.tu-aplicacion.com/return"
  ],
  'headers' => [
    'Authorization' => 'Bearer <COPIA TU API TOKEN AQUÍ>'
  ]
])->getBody();

$response = json_decode($body);

var_dump($response);

// Ejemplo de redirección PHP genérico
header('Location: '.$response['redirect_url']);

// Laravel
return redirect($response['redirect_url']);
?>
const fetch = require('node-fetch-json');

fetch('https://playground.qvo.cl/webpay_plus/charge', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer <COPIA TU API TOKEN AQUÍ>'
  },
  body: {
    amount: 2000,
    return_url: "https://www.tu-aplicacion.com/return"
}).then(function(response) {
  console.log(response);

  // Ejemplo de redirección para Express
  res.redirect(response.return_url);
});
require 'rest-client'
require 'json'

result =
  RestClient.post 'https://playground.qvo.cl/webpay_plus/charge', {
    amount: 2000,
    return_url: "https://www.tu-aplicacion.com/return"
  }, {
    Authorization: 'Bearer <COPIA TU API TOKEN AQUÍ>'
  }

response = JSON.parse(result)
p response

# Ejemplo de redirección para Ruby on Rails
redirect_to response['redirect_url']

# Sinatra
redirect response['redirect_url']
import requests

r = requests.post('https://playground.qvo.cl/webpay_plus/charge', params={
  amount: 2000,
  return_url: "https://www.tu-aplicacion.com/return"
}, headers= {
  Authorization: 'Bearer <COPIA TU API TOKEN AQUÍ>'
})

response = r.json()
print response

# Ejemplo de redirección para Django
return redirect(response['redirect_url'])

La llamada tendrá dentro de su repuesta una URL redirect_url donde debes redirigir a el cliente. Esta URL corresponde a un sitio seguro donde debe ingresar los datos de su tarjeta para realizar la transacción.

{
    "transaction_id": "trx_Z5ohCKPrkFc4Od6JbwrmAA",
    "redirect_url": "https://playground.qvo.cl/webpay_plus/init_transaction/wpt_4roDGpK6w1XpyB4F9Wu-pg",
    "expiration_date": "2017-10-20T20:10:40.081Z"
}

ℹ Las llamadas de este tutorial usan la URL de prueba https://playground.qvo.cl. Sin embargo cuando tengas tu cuenta real (de producción) debes usar la URL https://api.qvo.cl

Paso 2: Capturar la respuesta

Una vez completada la transacción, el cliente retornará con una llamada GET a el return_url proporcionado como parámetro en el paso 1. Por lo tanto es necesario que habilites dicha ruta en tu sistema para capturar la llamada. En el ejemplo la ruta a habilitar sería:

https://www.tu-aplicacion.com/return.

La llamada irá acompañada del parámetro transaction_id, que representa el identificador único de la transacción.

Por ejemplo:

Para return_url = http://www.tu-aplicacion.com/return

el cliente retornará a la ruta:

GET https://www.tu-aplicacion.com/return?transaction_id=trx_fzmNpXvJJZBWwGbH5fW8cw

donde transaction_id es igual a trx_fzmNpXvJJZBWwGbH5fW8cw.

Paso 3: Obtener el resultado

Para verificar si la transacción fue exitosa, debes consultar su estado haciendo una llamada a

GET https://playground.qvo.cl/transactions/{transaction_id}.

transaction_id es el identificador obtenido en el paso anterior.

curl --request GET "https://playground.api.qvo.cl/transactions/<COPIA EL ID DE LA TRANSACCIÓN AQUÍ>" \
  -H "Authorization: Bearer <COPIA TU API TOKEN AQUÍ>"
<?php
require 'guzzle.phar';

$client = new GuzzleHttp\Client();

$response = $client->request('GET', 'https://playground.qvo.cl/transactions/<COPIA EL ID DE LA TRANSACCIÓN AQUÍ>', [
  'headers' => [
    'Authorization' => 'Bearer <COPIA TU API TOKEN AQUÍ>'
  ]
])->getBody();

$response = json_decode($body);

var_dump($response);
?>
const fetch = require('node-fetch-json');

fetch('https://playground.qvo.cl/transactions/<COPIA EL ID DE LA TRANSACCIÓN AQUÍ>', {
  headers: {
    'Authorization': 'Bearer <COPIA TU API TOKEN AQUÍ>'
  }
}).then(function(response) {
  console.log(response);
});
require 'rest-client'
require 'json'

result =
  RestClient.get 'https://playground.qvo.cl/transactions/<COPIA EL ID DE LA TRANSACCIÓN AQUÍ>', {
    Authorization: 'Bearer <COPIA TU API TOKEN AQUÍ>'
  }

p JSON.parse(result)
  import requests

r = requests.get('https://playground.qvo.cl/transactions/<COPIA EL ID DE LA TRANSACCIÓN AQUÍ>', headers= {
  Authorization: "Bearer <COPIA TU API TOKEN AQUÍ>"
})

print r.json()

La respuesta será algo así:

{
    "id": "trx_fzmNpXvJJZBWwGbH5fW8cw",
    "created_at": "2017-08-03T04:08:43.313Z",
    "amount": 14000,
    "currency": "CLP",
    "description": "Otro sitio",
    "credits": 0,
    "status": "successful",
    "gateway": "Webpay Normal",
    "customer": {
        "id": "cus_YID2j7CbL7K8and4cc4JmQ",
        "name": "Tyrion Lannister",
        "email": "theimp@lannister.gov"
    },
    "payment": {
        "amount": 14000,
        "fee": 808,
        "gateway": "Webpay Normal",
        "payment_type": "credit",
        "installments": 0
    },
    "refund": null,
    "gateway_response": {
        "status": "success",
        "message": "transacción aprobada"
    }
}

En este punto debes verificar que el estado status de la transacción. Si el estado es exitoso successful ya puedes contar con el dinero y puedes redirigir a tu cliente a una pantalla de éxito.

Otros posibles estados para la transacción son:

  • waiting_response: Esperando que el usuario ingrese los datos de su tarjeta
  • response_timeout: El tiempo de espera superó los 5 minutos
  • unable_to_charge: No fue posible realizar el cobro
  • rejected: Rechazado
  • refunded: Se hizo un reembolso de la transacción.

Si el resultado de la transacción fue unable_to_charge o rejected debes notificar al cliente que el cobro no se pudo realizar. Es buena idea hacer un reintento en este momento 😉.

Espero que esta guía haya sido de ayuda para realizar tu primer cobro. Si tienes duda contáctanos a soporte@qvo.cl o al chat dentro del panel.


Ejemplos