info.php

<?php
/*
Template Name: Info
*/
?>
<style type="text/css">
/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body {
  /*background: #009688;*/
  font-size:18px;
  line-height: 32px;
  word-wrap:break-word !important;
  font-family: 'Open Sans', sans-serif;
  }


h1 {
  font-size: 60px;
  text-align: center;
  line-height: 1.5;
  color: #FFF;
}

a {
  color: #FFF;
}

p {
    font-size:22px;
    line-height:40px;
    color: #333;
    }

.tabs {
    width: 650px;
    float: none;
    list-style: none;
    padding: 0;
    margin: 75px auto;
}

.tabs li {
    display: block;
}

.labels:after {
    content: '';
    display: table;
    clear: both;
}

.tabs label {
    display: inline-block;
    float: left;
    padding: 10px 20px;
    color: #FFFFFF;
    font-size: 24px;
    font-weight: normal;
    background: #2c3e50;
    cursor: pointer;
}

.tabs label:hover {
    background: #3498db;
}

.tab-content {
    display: none;
    width: 100%;
    padding: 15px;

    border:1px solid #ccc;
    border-top: 10px solid #08C;
    background-color:#ffffff;
}


.tabs input[type=radio] {
    display:none;
}

[id^=tab]:checked ~ div[id^=tab-content] {
    display: block;
}

[id^=tab]:checked ~ [id^=label]  {
    background: #08C;
    color: white;
}

#relatedContent {
    display: block;
    clear: both;
    max-width: 800px;
    margin: 100px auto 0;
}

#relatedContent h3 {
  font-size: 30px;
  text-align: center;
  color: #FFF;
}

#relatedContent .item {
    max-width: 44%;
    padding: 3%;
    float: left;
    text-align: center;
}

#relatedContent .item a img {
    max-width: 100%;
}

</style>

<?php //get_header(); ?>
 <?php if (have_posts()) : while (have_posts()) : the_post();?>
 <div class="post">
 <!-- <h2 id="post-<?php the_ID(); ?>"><?php// the_title();?></h2> -->
  <div id="content" class="widecolumn">
    <div class="contenedor">
        <ul class="tabs">
            <li class="labels">
                <label for="tab1" id="label1">tab 1</label>
                <label for="tab2" id="label2">tab 2</label>
            </li>
            <li>
                <input type="radio" checked name="tabs" id="tab1">
                <div id="tab-content1" class="tab-content">
                    <form name="pagamentoSiTef-form" id="pagamentoSiTef-form" action="paymentDo.php" method="POST">
                        Plan Seleccionado: <?= ucwords($_GET['plan']); ?><br>
                        Costo Total: <?= $_GET['id']; ?>
                        <?php
                            echo "<input type='hidden' id='amount' name='amount' value='".$_GET['id']."'>";
                        ?>
                        <table>
                            <tr>
                                <td width="180px" style="max-width:auto;">
                                    M&eacute;todo de Pago
                                </td>
                                <td>
                                    <table>
                                        <tr>
                                            <td style="max-width:1.5px;text-align:center; vertical-align:middle;">
                                                <input required="required"  type="radio" name="authorizerId" id="authorizerId" value="1" checked>
                                            </td>
                                            <td style="text-align:center; vertical-align:middle;">
                                                <img align="middle" src="http://consultaqui.com/pagamentoSiTef/img/visa.png">
                                            </td>
                                            <td style="max-width:1.5px;text-align:center; vertical-align:middle;" >
                                                <input required="required"  type="radio" name="authorizerId" id="authorizerId" value="2" >
                                            </td>
                                            <td style="text-align:center; vertical-align:middle;">
                                                <img align="middle" src="http://consultaqui.com/pagamentoSiTef/img/mastercard.png">
                                            </td>
                                            <td style="max-width:1.5px;text-align:center; vertical-align:middle;" >
                                                <input required="required"  type="radio" name="authorizerId" id="authorizerId" value="3" >
                                            </td>
                                            <td style="text-align:center; vertical-align:middle;">
                                                <img align="middle" src="http://consultaqui.com/pagamentoSiTef/img/american_express_green.png">
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td>N&uacute;mero de la Tarjeta</td>
                                <td><input required="required"  size="19" maxlength="19" type="text" id="cardNumber" name="cardNumber"></td>
                            </tr>
                            <tr>
                                <td>Fecha de Expiraci&oacute;n</td>
                                <td>
                                    <p>
                                        Mes&nbsp;<input required="required"  style="max-width:30px;" maxlength="2" size="2" type="text" id="mes" name="mes">&nbsp;&nbsp;
                                        A&ntilde;o&nbsp;<input required="required"  style="max-width:30px;" maxlength="2" size="2" type="text" id="year" name="year">
                                    </p>
                                </td>
                            </tr>
                            <tr>
                                <td>C&oacute;digo de Seguridad</td>
                                <td>
                                    <input required="required"  style="max-width: 50px;" size="5" maxlength="5" type="text" id="cardSecurityCode" name="cardSecurityCode">&nbsp;
                                    <img style="text-align:center; vertical-align:middle;" src="http://consultaqui.com/pagamentoSiTef/img/cc_back.png" title="El n&uacute;mero de verificaci&oacute;n de la tarjeta (CVV o CVC) es un n&uacute;mero de 3 d&iacute;gitos impreso en el reverso de su tarjeta de d&eacute;bito / cr&eacute;dito">
                                </td>
                            </tr>
                            <tr>
                                <td colspan="3">Titular de la Tarjeta</td>
                            </tr>
                            <tr>
                                <td>Cedula de Identidad</td>
                                <td>
                                    Nombre &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Apellido
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <p>
                                        <select style="max-width:50px;" name="customerNacionalidad">
                                            <option value="V">V</option>
                                            <option value="E">E</option>
                                        </select><input required="required"  style="height: 32" maxlength="8" type="text" id="customerCedula" name="customerCedula">
                                    </p>
                                </td>
                                <td>
                                    <p>
                                        <input required="required"  type="text" id="nameTitular" name="nameTitular"><input required="required"  type="text" id="apellidoTitular" name="apellidoTitular">
                                    </p>
                                </td>
                            </tr>
                            <tr>
                                <td>Email</td>
                                <td><input required="required"  type="email" id="email" name="email"></td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <input required="required"  type="submit" name="btnPagar" id="btnPagar" value="Pagar">
                                </td>
                            </tr>
                        </table>
                    </form>
                    <!-- Your Content Here -->
                </div>
            </li>
            <li>
                <input type="radio" name="tabs" id="tab2">
                <div id="tab-content2" class="tab-content">
                    <h3>Tab 2</h3>
                    <!-- Your Content Here -->
                </div>
            </li>
        </ul>
     </div>
 <?php endwhile; endif; ?>
</div>

<?php //get_footer(); ?>