Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on email
Share on print
PayU Latam Wordpress y Contact Form 7

PayU Latam con WordPress Recibir Donaciones

5
5,0 rating
5 out of 5 stars (based on 3 reviews)
Excelente100%
Muy buena0%
Promedio0%
Buenos0%
Terrible0%

PayU Latam permite recibir donaciones den tu página web puede ser tu necesidad y por esa razón llegaste a a nuestro sitio web, y lo mejor sería si lo podemos hacer desde nuestro WordPress con las herramientras que más utilizamos en nuestro día a día, sigue estos 7 pasos.

PayU Latam Documentación

Visitemos el sitio web de PayU Latam para desarrolladores de PayU Latam y conozcamos los campos que se requieren para una transacción en esta pasarela de pagos.

Debes tener en cuenta que si requieres una dirección de entrega debes agregar los campos para el envío y el siguiente ejemplo utiliza la URL de pruebas, cuando salgas a produccuín debes utilizar la URL para producción.

 <form method="post" action="https://sandbox.checkout.payulatam.com/ppp-web-gateway-payu/">
  <input name="merchantId" type="hidden" value="508029">
  <input name="accountId" type="hidden" value="512321">
  <input name="description" type="hidden" value="Test PAYU">
  <input name="referenceCode" type="hidden"  value="TestPayU" >
  <input name="amount" type="hidden" value="20000">
  <input name="tax" type="hidden" value="3193">
  <input name="taxReturnBase" type="hidden" value="16806">
  <input name="currency" type="hidden"  value="COP">
  <input name="signature" type="hidden"  value="7ee7cf808ce6a39b17481c54f2c57acc">
  <input name="test" type="hidden" value="1">
  <input name="buyerEmail" type="hidden" value="[email protected]" >
  <input name="responseUrl" type="hidden" value="http://www.test.com/response" >
  <input name="confirmationUrl" type="hidden" value="http://www.test.com/confirmation" >
  <input name="Submit" type="submit" value="Enviar" >
</form>

Creación del formulario.

Creamos un el formulario con los campos que debe diligenciar el donante, para esto utilizamos el plugin Contact Form 7, elegimos este formulario ya que es el más utilizado en WordPress y cuenta con integraciones que pueden ayudarnos a ampliar nuestro desarrollo, tales como integración con Mailchimp, Base de datos, Envío de e-mail.

Ahora como pueden ver, con HTML agregamos los inputs ocultos que pide PayU Latam, también el check y el botón con código HTML.

[response]
<div class="wpcf7-display-none">
<input size="1" type="hidden" name="referenceCode" id="referenceCode">
<input size="1" type="hidden" name="merchantId" id="merchantId" value="963553">
<input size="1" type="hidden" name="description" value="Donación">
<input size="1" type="hidden" name="tax" id="tax" value="0">
<input size="1" type="hidden" name="currency" id="currency" value="COP">
<input size="1" type="hidden" name="responseUrl" id="responseUrl" value="https://tuweb.com">
<input size="1" type="hidden" name="ApiKey" id="ApiKey" value="TsfhLoj9HB53sq5EG1cp">
<input size="1" type="hidden" name="signature" id="signature">
<input size="1" type="hidden" name="accountId" id="accountId" value="740592">
</div>

<div class="one_half">
    [tel amount placeholder "Cantidad: COP$"]</div>

<div class="one_half">
    [number documento placeholder "Documento:"]</div>

<div class="full width">
    [text buyerFullName placeholder "Nombre Completo: (Opcional)"]</div>

<div class="full width">
    [email buyerEmail placeholder "E-mail:"]</div>

<div class="two_third">
    <input type="checkbox" name="aceptar" value="HE LEÍDO Y ACEPTO LA POLÍTICA DE PRIVACIDAD"><label for="vehicle1"> HE LEÍDO Y ACEPTO LA POLÍTICA DE PRIVACIDAD</label>

</div>

<div class="one_third">
<button type="button" id="donar2020">
    <i class="fas fa-heart"></i> HACER DONACIÓN
</button>
</div>

Acondicionamiento del formulario.

Ahora debemos obligar al formulario a cambiar el action=” “ para agregar la URL de producción de PayU Latam y además nos aseguramos de que en el formulario se mantenga la clase wpcf7-form.

debemos tener en cuenta que el ID que se debe cambiar en el código corresponde al ID de la página donde está publicado el formulario. En la URL donde editamos la página podemos ver el ID.

add_filter('wpcf7_form_action_url', 'wpcf7_custom_form_action_url');
function wpcf7_custom_form_action_url()
{
    return 'https://gateway.payulatam.com/ppp-web-gateway/';
}

