Cum pot face în CSS şi HTML un formular de donaţie folosind butoane Paypal?

Puteti vizualiza intregul cod aici: https://jsfiddle.net/L27vz06u/

--- PASUL 1 --- Conectati-va la PayPal si accesati https://www.paypal.com/buttons/ pentru a obtine codul de legatura pentru butonul dorit. In acest caz, selectati codul butonului DONATE. Codul de legatura pentru butonul DONATE ar trebui sa arate astfel:

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

și, de asemenea, PayPal vă oferă codul butonului, care ar trebui să arate cam așa:

 <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> 

--- PASUL 2 --- Copiati urmatoarea linie inainte de </head> tag si schimbati numele website-ului:

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

Acesta este codul pentru fişierul 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;
}

--- PASUL 3 --- Copiați acest cod html unde doriți să apară pe pagina dumneavoastra html (şi înlocuiţi hosted_button_id si <form action= ... </form> din codul de mai jos, cu codul vostru 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 --> 

That's all folks.

Vă rog să consultați formularul de mai jos și să vedeți cum funcționează.