{"id":3130,"date":"2021-03-05T21:22:48","date_gmt":"2021-03-05T21:22:48","guid":{"rendered":"https:\/\/documents.openpay.mx\/?p=3130"},"modified":"2024-04-18T22:04:56","modified_gmt":"2024-04-18T22:04:56","slug":"card-charge","status":"publish","type":"post","link":"https:\/\/documents-mx-dev.opdevhm.com\/en\/docs\/card-charge.html","title":{"rendered":"Card Charges"},"content":{"rendered":"
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Charging a tokenized card<\/h1>

Everyone likes to receive payments, this is why we start with a tutorial to see how to do it.<\/p>

This tutorial uses the Openpay.js<\/a>, library to send the card information directly to Openpay. Using this library, besides being the easiest way to save a card, it minimizes the scope of a PCI Compliance certification.<\/p>

To make a charge to a card we will do the following:<\/h3>
\"To<\/center>

Steps:<\/p>

  1. Antifraud system implementation<\/a> to generate \"device_session_id\"<\/li>
  2. Create a token of debit or credit card using Openpay.js<\/a><\/li>
  3. Send charge information to your server<\/li>
  4. Send a charge request to Openpay<\/li>
  5. Openpay will sent a charge request to issuing bank and will answer<\/li><\/ol>

    Creating Forms<\/h2>

    We need to create a form to get the card information, saying the cards supported and the charge will be through Openpay.<\/p>

    \"Ejemplo<\/p>

    Code of the form.<\/p>

    Note:<\/strong><\/span> You can download the complete html here<\/a><\/em><\/p>

    <<\/span>form <\/span>action<\/span>=<\/span>\"#\"<\/span> method<\/span>=<\/span>\"POST\"<\/span> id<\/span>=<\/span>\"payment-form\"<\/span>><\/span>\n    <<\/span>input <\/span>type<\/span>=<\/span>\"hidden\"<\/span> name<\/span>=<\/span>\"token_id\"<\/span> id<\/span>=<\/span>\"token_id\"<\/span>><\/span>\n    <<\/span>input <\/span>type<\/span>=<\/span>\"hidden\"<\/span> name<\/span>=<\/span>\"use_card_points\"<\/span> id<\/span>=<\/span>\"use_card_points\"<\/span> value<\/span>=<\/span>\"false\"<\/span>><\/span>\n    <<\/span>div <\/span>class<\/span>=<\/span>\"pymnt-itm card active\"<\/span>><\/span>\n        <<\/span>h2<\/span>><\/span>Tarjeta de cr\u00e9dito o d\u00e9bito<\/<\/span>h2<\/span>><\/span>\n        <<\/span>div <\/span>class<\/span>=<\/span>\"pymnt-cntnt\"<\/span>><\/span>\n            <<\/span>div <\/span>class<\/span>=<\/span>\"card-expl\"<\/span>><\/span>\n                <<\/span>div <\/span>class<\/span>=<\/span>\"credit\"<\/span>><<\/span>h4<\/span>><\/span>Credit Cards<\/<\/span><\/span>h4<\/span>><\/<\/span><\/span>div<\/span>><\/span>\n                <<\/span>div <\/span>class<\/span>=<\/span>\"debit\"<\/span>><<\/span>h4<\/span>><\/span>Debit Cards<\/<\/span><\/span>h4<\/span>><\/<\/span><\/span>div<\/span>><\/span>\n            <\/<\/span><\/span>div<\/span>><\/span>\n            <<\/span>div <\/span>class<\/span>=<\/span>\"sctn-row\"<\/span>><\/span>\n                <<\/span>div <\/span>class<\/span>=<\/span>\"sctn-col l\"<\/span>><\/span>\n                    <<\/span>label<\/span>><\/span>Nombre del titular<\/<\/span><\/span>label<\/span>><<\/span>input <\/span>type<\/span>=<\/span>\"text\"<\/span> placeholder<\/span>=<\/span>\"Como aparece en la tarjeta\"<\/span> autocomplete<\/span>=<\/span>\"off\"<\/span> data-openpay-card<\/span>=<\/span>\"holder_name\"<\/span>><\/span>\n                <\/<\/span><\/span>div<\/span>><\/span>\n                <<\/span>div <\/span>class<\/span>=<\/span>\"sctn-col\"<\/span>><\/span>\n                    <<\/span>label<\/span>><\/span>N\u00famero de tarjeta<\/<\/span><\/span>label<\/span>><<\/span>input <\/span>type<\/span>=<\/span>\"text\"<\/span> autocomplete<\/span>=<\/span>\"off\"<\/span> data-openpay-card<\/span>=<\/span>\"card_number\"<\/span>><\/<\/span><\/span>div<\/span>><\/span>\n                <\/<\/span><\/span>div<\/span>><\/span>\n                <<\/span>div<\/span> class<\/span>=<\/span>\"sctn-row\"<\/span>><\/span>\n                    <<\/span>div<\/span> class<\/span>=<\/span>\"sctn-col l\"<\/span>><\/span>\n                        <<\/span>label<\/span>><\/span>Fecha de expiraci\u00f3n<\/<\/span><\/span>label<\/span>><\/span>\n                        <<\/span>div<\/span> class<\/span>=<\/span>\"sctn-col half l\"<\/span>><<\/span>input<\/span> type<\/span>=<\/span>\"text\"<\/span> placeholder<\/span>=<\/span>\"Mes\"<\/span> data-openpay-card<\/span>=<\/span>\"expiration_month\"<\/span>><\/<\/span><\/span>div<\/span>><\/span>\n                        <<\/span>div<\/span> class<\/span>=<\/span>\"sctn-col half l\"<\/span>><<\/span>input<\/span> type<\/span>=<\/span>\"text\"<\/span> placeholder<\/span>=<\/span>\"A\u00f1o\" <\/span>data-openpay-card<\/span>=<\/span>\"expiration_year\"<\/span>><\/<\/span><\/span>div<\/span>><\/span>\n                    <\/<\/span><\/span>div<\/span>><\/span>\n                    <<\/span>div<\/span> class<\/span>=<\/span>\"sctn-col cvv\"<\/span>><<\/span>label<\/span>><\/span>C\u00f3digo de seguridad<\/<\/span><\/span>label<\/span>><\/span>\n                        <<\/span>div<\/span> class<\/span>=<\/span>\"sctn-col half l\"<\/span>><<\/span>input<\/span> type<\/span>=<\/span>\"text\"<\/span> placeholder<\/span>=<\/span>\"3 d\u00edgitos\"<\/span> autocomplete<\/span>=<\/span>\"off\"<\/span> data-openpay-card<\/span>=<\/span>\"cvv2\"<\/span>><\/<\/span><\/span>div<\/span>><\/span>\n                    <\/<\/span><\/span>div<\/span>><\/span>\n                <\/<\/span><\/span>div<\/span>><\/span>\n                <<\/span>div <\/span>class<\/span>=<\/span>\"openpay\"<\/span>><<\/span>div<\/span> class<\/span>=<\/span>\"logo\"<\/span>><\/span>Transacciones realizadas v\u00eda:<\/<\/span><\/span>div<\/span>><\/span>\n                <<\/span>div<\/span> class<\/span>=<\/span>\"shield\"<\/span>><\/span>Tus pagos se realizan de forma segura con encriptaci\u00f3n de 256 bits<\/<\/span><\/span>div<\/span>><\/span>\n            <\/<\/span><\/span>div<\/span>><\/span>\n            <<\/span>div<\/span> class<\/span>=<\/span>\"sctn-row\"<\/span>><\/span>\n                    <<\/span>a<\/span> class<\/span>=<\/span>\"button rght\"<\/span> id<\/span>=<\/span>\"pay-button\"<\/span>><\/span>Pagar<\/<\/span><\/span>a<\/span>><\/span>\n            <\/<\/span><\/span>div<\/span>><\/span>\n        <\/<\/span><\/span>div<\/span>><\/span>\n    <\/<\/span><\/span>div<\/span>><\/span>\n<\/<\/span><\/span>form<\/span>><\/span><\/code><\/pre><\/figure>
    It\u2019s very important that the fields used to enter the card information have the data_openpay_card<\/code> attribute because this allows the Openpay library to find the information.<\/p>
    Note that the attribute name<\/code> <\/span>isn\u2019t being used to store the card information , this is because when you submit the form to your server the card info doesn\u2019t travel in the request because it\u2019s only used to create the token.<\/p>
    In the previous example form don't include the fields \"amount\" and \"description\" but should be included in the server submit.<\/p>
    Implementing antifraud system (Step 1)<\/h2>
    Import libraries to generate device id as follows:<\/p>
    <<\/span>head<\/span>><\/span>\n  <<\/span>script <\/span>type<\/span>=<\/span>\"text\/javascript\"<\/span>\n        src<\/span>=<\/span>\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.0\/jquery.min.js\"<\/span>><\/<\/span><\/span>script<\/span>><\/span>\n  <<\/span>script <\/span>type<\/span>=<\/span>\"text\/javascript\"<\/span>\n        src<\/span>=<\/span>\"https:\/\/js.openpay.mx\/openpay.v1.min.js\"<\/span>><\/<\/span><\/span>script<\/span>><\/span>\n<<\/span>script <\/span>type<\/span>=<\/span>'text\/javascript'<\/span>\n  src<\/span>=<\/span>\"https:\/\/js.openpay.mx\/openpay-data.v1.min.js\"<\/span>><\/<\/span><\/span>script<\/span>><\/span>\n<\/<\/span><\/span>head<\/span>><\/span><\/code><\/pre><\/figure>
    This way you can generate the device_session_id string:<\/p>
    <<\/span>script <\/span>type<\/span>=<\/span>\"text\/javascript\"<\/span>><\/span>\n $<\/span>(<\/span>document<\/span>).<\/span>ready<\/span>(<\/span>function<\/span><\/strong>()<\/span> {<\/span>\n  OpenPay<\/span>.<\/span>setId<\/span>(<\/span>'mzdtln0bmtms6o3kck8f'<\/span>);<\/span>\n  OpenPay<\/span>.<\/span>setApiKey<\/span>(<\/span>'pk_f0660ad5a39f4912872e24a7a660370c'<\/span>);<\/span>\n  var<\/span> <\/strong>deviceSessionId<\/span> =<\/span> OpenPay<\/span>.<\/span>deviceData<\/span>.<\/span>setup<\/span>(<\/span>\"payment-form\"<\/span>,<\/span> \"deviceIdHiddenFieldName\"<\/span>);<\/span>\n  });<\/span>\n<\/<\/span><\/span>script<\/span>><\/span><\/code><\/pre><\/figure>
    Parameter payment-form<\/code>, must store the form id which contains charge information to send. Say to he library this form contains the hidden field with the device_session_id<\/code>.<\/p>
    Parameter deviceIdHiddenFieldName<\/code>, needs the hidden field name than will store device_session_id<\/code>. This field is important if you will need to recover the fiel value then send it with submit action.<\/p>
    Tokenizing and sending data (Steps 2 and 3)<\/h2>
    Once we created our form, we will set up the send button to create a token using the Openpay.js<\/a>.<\/p>
    First add the Openpay.js<\/a> and JQuery files to the head<\/code>:<\/p>
    <<\/span>head<\/span>><\/span>\n  <<\/span>script <\/span>type<\/span>=<\/span>\"text\/javascript\"<\/span>\n        src<\/span>=<\/span>\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.0\/jquery.min.js\"<\/span>><\/<\/span><\/span>script<\/span>><\/span>\n  <<\/span>script <\/span>type<\/span>=<\/span>\"text\/javascript\"<\/span>\n        src<\/span>=<\/span>\"https:\/\/js.openpay.mx\/openpay.v1.min.js\"<\/span>><\/<\/span><\/span>script<\/span>><\/span>\n<\/<\/span><\/span>head<\/span>><\/span><\/code><\/pre><\/figure>
    Now let\u2019s set the merchant-id<\/code> and the public-key<\/code> to the Openpay library:<\/p>
    <<\/span>script <\/span>type<\/span>=<\/span>\"text\/javascript\"<\/span>><\/span>\n     $<\/span>(<\/span>document<\/span>).<\/span>ready<\/span>(<\/span>function<\/span><\/strong>()<\/span> {<\/span>\n            OpenPay<\/span>.<\/span>setId<\/span>(<\/span>'mzdtln0bmtms6o3kck8f'<\/span>);<\/span>\n            OpenPay<\/span>.<\/span>setApiKey<\/span>(<\/span>'pk_f0660ad5a39f4912872e24a7a660370c'<\/span>);<\/span>\n            OpenPay<\/span>.<\/span>setSandboxMode<\/span>(<\/span>true<\/span><\/strong>);<\/span>\n    });<\/span>\n<\/<\/span><\/span>script<\/span>><\/span><\/code><\/pre><\/figure>
    Finally we listen the clic event for \"pay\" button and change the submit action to make the card \"tokenization\":<\/p>
    $<\/span>(<\/span>'#pay-button'<\/span>).<\/span>on<\/span>(<\/span>'click'<\/span>,<\/span> function<\/span><\/strong>(<\/span>event<\/span>)<\/span> {<\/span>\n       event<\/span>.<\/span>preventDefault<\/span>();<\/span>\n       $<\/span>(<\/span>\"#pay-button\"<\/span>).<\/span>prop<\/span>(<\/span> \"disabled\"<\/span>,<\/span> true<\/span><\/strong>);<\/span>\n       OpenPay<\/span>.<\/span>token<\/span>.<\/span>extractFormAndCreate<\/span>(<\/span>'payment-form'<\/span>,<\/span> success_callbak<\/span>,<\/span> error_callbak<\/span>);<\/span>              \n});<\/span><\/code><\/pre><\/figure>
    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.<\/p>
    If everything works well, the method success_callback<\/em><\/strong> will be called to set the token id value token_id<\/code> and the data will be sent to the server:<\/p>
    var<\/span><\/strong> success_callbak<\/span> =<\/span> function<\/span><\/strong>(<\/span>response<\/span>)<\/span> {<\/span>\n              var<\/span> <\/strong>token_id<\/span> =<\/span> response<\/span>.<\/span>data<\/span>.<\/span>id<\/span>;<\/span>\n              $<\/span>(<\/span>'#token_id'<\/span>).<\/span>val<\/span>(<\/span>token_id<\/span>);<\/span>\n              $<\/span>(<\/span>'#payment-form'<\/span>).<\/span>submit<\/span>();<\/span>\n};<\/span><\/code><\/pre><\/figure>
    If there is a problem in the request, an alert will show the error:<\/p>
    var<\/span> <\/strong>error_callbak<\/span> =<\/span> function<\/span><\/strong>(<\/span>response<\/span>)<\/span> {<\/span>\n     var<\/span> <\/strong>desc<\/span> =<\/span> response<\/span>.<\/span>data<\/span>.<\/span>description<\/span> !=<\/span> undefined<\/span> ?<\/span><\/strong>\n        response<\/span>.<\/span>data<\/span>.<\/span>description<\/span> :<\/span> response<\/span>.<\/span>message<\/span>;<\/span>\n     alert<\/span>(<\/span>\"ERROR [\"<\/span> +<\/span> response<\/span>.<\/span>status<\/span> +<\/span> \"] \"<\/span> +<\/span> desc<\/span>);<\/span>\n     $<\/span>(<\/span>\"#pay-button\"<\/span>).<\/span>prop<\/span>(<\/span>\"disabled\"<\/span>,<\/span> false<\/span><\/strong>);<\/span>\n};<\/span><\/code><\/pre><\/figure>
    <\/a><\/p>
    For more reference about the library please go to the <\/a><\/em>Openpay.js<\/em><\/a><\/p>
    Using reward points (Optional)<\/h2>
    Optionally, we can accept payments using reward points, if the card supports them.<\/p>
    For this we add a modal dialog, which will allow the user to confirm the use of reward points for the charge. In this case, we will use a modal from the Bootstrap library:<\/p>
    <<\/span>div <\/span>class<\/span>=<\/span>\"modal fade\"<\/span> role<\/span>=<\/span>\"dialog\"<\/span> id<\/span>=<\/span>\"card-points-dialog\"<\/span>><\/span>\n  <<\/span>div <\/span>class<\/span>=<\/span>\"modal-dialog modal-sm\"<\/span>><\/span>\n    <<\/span>div <\/span>class<\/span>=<\/span>\"modal-content\"<\/span>><\/span>\n      <<\/span>div <\/span>class<\/span>=<\/span>\"modal-header\"<\/span>><\/span>\n        <<\/span>h4 <\/span>class<\/span>=<\/span>\"modal-title\"<\/span>><\/span>Pagar con Puntos<\/<\/span><\/span>h4<\/span>><\/span>\n      <\/<\/span><\/span>div<\/span>><\/span>\n      <<\/span>div<\/span> class<\/span>=<\/span>\"modal-body\"<\/span>><\/span>\n        <<\/span>p<\/span>><\/span>\u00bfDesea usar los puntos de su tarjeta para realizar este pago?<\/<\/span><\/span>p<\/span>><\/span>\n      <\/<\/span><\/span>div<\/span>><\/span>\n      <<\/span>div<\/span> class<\/span>=<\/span>\"modal-footer\"<\/span>><\/span>\n        <<\/span>button<\/span> type<\/span>=<\/span>\"button\"<\/span> class<\/span>=<\/span>\"btn btn-default\"<\/span> data-dismiss<\/span>=<\/span>\"modal\"<\/span> id<\/span>=<\/span>\"points-no-button\"<\/span>><\/span>No<\/<\/span><\/span>button<\/span>><\/span>\n        <<\/span>button<\/span> type<\/span>=<\/span>\"button\"<\/span> class<\/span>=<\/span>\"btn btn-primary\"<\/span> data-dismiss<\/span>=<\/span>\"modal\"<\/span> id<\/span>=<\/span>\"points-yes-button\"<\/span>><\/span>Yes<\/<\/span><\/span>button<\/span>><\/span>\n      <\/<\/span><\/span>div<\/span>><\/span>\n    <\/<\/span><\/span>div<\/span>><\/span>\n  <\/<\/span><\/span>div<\/span>><\/span>\n<\/<\/span><\/span>div<\/span>><\/span><\/code><\/pre><\/figure>
    Now with the modal HTML code, we modify the function success_callback we previously defined, so it shows the modal dialog if the card supports reward points:<\/p>
    var<\/span> <\/strong>success_callbak<\/span> =<\/span> function<\/span><\/strong>(<\/span>response<\/span>)<\/span> {<\/span>\n              var<\/span> <\/strong>token_id<\/span> =<\/span> response<\/span>.<\/span>data<\/span>.<\/span>id<\/span>;<\/span>\n              $<\/span>(<\/span>'#token_id'<\/span>).<\/span>val<\/span>(<\/span>token_id<\/span>);<\/span>\n              if<\/span> <\/strong>(<\/span>response<\/span>.<\/span>data<\/span>.<\/span>card<\/span>.<\/span>points_card<\/span>)<\/span> {<\/span>\n                  \/\/ Si la tarjeta permite usar puntos, mostrar el cuadro de di\u00e1logo<\/span>\n                  $<\/span>(<\/span>\"#card-points-dialog\"<\/span>).<\/span>modal<\/span>(<\/span>\"show\"<\/span>);<\/span>\n              }<\/span> else<\/span> <\/strong>{<\/span>\n                  \/\/ De otra forma, realizar el pago inmediatamente<\/span>\n                  $<\/span>(<\/span>'#payment-form'<\/span>).<\/span>submit<\/span>();<\/span>\n              }<\/span>\n};<\/span><\/code><\/pre><\/figure>
    Now we will attach events to the modal's buttons in order to change the value of the hidden field use_card_points, and then send the payment request to the server:<\/p>
    $<\/span>(<\/span>\"#points-yes-button\"<\/span>).<\/span>on<\/span>(<\/span>'click'<\/span>,<\/span> function<\/span><\/strong>(){<\/span>\n              $<\/span>(<\/span>'#use_card_points'<\/span>).<\/span>val<\/span>(<\/span>'true'<\/span>);<\/span>\n              $<\/span>(<\/span>'#payment-form'<\/span>).<\/span>submit<\/span>();<\/span>\n});<\/span><\/code><\/pre>
    $<\/span>(<\/span>\"#points-no-button\"<\/span>).<\/span>on<\/span>(<\/span>'click'<\/span>,<\/span> function<\/span><\/strong>(){<\/span>\n        $<\/span>(<\/span>'#use_card_points'<\/span>).<\/span>val<\/span>(<\/span>'false'<\/span>);<\/span>\n        $<\/span>(<\/span>'#payment-form'<\/span>).<\/span>submit<\/span>();<\/span>\n        });<\/span><\/code><\/pre><\/figure>
    Notes:<\/strong><\/p>