add_filter('wpcf7_form_action_url', 'wpcf7_custom_form_action_url');
function wpcf7_custom_form_action_url($url)
{
    global $post;
    $id_to_change = 1;
    if($post->ID === $id_to_change)
        return 'https://gateway.payulatam.com/ppp-web-gateway/';
    else
        return $url;
}

add_filter( 'wpcf7_form_class_attr', 'custom_custom_form_class_attr' );

function custom_custom_form_class_attr( $class ) {
    global $post;
    $id_to_change = 1;
    if($post->ID === $id_to_change)
      return 'wpcf7-form';
    else
        return $class;   
}

Función personalizada con JavaScript.

Ahora podemos controlar con JavaSript el formulario a través de la clase wpcf7-form que trae por defecto el formulario y que agregamos con el código PHP anterior para prevenir fururas actaulizaciones del plugin.

El siguiente código genera en las líneas 3 y 4 una referencia única para al transacción con la fecha y hora de creación y lo asigna al campo oculto del formulario referenceCode.

En la línea 11 vemos como creamos el signature de la transacción,

PayU Latam signature: es una forma única de validar los pagos realizados a través de la plataforma, garantizando su autenticidad. Consiste en una cadena de caracteres a la cual se le aplica algoritmo MD5, SHA1 O SHA256 para encriptarla. La cadena está compuesta de la siguiente forma:
“ApiKey~
merchantId~
referenceCode~
amount~currency”.

Para encriptar la firma de PayU Latam utilizamos el siguiente CDN.

Desde la fila 25 hasta la fila 61 validamos los campos del formulario con JQuery Valitation

Desde la fila 15 a la 23 hacemos el envío del formulario si la valitación nos devuelve verdadero.

<script type="text/javascript">
$(document).ready(function () {
var d = new Date();
var n = d.getTime(); //Genera una referencia única para cada transacción.
    $(".wpcf7-form").attr("target", "_blank");
    $("#referenceCode").val(n); // Asigna valor de la referencia.
});

// El botón del formulario activa esta función.
$("#donar2020").on("click" ,function(){
var y = md5($("#ApiKey").val() +"~"+ $("#merchantId").val() +"~"+ $("#referenceCode").val() +"~"+ $("input[name=amount]").val() +"~"+ $("#currency").val());
$("#signature").val(y);
$(".wpcf7-form").validate();

if ($(".wpcf7-form").valid()){
    $(".wpcf7-form").LoadingOverlay("show");
    setTimeout(function(){
        $(".wpcf7-form").submit();
        $(".wpcf7-form").LoadingOverlay("hide");
        $(".wpcf7-form")[0].reset();
    }, 1000);
}
});

$(".wpcf7-form").validate({
    rules: {
        amount:{
            required: true,
            digits:true,
            min:13e3
        },
        documento:{
            required: true,
            digits:true,
        },
        buyerEmail:{
            required: true,
            email:true,
        },
        aceptar:{
            required: true
        }          
    },
    messages: {
        amount:{
            required:'Valor a donar requerido.',
            digits:'Ingrese sólo números.',
            min:'Valor mínimo $13.000.'
        },
        documento:{
            required:'Documento requerido.',
            digits:'Ingrese sólo números.',
        },
        buyerEmail:{
            required:'Email requerido.',
            email:'Ingrese un e-mail válido.',
        },
        aceptar:{
            required:'Requerido.'
        }                      
    }
});
</script>

Deshabilitamos el Ajax del formulario Contact Form 7.

Con el plugin Controls for Contact Form 7, deshabilitamos el ajax del formulario para que nos permita hacer el envío normal del mismo, este paso se debe realizar como lo muestra la imagen.

Esta pestaña la encontramos en la configuración del formulario.

Agregar los CDN de JQuery, JQuery Validation y Función MD5.

Con el plugin Header Footer Code Manager agregamos código JS y CSS personalizado a nuestro sitio, este plugin nos permite elegir en qué parte de la página colocarlo y elegir las páginas o post donde queremos que estos se carguen como lo muestra la siguiente imagen.

<script
  src="https://code.jquery.com/jquery-3.5.0.min.js"
  integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
  crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/additional-methods.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/loadingoverlay.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.5.0/js/md5.min.js"></script>

Si este astículo te ha servido, esperamos tus comentarios, de igualmanera si requieres ampliar información para tu proyecto no dudes en escribirnos.

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on whatsapp

Posts Relacionados

0 Comments

No Comment.