API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jan 17th, 2017
275
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.83 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="pt-br">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6.         <title>Free Trial - 01Fit.com</title>
  7.         <meta name="description" content="Tenha um Personal Trainer Remoto pra acompanhar seu progresso e criar rotinas de treino exclusivas. A partir de R$69,90/mês.">
  8.             <meta property="og:image" content="http://i.imgur.com/HjD4cMZ.png" />
  9.         <meta name="viewport" content="width=device-width, initial-scale=1">
  10.         <link rel="stylesheet" href="../dist/css/styles.min.css">
  11.         <link rel="icon" href="favicon.png" />
  12.                 <!--[if lt IE 9]>
  13.                         <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  14.                 <![endif]-->
  15.         <script>
  16.             (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  17.             (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  18.             m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  19.             })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  20.  
  21.             ga('create', 'UA-78535682-1', 'auto');
  22.             ga('send', 'pageview');
  23.         </script>
  24.         </script>
  25.         <!-- Facebook Pixel Code -->
  26.         <script>
  27.             !function(f,b,e,v,n,t,s)
  28.             {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  29.             n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  30.             if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  31.             n.queue=[];t=b.createElement(e);t.async=!0;
  32.             t.src=v;s=b.getElementsByTagName(e)[0];
  33.             s.parentNode.insertBefore(t,s)}(window,document,'script',
  34.             'https://connect.facebook.net/en_US/fbevents.js');
  35.             fbq('init', '1065957860169847');
  36.             fbq('track', 'PageView');
  37.         </script>
  38.         <noscript>
  39.             <img height="1" width="1" src="https://www.facebook.com/tr?id=1065957860169847&ev=PageView&noscript=1"/>
  40.         </noscript>
  41.         <!-- End Facebook Pixel Code -->
  42.     </head>
  43.     <body id="assinatura">
  44.         <div class="container clearfix">
  45.             <div class="col m6 center-block">
  46.                 <div class="box">
  47.                     <div class="col m9 tablet center-block">
  48.                             <div class="insert">
  49.                                 <div class="step center-align">
  50.                                     <hgroup>
  51.                                         <h2>Primeiro Passo</h2>
  52.                                         <h3>Conte-nos um pouco sobre você</h3>
  53.                                     </hgroup>
  54.                                 </div>
  55.                                     <form method="post" id="signup" novalidate="novalidate">
  56.                                     <div class="step1 hide">
  57.                                         <div class="input-field col m12 center-block">
  58.                                             <label>Seu Sexo</label>
  59.                                                 <select name="sexo" required>
  60.                                                     <option value="" disabled selected>Selecione</option>
  61.                                                     <option value="Masculino">Masculino</option>
  62.                                                     <option value="Feminino">Feminino</option>
  63.                                                 </select>
  64.                                         </div>
  65.                                         <div class="input-field col m12 center-block">
  66.                                             <label for="altura">Sua Altura</label>
  67.                                             <input id="altura" type="text" required name="altura">
  68.                                         </div>
  69.                                         <div class="input-field col m12 center-block">
  70.                                             <label for="idade">Sua Idade</label>
  71.                                             <input id="idade" type="text" required name="idade" maxlength="2">
  72.                                         </div>
  73.                                         <div class="input-field col m12 center-block">
  74.                                             <label for="peso">Seu Peso</label>
  75.                                             <input id="peso" type="text" required name="peso">
  76.                                         </div>
  77.                                         <div class="input-field col m12 center-block">
  78.                                             <a class="button" data-step="1">CONTINUAR</a>
  79.                                         </div>
  80.                                     </div>
  81.                                     <div class="step2 hide">
  82.                                         <div class="input-field col m12 center-block">
  83.                                             <label>Seu Objetivo Principal</label>
  84.                                                 <select name="objetivo">
  85.                                                     <option value="" disabled selected>Selecione</option>
  86.                                                     <option value="Perder Peso">Perder Peso</option>
  87.                                                     <option value="Definição">Definição</option>
  88.                                                     <option value="Ganhar Massa Muscular">Ganhar Massa Muscular</option>
  89.                                                     <option value="Condicionamento Físico">Condicionamento Físico</option>
  90.                                                     <option value="Ganho de Força">Ganho de Força</option>
  91.                                                 </select>
  92.                                         </div>
  93.                                         <div class="input-field col m12 center-block">
  94.                                             <label>Qual seu nível atual de condicionamento físico?</label>
  95.                                                 <select name="nivel">
  96.                                                     <option value="" disabled selected>Selecione</option>
  97.                                                     <option value="Sedentário">Sedentário</option>
  98.                                                     <option value="Iniciante">Iniciante</option>
  99.                                                     <option value="Intermediário">Intermediário</option>
  100.                                                     <option value="Avançado">Avançado</option>
  101.                                                     <option value="Usain Bolt">Usain Bolt</option>
  102.                                                 </select>
  103.                                         </div>
  104.                                         <div class="input-field col m12 center-block">
  105.                                             <label for="imc">Possui alguma condição física especial?</label>
  106.                                             <input id="imc" type="text" required name="cond-especial">
  107.                                         </div>
  108.                                         <div class="input-field col m12 center-block">
  109.                                             <label for="dias">Quantos dias na semana você pretende treinar?</label>
  110.                                             <input id="dias" type="text" required name="dias">
  111.                                         </div>
  112.                                         <div class="input-field col m12 center-block">
  113.                                             <label for="tempo">Quanto tempo você tem por dia pra treinar?</label>
  114.                                             <input id="tempo" type="text" required name="tempo">
  115.                                         </div>
  116.                                         <div class="input-field col m12 center-block">
  117.                                             <a class="button" data-step="2">CONTINUAR</a>
  118.                                         </div>
  119.                                     </div>
  120.                                     <div class="step3 hide">
  121.                                         <div class="desc">Você vai ter um período de teste de uma semana - e não será cobrado durante o período. Após esse teste, tem duas opções: O plano anual (Com desconto!) ou o mensal. Escolha abaixo:</div>
  122.                                         <div class="input-field col m12 center-block">
  123.                                             <div class="box-plan clearfix first">
  124.                                                 <div class="col m2 first">
  125.                                                     <div class="radio-group">
  126.                                                         <input type="radio" class="plano" value="Na Academia - Plano Anual" name="plano">
  127.                                                         <div class="check"></div>
  128.                                                     </div>
  129.                                                 </div>
  130.                                                 <div class="col m6 second">
  131.                                                     <p class="plan">Plano Anual</p>
  132.                                                     <p class="price">R$ 66,90<span>/mês</span></p>
  133.                                                 </div>
  134.                                                 <div class="col m4 no-padding last">
  135.                                                     <p class="italic"><em>Você pode cancelar a cada 12 meses.</em></p>
  136.                                                 </div>
  137.                                             </div>
  138.                                         </div>
  139.                                         <div class="input-field col m12 center-block">
  140.                                             <div class="box-plan clearfix last">
  141.                                                 <div class="col m2 first">
  142.                                                     <div class="radio-group">
  143.                                                         <input type="radio" class="plano" value="Na Academia - Plano Mensal" name="plano" checked>
  144.                                                         <div class="check"></div>
  145.                                                     </div>
  146.                                                 </div>
  147.                                                 <div class="col m6 second">
  148.                                                     <p class="plan">Plano Mensal</p>
  149.                                                     <p class="price">R$ 69,90<span>/mês</span></p>
  150.                                                 </div>
  151.                                                 <div class="col m4 no-padding last">
  152.                                                     <p class="italic"><em>Você pode cancelar a qualquer momento.</em></p>
  153.                                                 </div>
  154.                                             </div>
  155.                                         </div>
  156.                                         <div class="input-field col m12 center-block">
  157.                                             <a class="button" data-step="3">CONTINUAR</a>
  158.                                         </div>
  159.                                     </div>
  160.                                     <div class="step4">
  161.                                         <div class="desc">Para poder coletar seus dados de pagamento, precisamos das informações a seguir. Essas informações serão armazenadas para podermos cobrar sua assinatura do 01Fit após o período teste.</div>
  162.                                         <div class="input-field col m12 center-block">
  163.                                             <label for="nome">Nome completo</label>
  164.                                             <input id="nome" type="text" required name="nome">
  165.                                         </div>
  166.                                         <div class="input-field col m5 center-block">
  167.                                             <label for="data">Data de nascimento</label>
  168.                                             <input id="data" class="required" type="text" required name="data">
  169.                                         </div>
  170.                                         <div class="input-field col m12 center-block">
  171.                                             <label for="email">E-mail</label>
  172.                                             <input id="email" type="email" required name="email">
  173.                                         </div>
  174.                                         <div class="input-field col m12 center-block clearfix">
  175.                                             <div class="col m6 no-paddingLeft">
  176.                                                 <label for="cpf">CPF</label>
  177.                                                 <input id="cpf" class="required" type="text" required name="cpf">
  178.                                             </div>
  179.                                             <div class="col m6 no-paddingRight">
  180.                                                 <label for="tel">Número do telefone</label>
  181.                                                 <input id="tel" class="required" type="text" required name="tel">
  182.                                             </div>
  183.                                         </div>
  184.                                         <div class="input-field col m12 center-block clearfix">
  185.                                             <div class="col m5 no-paddingLeft">
  186.                                                 <label for="cep">CEP</label>
  187.                                                 <input id="cep" type="text" name="cep">
  188.                                             </div>
  189.                                             <div class="col m7 no-paddingRight">
  190.                                                 <label for="end">Endereço</label>
  191.                                                 <input id="end" class="required" type="text" required name="end">
  192.                                             </div>
  193.                                         </div>
  194.                                         <div class="input-field col m12 center-block clearfix">
  195.                                             <div class="col m5 no-paddingLeft">
  196.                                                 <label for="numero">Número</label>
  197.                                                 <input id="numero" class="required" type="text" required name="numero">
  198.                                             </div>
  199.                                             <div class="col m7 no-paddingRight">
  200.                                                 <label for="compl">Complemento</label>
  201.                                                 <input id="compl" type="text" name="compl">
  202.                                             </div>
  203.                                         </div>
  204.                                         <div class="input-field col m12 center-block clearfix">
  205.                                             <div class="col m7 no-paddingLeft">
  206.                                                 <label for="cidade">Cidade</label>
  207.                                                 <input id="cidade" class="required" type="text" required name="cidade">
  208.                                             </div>
  209.                                             <div class="col m5 no-paddingRight">
  210.                                                 <label for="uf">Estado</label>
  211.                                                     <select id="uf" name="uf">
  212.                                                     <option value="" disabled selected>Selecione</option>
  213.                                                     <option value="AC">AC</option>
  214.                                                     <option value="AL">AL</option>
  215.                                                     <option value="AM">AM</option>
  216.                                                     <option value="AP">AP</option>
  217.                                                     <option value="BA">BA</option>
  218.                                                     <option value="CE">CE</option>
  219.                                                     <option value="DF">DF</option>
  220.                                                     <option value="ES">ES</option>
  221.                                                     <option value="GO">GO</option>
  222.                                                     <option value="MA">MA</option>
  223.                                                     <option value="MG">MG</option>
  224.                                                     <option value="MS">MS</option>
  225.                                                     <option value="MT">MT</option>
  226.                                                     <option value="PA">PA</option>
  227.                                                     <option value="PB">PB</option>
  228.                                                     <option value="PE">PE</option>
  229.                                                     <option value="PI">PI</option>
  230.                                                     <option value="PR">PR</option>
  231.                                                     <option value="RJ">RJ</option>
  232.                                                     <option value="RN">RN</option>
  233.                                                     <option value="RS">RS</option>
  234.                                                     <option value="RO">RO</option>
  235.                                                     <option value="RR">RR</option>
  236.                                                     <option value="SC">SC</option>
  237.                                                     <option value="SE">SE</option>
  238.                                                     <option value="SP">SP</option>
  239.                                                     <option value="TO">TO</option>
  240.                                                     </select>
  241.                                             </div>
  242.                                         </div>
  243.                                         <div class="input-field col m12 center-block">
  244.                                             <a class="button" data-step="4">CONTINUAR</a>
  245.                                         </div>
  246.                                     </div>
  247.                                     <div class="step5">
  248.                                         <div class="desc">Você só será cobrado após o período teste, e pode cancelar até lá - é só falar com a gente. Pra processarmos a transação, precisamos das informações abaixo:</div>
  249.                                         <div class="input-field col m12 center-block pos-lock">
  250.                                             <label for="cartao">Número do cartão</label>
  251.                                             <input id="cartao" type="email" required name="cartao" autocomplete="cc-number">
  252.                                             <i class="material-icons lock">lock</i>
  253.                                         </div>
  254.                                         <div class="input-field col m12 center-block clearfix">
  255.                                             <div class="col m6 no-paddingLeft">
  256.                                                 <label for="expiracao">Data de expiração</label>
  257.                                                 <input id="expiracao" class="required" type="email" required name="expiracao" autocomplete="cc-exp">
  258.                                             </div>
  259.                                             <div class="col m6 no-paddingRight pos-lock">
  260.                                                 <label for="codigo">Código</label>
  261.                                                 <i class="material-icons right help" data-position="top" data-delay="50" data-tooltip="O código de segurança são os três últimos números que se encontram no verso do cartão (ou os quatro números na frente, se for Amex)">help</i>
  262.                                                 <input id="codigo" class="required" type="email" required name="codigo" autocomplete="cc-csc">
  263.                                                 <i class="material-icons lock">lock</i>
  264.                                             </div>
  265.                                         </div>
  266.                                         <div class="input-field col m12 center-block">
  267.                                             <a id="submit" class="button">CONFIRMAR ASSINATURA</a>
  268.                                         </div>
  269.                                     </div>
  270.                                 </form>
  271.                                 <p class="center-align col m12 center-block terms">Ao clicar em “Continuar” você concorda com nossos <a href="termos-de-uso.php" target="_blank">Termos de Serviço.</a></p>
  272.                             </div>
  273.                         </div>
  274.                     </div>
  275.                 </div>
  276.             </div>
  277.         </section>
  278.         <script type="text/javascript" src="https://stc.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.directpayment.js"></script>
  279.         <!-- <script type="text/javascript" src="https://stc.sandbox.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.directpayment.js"></script> -->
  280.         <script src="../dist/js/scripts.min.js"></script>
  281.             <script>app.signUp();</script>
  282.             <iframe name="hidden_iframe" id="hidden_iframe" class="hide"></iframe>
  283.  
  284.             <!-- Integração pagSeguro -->
  285.             <script type="text/javascript">
  286.                 $.ajax({
  287.                     // url: 'https://ws.sandbox.pagseguro.uol.com.br/v2/sessions?email=team@01fit.com&token=5C064816ED714EDBB64675E30651ED6A',
  288.                     url: 'session.php',
  289.                     type: 'POST',
  290.                     success: function(response) {
  291.                         $xml=$(response);
  292.                         PagSeguroDirectPayment.setSessionId($xml.find('id').text());
  293.                     }
  294.                 });
  295.  
  296.                 $('#submit').on('click', function(e){
  297.                     e.preventDefault();
  298.                     var brand='';
  299.                     var creditCardToken='';
  300.  
  301.                     PagSeguroDirectPayment.getSenderHash();
  302.  
  303.                     PagSeguroDirectPayment.getBrand({
  304.                         cardBin: $("input#cartao").val(),
  305.                         // cardBin: '4485176964551307',
  306.                         success: function(response) {
  307.                             brand = response.brand.name;
  308.                             var param = {
  309.                                     cardNumber: parseInt($("input#cartao").val()),
  310.                                     cvv: parseInt($("input#codigo").val()),
  311.                                     brand: brand,
  312.                                     expirationMonth: $('input#expiracao').val().split('/')[0],
  313.                                     expirationYear: 20+$('input#expiracao').val().split('/')[1],
  314.                                     success: function(response) {
  315.                                         console.info('Token do cartao foi gerado com sucesso.');
  316.                                         creditCardToken=response.card.token;
  317.                                         $.ajax({
  318.                                                 url: 'pagamento',
  319.                                                 type: 'POST',
  320.                                                 data: $('#signup').serialize()+'&creditCardToken='+creditCardToken+'&senderHash='+PagSeguroDirectPayment.getSenderHash(),
  321.                                                 success: function(response){
  322.                                                     if(typeof(response.code)!=='undefined'){
  323.                                                         alert('Pagamento efetuado com sucesso!');
  324.                                                         console.info(response);
  325.                                                     }else{
  326.                                                         console.error('Erro Pagamento');
  327.                                                         console.error(response);
  328.                                                     }
  329.                                                 }
  330.                                             });
  331.                                     },
  332.                                     error: function(response) {
  333.                                         console.error('Erro - Token Cartao');
  334.                                         console.error(response);
  335.                                     },
  336.                                     complete: function(response) {
  337.                                         //tratamento comum para todas chamadas
  338.                                     }
  339.                             }
  340.                             PagSeguroDirectPayment.createCardToken(param);
  341.                         },
  342.                         error: function(response) {
  343.                             alert('Sistema fora do ar! Tente novamente mais tarde!')
  344.                             console.error('Erro - Bandeira');
  345.                             console.error(response);
  346.                         }
  347.                     });
  348.  
  349.                 });
  350.             </script>
  351.             <!-- Fim Integração pagSeguro -->
  352.     </body>
  353. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!