Inicio

Guías

Referencia

Plugins

OneClick

En la guía de cargo con token vimos como realizar un cargo creando primero un token (usando Openpay.js) y luego enviarlo dentro de la petición de cargo. Esto es muy útil para cuando un cliente llega a nuestro sitio y solo deseamos realizarle el cargo en ese momento, pero cuando deseamos mantener los datos de la tarjeta, para que el cliente la pueda ocupar en múltiples ocasiones sin necesidad de volverla a introducir los datos, lo tenemos que hacer es guardar la tarjeta para posteriormente poder utilizarla sin necesidad de volverla a pedir al cliente. Los pasos para realizar esto son:

Crear formulario para pedir los datos
Crear un token
Crear un cliente
Guardar la tarjeta al cliente usando el token
Crea un cargo usando el token

Crear formulario para pedir los datos

Primero crearemos el formulario para pedir la información de nuestro cliente (nombre y correo electrónico) y los datos de su tarjeta (número, fecha de expiración, etc).

<form action="/save_customer_card" method="POST" id="customer-form">
        <input type="hidden" name="token_id" id="token_id"/>
        <fieldset>
          <legend>Datos del cliente</legend>
        <p>
          <label>Nombre</label>
          <input type="text" size="20" autocomplete="on" name="client_name"/>
        </p>
        <p>
          <label>Correo Electrónico</label>
          <input type="text" size="20" autocomplete="on" name="cliente_email"/>
        </p>
        </fieldset>
        <fieldset>
          <legend>Datos de la tarjeta</legend>
        <p>
          <label>Nombre</label>
          <input type="text" size="20" autocomplete="off"
            data-openpay-card="holder_name" />
        </p>
        <p>
          <label>Número</label>
          <input type="text" size="20" autocomplete="off"
            data-openpay-card="card_number" />
        </p>
        <p>
          <label>CVV2</label>
          <input type="text" size="4" autocomplete="off"
            data-openpay-card="cvv2" />
        </p>
        <p>
          <label>Fecha de expiración (MM/YY)</label>
          <input type="text" size="2" data-openpay-card="expiration_month" /> /
          <input type="text" size="2" data-openpay-card="expiration_year" />
        </p>
        </fieldset>
        <input type="submit" id="save-button" value="Pagar"/>
</form>

Es muy importante que los campos en donde se va a introducir la información de la tarjeta tenga el atributo data_openpay_card ya que esto permitirá a la librería de Openpay encontrar la información. Observa que para los datos de la tarjeta no se está ocupando el atributo name esto para que al momento de enviar el formulario a tu servidor los datos de la tarjeta no viajen en la petición ya que sólo los vamos a ocupar para crear el token.

Crear un token

Una vez que tenemos nuestro formulario creado, vamos a programar que en el botón de enviar se cree un token utilizando la librería Openpay.js. Primero agregamos al head el archivo de Openpay.js y el archivo de JQuery:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://js.openpay.mx/openpay.v1.min.js"></script>

Luego asignamos a la librería de Openpay nuestro merchant-id y nuestra llave pública (public-key):

<script type="text/javascript">
     $(document).ready(function() {
            OpenPay.setId('mzdtln0bmtms6o3kck8f');
            OpenPay.setApiKey('pk_f0660ad5a39f4912872e24a7a660370c');
            OpenPay.setSandboxMode(true);
    });
</script>

Y por último atrapamos el evento de clic del botón Save para que en lugar de que haga el submit del formulario realice la función tokenize de la tarjeta:

$('#save-button').on('click', function(event) {
       event.preventDefault();
       $("#save-button").prop( "disabled", true);
       OpenPay.token.extractFormAndCreate('customer-form', success_callbak, error_callbak);
});

Como puedes ver estamos pasando como parámetro el nombre del formulario creado, esto para que la librería obtengan los datos de la tarjeta y haga la petición a Openpay. Si todo sale bien se llamará el método success_callback en el cual asignaremos el valor id del token creado al campo token_id y enviaremos los datos al servidor:

var success_callbak = function(response) {
              var token_id = response.data.id;
              $('#token_id').val(token_id);
              $('#customer-form').submit();
};

Si existe un problema en la llamada mostramos el error en un alert:

var error_callbak = function(response) {
     var desc = response.data.description != undefined ? response.data.description : response.message;
     alert("ERROR [" + response.status + "] " + desc);
     $("#save-button").prop("disabled", false);
};

Para mayor referencia del uso de la librería ver la página de Openpay.js

Crear un cliente

Ya en tu servidor en la implementación de la página /save_customer_card realizaremos lo siguiente para crear al cliente:


$openpay = Openpay::getInstance('mzdtln0bmtms6o3kck8f', 'sk_e568c42a6c384b7ab02cd47d2e407cab');

$customerData = array(
    'name' => $_POST["client_name"],
    'email' => $_POST["cliente_email"],
    'requires_account' => false);

$customer = $openpay->customers->add($customerData);

Nota: Observa que para este ejemplo, creamos el cliente usando la bandera de de requires_account = false lo cual significa que la cuenta no manejará saldo propio. Para mas información acerca de los tipos de clientes consulta la guía de clientes

Guardar la tarjeta al cliente usando el token

Ahora sólo resta usar el token_id que viene en la petición para guardar y asignar la tarjeta al cliente.


$cardData = array(
  'token_id' => $_POST["token_id"]
  'device_session_id' => $_POST["device_session_id"]
  );

$card = $customer->cards->add($cardData);

El objeto card contiene un id, el cual debes guardar en tu servidor ya con el podrás hacer cargos a esa tarjeta después. Puedes consultar la referencia de Crear Tarjeta con Token para mas información. Notas: Puedes simular diferentes resultados usando las tarjetas de Pruebas