Redsys payment gateway for custom integrations with WP (PHP 5.2 & 7.0) with SHA-256 encryption

Write By: comprido Published In: Web Design Created Date: 2019-01-02 Hits: 405 Comment: 0

This is an article about the Redsys debit/credit card payment gateway for custom integrations with Wordpress (PHP 5.2 & 7.0) with the SHA-256 encryption API.

How are you going, mate?
You have a working demo here: (Sydney Theme for Wordpress). With this files and code, we will create a simple gateway that allow us to SET THE PRICE through the Wordpress CUSTOM FIELD "precio" and show the buttons to pay to our potential customers with simple jquery toogle divs.
So, basically, if you are using the files attached, you have to create a custom field with the entire value:
Then, visitors and potential customers will see a button displayed like this with the payment gateway entry:
And once they click on it:
By selecting one of the options, they will access the Redsys Gateway or leave the site to your Paypal.Me (customizable link) address:
In the div above you can display all the information for legal advice requirements easily, so finally, drive them to the payment:
And give then the URL back (ok or ko depending on how the payment went) to a form (shortcode for Contact Form 7 plugin added in the sample).
At the end, that's the URL Scheme you'll have:
URL Course:
URL Payment (customer select the method):
URL Payment detailed:
URL Payment OK (Optional):
URL Payment KO (Optional):
I think that's cool and even useful to share direct links with end-users or customers.
Implementation is very easy.
Upload the folder /tpv attached and fill the tpv.php file with your gateway information.
Then open the main page.php or single.php on your wordpress theme to implement the code below, where you see:
<?php the_content(); ?>   
You have to replace with these (look the notes there)
<?php // when we pass variables after payment OK
if (isset($_GET['pagadok'])) { ?>
     <div class="success">Ha llevado a cabo el <strong>pago correctamente del Curso "<?php the_title(); ?>"</strong>.<br /><br /> <?php echo do_shortcode( '[contact-form-7 id="12943" title="Ficha de inscripción"]' ); ?>
     <?php  }  ?>
     <?php // when we pass variables after payment KO
if (isset($_GET['pagoko'])) { ?>
     <div class="warning">El pago del <strong>Curso "<?php the_title(); ?>" ha fallado</strong>.<br /><br /> Puede contactar con nosotros para asistirle o darle más información:
<?php echo do_shortcode( '[contact-form-7 id="12410" title="Contacto online"]' ); ?>
     <?php  }  ?>
<?php the_content(); ?>   
<?php // if variable "price" exists and is set up
$values = get_post_custom_values("precio"); if (isset($values[0])) { ?>    
$('#iniciarpago').click( function() {  
 <div id="infocurso"> 
<!--?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'full', array( 'class' => 'alignleft' ) );  } ?-->  
   <?php // when we pass variables "reservation" or "payment" customer want to access the gateway
if (isset($_GET['reserva']) || isset($_GET['pago'])) { ?>
  <div id="pasarela">
<p>content here</p>
   <?php include( get_template_directory() . '/tpv/tpv.php' );  ?>   
  <?php  } else { // when not passing any variables for payment, we have to display the button ?>
 <div id="step1">
 <div style="float:right">
 <a href="#infocurso" id="iniciarpago" class="button blue">¡Matricularme!</a>
 <strong>Curso:</strong> <?php the_title(); ?><br/>
<strong>Precio:</strong> <?php echo $values[0]; ?>€
<div id="step2" style="display:none">      
Presione el botón correspondiente al modo de pago que prefiera y siga los pasos en pantalla en nuestra pasarela segura.  
     <center><a href='?reserva#infocurso' class='button yellow'><i class="fa fa-credit-card"></i> <?php echo 'Preinscripción 50€'; ?></a> <a href='?pago#infocurso' class='button orange'><i class="fa fa-credit-card"></i> <?php echo 'Pagar '.$values[0].'€ con Tarjeta'; ?></a> <a href="<?php echo $values[0]*1.02; ?>" class="roll-button button blue" target="_blank"><i class="fa fa-paypal"></i> <?php echo 'Pagar '.$values[0]+$values[0]*1.02.'€ con Paypal'; ?></a></center>      
<?php  } // if price exist ?>
 <?php  } // this is the end of the gateway code ?>
