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

PayU Latam permite (recibir donaciones en tu página web) Hace poco recibí una comunicación donde indican que es prohibido las donaciones en Colombia, 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="test@test.com" >
  <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>

1. 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. (Las integraciones no están en este post).

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]
<!-- Inician los inputs ocultos -->
<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"> <!-- Aquí va tu Mercahn ID de PayU -->
<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"> <!-- Aquí va tu página de destino al finalizar el pago -->
<input size="1" type="hidden" name="ApiKey" id="ApiKey" value="TsfhLoj9HB53sq5EG1cp"> <!-- Aquí va tu ApiKey de PayU -->
<input size="1" type="hidden" name="signature" id="signature">
<input size="1" type="hidden" name="accountId" id="accountId" value="740592"> <!-- Aquí va tu Account ID de PayU -->
</div>
<!-- Finalizan los inputs ocultos -->

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

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

El siguiente código PHP lo agregamos en el archivo functions.php de nuestro theme.

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.

// OPCIÓN 1: Este código se coloca si solo tenemos un formulario CF7 en nuestra páginaweb.
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/';
}


// OPCIÓN 2: Este código se coloca si solo tenemos más de un formulario CF7 en nuestra páginaweb.
add_filter('wpcf7_form_action_url', 'wpcf7_custom_form_action_url');
function wpcf7_custom_form_action_url($url)
{
    global $post;
    $id_to_change = 1; // Este ID se reemplaza por el ID del formulario que estamos modificando para recibir donaciones.
    if($post->ID === $id_to_change)
        return 'https://gateway.payulatam.com/ppp-web-gateway/';
    else
        return $url;
}

// Con este código formamos que nuestro formulario siempre tenga la clase wpcf7-form
add_filter( 'wpcf7_form_class_attr', 'custom_custom_form_class_attr' );
function custom_custom_form_class_attr( $class ) {
    global $post;
    $id_to_change = 1; // Este ID se reemplaza por el ID del formulario que estamos modificando para recibir donaciones.
    if($post->ID === $id_to_change)
      return 'wpcf7-form';
    else
        return $class;   
}

3. Función personalizada con JavaScript.

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 15 a la 23 hacemos el envío del formulario si la valitación nos devuelve verdadero.

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

Con el Plugin Header And Footer Code Manager que ya debe estar instalado en su WordPress, agregamos el siguiente código en el footer de nuestro sitio.

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

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

contact form 7 no

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

js y css personalizado
<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/jquery-validation@1.19.1/dist/jquery.validate.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/additional-methods.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/gasparesganga-jquery-loading-overlay@2.1.7/dist/loadingoverlay.min.js"></script>

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

5. CSS Validación de Campos del formulario.

Para mostrar los errores cuando se valide el formulario, debemos agregar un CSS personalizado que muestre los errores de color rojo, el código se muestra a continuación.

<style type="text/css">
.error{
color:red !important;
}
</style>

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 twitter
Share on linkedin
Share on whatsapp

Posts Relacionados

Productos Virtuales con Woocommerce

Productos Virtuales Woocommerce.

Links de Interés Personalizar Checkout de Woocommerce Para Productos Virtuales Plugin Campos Checkout Redirigir al