OneClick

Throughout the tutorial for card charge we showed how to do a charge by first creating a token (using Openpay.js) and then send it in the charge request.

This is very useful when a customer comes to our site and we just want to make a charge at that moment, but when we want to keep the card info, so that the client can use it multiple times without having to re-enter data, we have to save the card information. This tutorial will show you how to do it.

The steps to save the customer card info are:

  1. Create a form to request the information
  2. Create a token
  3. Create a customer
  4. Create a customer card using the token
  5. Create a charge using the token

Create a form to request the information

First create the form to request information from your customer (name and email) and card details (number, expiration date, 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&oacute;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&uacute;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&oacute;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>

 

It’s very important that the fields used to enter the card information have the data_openpay_card attribute because this allows the Openpay library to find the information.

Note that the attribute name isn’t being used to store the card information , this is because when you submit the form to your server the card info doesn’t travel in the request because it’s only used to create the token.

Create a token

Once we created our form, we will set up the send button to create a token using the Openpay.js.

First add the head and Openpay.js files to the head:

 

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

 

Now let’s set the merchant-id and the public-key to the Openpay library:

 

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

 

And finally let’s catch the click event of the Save button, so instead of submitting the form it creates the token function of the card.

 

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

 

As you can see we are passing as a parameter the name of the form created, this is so the library gets the card information and makes the request to Openpay.

If everything works well, the method success_callback will be called to set the token id value token_id and the data will be sent to the server:

 

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

 

If there is a problem in the request, an alert will show the error:

 

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);
};

 

For further reference on the use of the library, see the Openpay.js

Create a customer

When doing the implementation of the /save_customer_card implementation you have to do the following in order to create the customer:

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

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

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

Note: For this example, we create the customer using the requires_account = false​ flag which means that the account balance will not handle itself.

For more information about the types of clients see the customers tutorial

Create a customer card using the token

Now this only requires to use the token_id that comes with the request to save and assign the card to the customer.

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

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

The card object has an id which has to be saved in your server in order to make future charges to that card. For more information go to Create Card with a Token. ​

Notes: You can simulate different results using the cards Testing