And don't forget to add to your CSS stylesheet:
.warning {color: #8a6d3b;background-color: #fcf8e3;border-color: #faebcc;padding: 40px;margin-bottom: 20px;}
.success {color: #3f4845;background-color: #dff0d8;border-color: #c1e2b3;padding: 40px;margin-bottom: 20px;}
/* ======================================================= */
/*                     Buttons Styles                      */
/* ======================================================= */
.button, .button span {
display: inline-block;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
.button, .more-button, .button-slider {
position: relative;
overflow: visible;  /* removes extra side padding in IE */
outline: none;
border: 1px solid #999;  /* IE */
border: rgba(0, 0, 0, 0.2) 1px solid;  /* Saf4+, Chrome, FF3.6 */
border-bottom: rgba(0, 0, 0, 0.4) 1px solid;
background: -moz-linear-gradient( center top, rgba(255, 255, 255, .1) 0%, rgba(0, 0, 0, .1) 100% );
background: -webkit-gradient( linear, center bottom, center top, from(rgba(0, 0, 0, .1)), to(rgba(255, 255, 255, .1)) );
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
white-space: normal;
line-height: 1em;
-ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000')";
filter: progid: DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000');
cursor: pointer;
-moz-user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
user-select: none;
button::-moz-focus-inner {
border: none;
button.button {
margin: 0;
padding: 0;
a.button, a.button:hover {
text-decoration: none;
.button.full, .button.full span {
display: block;
.button:hover, .button.hover {
background: -moz-linear-gradient( center top, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .1) 100% );
background: -webkit-gradient( linear, center bottom, center top, from(rgba(255, 255, 255, .1)), to(rgba(255, 255, 255, .2)) );
-ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF')";
filter: progid: DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF');
.button:active, {
top: 1px;
background: -moz-linear-gradient( center top, rgba(0, 0, 0, .1) 0%, rgba(255, 255, 255, .1) 100% );
background: -webkit-gradient( linear, center bottom, center top, from(rgba(255, 255, 255, .1)), to(rgba(0, 0, 0, .1)) );
-ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorStr='#19000000', EndColorStr='#19FFFFFF')";
filter: progid: DXImageTransform.Microsoft.gradient(startColorStr='#19000000', EndColorStr='#19FFFFFF');
.button, .button span, .more-button, input[type="submit"], .more-button, .button-slider {
position: relative;
padding: .6em 1.3em;
border-top: rgba(255, 255, 255, 0.2) 1px solid;
color: #fff;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
white-space: normal;
line-height: 1em;
.button span { border-top:none}
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Google Chrome only - fix margins */
button.button span, .more-button {
margin-top: -1px;
margin-right: -2px;
margin-left: -2px;
.small {
font-size: 12px;
.medium {
font-size: 14px;
.big {
font-size: 18px;
/* Button Color Scheme
---------------------------------------------------------- */ {
background-color: #333333;
.button.gray {
background-color: #666666;
.button.white {
background-color: #ffffff;
.button.white span{
color: #666666;
}, .roll-button {
background-color: #e62727;
} {
background-color: #ff5c00;
.button.magenta {
background-color: #a9014b;
.button.yellow {
background-color: #ffb515;
} {
background-color: #00adee;
} {
background-color: #e22092;
} {
background-color: #91bd09;
.button.rosy {
background-color: #f16c7c;
/* Button Group
-------------------------------------------------------------- */
.roll-button-group {
text-align: center;
.roll-button-group .roll-button {
margin-left: 8px;
.roll-button-group .roll-button:first-child {
margin-left: 0;
The source files/code used for this article:
API PHP Redsys:
Buttons Bootstrap:
Theme Sydney:

Leave A Comment


Latest Blog

Read more

Nasty reviews for your businesses by Kath Read

The revenge of the legal representative LOL

Read more

jQuery show/hide based on select (survey mode)

I have developed a bit of code based in the infographic time: "What’s the best T-shirt printing t...

Read more

Grupo Capoeiras Inc - Creative Kids Provider for NSW Government

NSW Government is helping your cost of living with more than 40 re...