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 |

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:
- A imagem de uma rosa do auge do século sem idade
- Assine seu nome em meu coração
- Seu sorriso pintado
- Constelação Tatiana
( )