HTML Map jQuery Link jQuery Link
Como posso fazer em Css Html um formulário de doação usando os botões do Paypal? | Neculai Fantanaru
ro  fr  en  es  pt  ar  zh  hi  de  ru
Feed share on facebook share on twitter ART 2.0 ART 3.0 ART 4.0 ART 5.0 ART 6.0

Como posso fazer em Css Html um formulário de doação usando os botões do Paypal?

On May 05, 2021, in Leadership and Attitude, by Neculai Fantanaru

donate css paypay form

Você pode ver o código inteiro aqui: https://jsfiddle.net/L27vz06u/

--- PASSO 1 --- Faça login no PayPal e vá para https://www.paypal.com/buttons/ para obter o código do link para o botão desejado. Neste caso, selecione o código do botão DONATE. O código do link para o botão DONATE deve ser parecido com este:

 https://www.paypal.com/donate?hosted_button_id=27KSZ3KQSC 

e também o PayPal fornece o código do botão, que deve ser parecido com este:

 <form action="https://www.paypal.com/donate" method="post" target="_top"> 
<input type="hidden" name="hosted_button_id" value="77FLYC2Z7JBUL" /> 
<input class="paypal-img" type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" /> 
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" /> 
</form> 

--- PASSO 2 --- Copie a seguinte linha antes de seu </head> tag e substitua-o pelo nome do seu site:

 <link rel="stylesheet" type="text/css"  href="https://YOUR-WEBSITE.com/paypalform.css"/>  

Este é o código para o arquivo css chamado paypalform.css :


.paypal-form {
border: 2px solid #FFC734;
}
.paypal-form hr {
margin:0;
}
.paypal-form h4{
font-size:16px;
}
paypal-form .paypal-header {
display: flex;
align-items: center;
padding: 10px 20px;
    }
paypal-form .paypal-header .header-text {
margin-right: 15px;
color: #DF662F;
margin-top: 0;
margin-bottom: 0;
font-size:15px;
        }
paypal-form .paypal-header img{
width:100px;
height:30px;
    }

paypal-form .paypal-body {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0;
border-top: 1px solid #efe9e9;
    }
paypal-form .paypal-body .col {
padding: 15px 15px;
padding-bottom:20px;
        }
paypal-form .paypal-body .col:first-child {
border-right: 1px solid #efe9e9;
            }

paypal-form .paypal-body h4 {
margin: 0;
background-color: #333333;
color: white;
display: inline-block;
padding: 3px 10px;
text-transform:uppercase;
font-size:14px;
        }
paypal-form .paypal-body p{
font-size:15px;
line-height:1.5;
margin-top:4px;
    }
paypal-form .paypal-content{
display:flex;
flex-direction:column;
        
    }
paypal-form .paypal-content form {
display: flex;
flex-direction: column;
    }
paypal-form .paypal-content select {
height: 35px;
margin-bottom: 10px;
padding-left: 5px;
border: 1px solid #bdb5b5;
        }
paypal-form .paypal-content .paypal-img {
align-self: flex-start;
border:none !important;
        }

media(max-width:768px){
paypal-form .paypal-body {
grid-template-columns: 1fr;                
            }
paypal-form .paypal-body .col:first-child {
border-bottom: 1px solid #efe9e9;
                }
        }

.paypal-contact {
padding: 15px 20px;
padding-bottom:25px;
border: 2px solid #FFC734;
margin-top: 25px;
margin-bottom: 20px;
}
.paypal-contact * {
margin:0;
font-size:15px;
}
    
paypal-contact h4 {
color: #DF662F;
margin-bottom:15px;
        }
paypal-contact p {
margin-bottom: 8px;
font-weight:bold;
        }
paypal-contact p span {
color: dimgrey;
text-transform:uppercase;
font-weight:normal;
margin-bottom: 15px;*/
        }
paypal-contact .text-muted {
font-size:11px;
color:dimgrey;
margin-bottom: 15px;*/
        }

.paypal-form-button{
display:flex;
flex-direction:column;
}

--- PASSO 3 --- Copie este código html onde você deseja que apareça em sua página html (e substitua o hosted_button_id and <form action= ... </form> do código abaixo, com o seu código do PayPal )


<!-- Donation Form START -->

<div class="paypal-form" >
<div class="paypal-header">
<h4 class="header-text">Donate via Paypal</h4>
<img src="https://neculaifantanaru.com/paypal.png" alt="Alternate Text" />
</div>
<!-- Identify your business so that you can collect the payments. -->
<div class="paypal-body">
<div class="col">
<div class="body-text">
<h4>RECURRENT DONATION</h4>
<p>Donate monthly to support <br>the NeculaiFantanaru.com project</p>
</div>
<div class="paypal-content">

<!-- PayPal DONATION COMBO BOX. Replace with your hosted_button_id-->

<form action="https://www.paypal.com/donate?hosted_button_id=27KSZ3KQSC" method="post" class="den_webinar">

<!-- Identify your business so that you can collect the payments. -->
<input type="hidden" name="business" value="YOUR EMAIL ADDRESS">

<!-- Specify a Donate button. -->
<input type="hidden" name="cmd" value="_donations">

<!-- Specify details about the contribution -->
<input type="hidden" name="item_name" value="Donation">
<input type="hidden" name="item_number" value="Donation">
<select name="amount"><option value="3.00">€3.00</option><option value="5.00">€5.00</option><option value="10.00">€10.00</option><option value="25.00">€25.00</option><option value="50.00">€50.00</option></select>
<input type="hidden" name="currency_code" value="EUR">

<!-- Display the payment button. -->
<input class="paypal-img" type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_subscribeCC_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
</form>


</div>
</div>
<div class="col">
<div class="body-text">
<h4>SINGLE DONATION</h4>
<p>Donate the desired amount to support <br>the NeculaiFantanaru.com project</p>
</div>
<div class="paypal-content">

<!-- YOUR PAYPAL FORM BUTTON -->

<form action="https://www.paypal.com/donate" method="post" target="_top">
<input type="hidden" name="hosted_button_id" value="77FLYC2Z7JBUL" />
<input class="paypal-img" type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" />
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
</form>

<!-- YOUR PAYPAL FORM BUTTON -->

</div>
</div>

</div>

</div>
<div class="paypal-contact">
<h4>Donate by Bank Transfer</h4>
<p>
<span>Account Ron: </span>
RO34INGB0000999900448439</p>
<div class="text-muted">
Open account at ING Bank
</div>
</div>

<!-- Donation Form Finnish --> 

Isso é tudo, pessoal.

Por favor, olhe o formulário abaixo e veja como funciona.

 


Artigos recentes consultados por leitores:

  1. A imagem de uma rosa do auge do século sem idade
  2. Assine seu nome em meu coração
  3. Seu sorriso pintado
  4. Constelação Tatiana

( )

Donate via Paypal

Alternate Text

RECURRENT DONATION

Donate monthly to support
the NeculaiFantanaru.com project

SINGLE DONATION

Donate the desired amount to support
the NeculaiFantanaru.com project

Donate by Bank Transfer

Account Ron: RO34INGB0000999900448439

Open account at ING Bank
Alatura-te Comunitatii Neculai Fantanaru

decoration
Sobre | Site Map | Termos e Condições | Parceiros | Feedback | RSS Feeds
© Neculai Fantanaru. All rights reserved.