Crear Custom PayPal donar botones usando donate. js

Vista prévia

Descripción

Done. js es una librería JavaScript fácil de usar que le ayuda a crear botones de donar/pago de Paypal de estilo limpio y plano para su sitio web de comercio electrónico y negocios. El objetivo es crear una interfaz de usuario de selección en la que se pueda elegir un importe fijo o personalizado.

Funcionamiento

Para empezar, primero debe incluir el done. js en su página web.

<script src="/path/to/donate.js"></script>

Añade un formulario de donación de PayPal a tu página web.

<div class="donate"></div>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">



<input type="hidden" name="cmd" value="_donations">



<input type="hidden" name="business" value="[email protected]">



<input type="hidden" name="lc" value="US">



<input type="hidden" name="amount">



<input type="hidden" name="no_note" value="0">



<input type="hidden" name="cn" value="Add special instructions to the seller:">



<input type="hidden" name="no_shipping" value="2">



<input type="hidden" name="currency_code" value="USD">



<input type="hidden" name="bn" value="PP-DonationsBF:btn_donateCC_LG.gif:NonHosted">



<center>





<button class="btn bg-orange">Donate</button>



</center>

</form>

Inicialice donate. js.

Donate({


container: ".donate",


 prefix: "$",


 classes: {



active: "active"


}, amounts: [




50,




 100,




 200,




 300,




 400,




 500,




 700


],


 custom: true,


 format: function (val) {



return val > 1000





 ? (val = val.toString()).substring(0, 1) + "," + val.substring(1)





 : val





 ;


},


 onChange: function (val, li, e) {




document.querySelector("[name=amount]").value = val;


},


 defaultValue: 20
});

Los estilos CSS requeridos para los botones de donación.

.donate li {

list-style: none;

display: inline-block;

padding: 20px;

background-color: #2C3E50;

margin: 10px;

width: 18%;

text-align: center;

color: #ecf0f1;

font-weight: bold;

opacity: 0.7;

cursor: pointer;
}

.donate li:hover { opacity: 1; }

.donate li.active {

opacity: 1;

background-color: #2ecc71;
}

.donate li > input {

max-width: 56px;

border: none;

padding: 10px;

font-family: "Open Sans", sans-serif;

margin-left: 10px;
}

.donate li:last-of-type {

height: 30px;

padding-top: 13px;
}

.donate ul {

padding: 0;

margin: 0;
}

button.btn.bg-orange { padding: 20px 160px; }

.donate { text-align: center; }

.footer {

text-align: center;

position: fixed;

left: 0;

right: 0;

bottom: 25px;

font-family: "Open Sans", sans-serif;

font-weight: 400;

color: #333;
}

.footer a {

text-decoration: none;

color: #111;

font-weight: bold;
}

.footer a:hover { color: #111; }

.footer a:hover { text-decoration: underline;

Opciones predeterminadas.

// Donate(options)
// options: An object containing the following fields:


// The snippet that should appear *before* the amount value.
 // Could be useful for currencies (e.g. `"$"`).
prefix: "",

// The snippet that should appear *after* the amount value.
sufix: "",

// The change handler called with: the amount value (Number), the amount element and the event object.
onChange: function () {},

// The format handler which is used to format the amounts.
 // Should return strings or values that can be stringified.
format: function (v) { return v.toString(); },

// The after-append handler.
itemAppended: function () {},

// The donate.js container.
container: null,

// An array of numbers representing the fixed amounts.
amounts: [],

// If 'true', then the custom amount input will appear.
 // If it's a string, it will be interpreted as raw HTML.
custom: false,

// An object to configure the classes.
classes: {

active: "active" // The active class.
}

Registro de cambios

07/31/2018

• v1.2.4