<!-- HTML code to display the PayPal button container -->
<div id="paypal-button-container"></div>
<!-- JavaScript code to load and configure the PayPal button -->
<script src="https://www.paypal.com/sdk/js?client-id=AQS1hH424lj64bv1tyE7NRcXA0plW033zhzXmLAi7UEnqH9afQrmUGElZTYDoo_p6acbLdsPLzQn2ejI"></script>
<script>
// Render the PayPal button
paypal.Buttons({
createOrder: function(data, actions) {
// This function is called when the user clicks the PayPal button
// and is responsible for creating an order on PayPal
// Get the donation amount entered by the user
var donationAmount = prompt("Enter donation amount:");
// Validate the donation amount
if (!donationAmount || isNaN(donationAmount)) {
alert("Invalid donation amount. Please enter a valid number.");
return false;
}
// Round the donation amount to 2 decimal places
donationAmount = Number(donationAmount).toFixed(2);
// Return the order details to PayPal
return actions.order.create({
purchase_units: [{
amount: {
value: donationAmount
}
}]
});
},
onApprove: function(data, actions) {
// This function is called when the user completes the PayPal checkout
// and is responsible for capturing the payment on your server
return actions.order.capture().then(function(details) {
// Call your server-side endpoint to process the payment and update your database
// with the details of the transaction
console.log('Transaction completed:', details);
// Replace this console.log statement with your actual server-side logic
});
},
fundingSource: paypal.FUNDING.PAYPAL, // Allow payment with PayPal balance
style: {
label: 'checkout', // Set the button label to 'checkout'
fundingicons: true // Show funding icons for available payment methods
},
enableStandardCardFields: true // Enable credit card fields for non-PayPal users
}).render('#paypal-button-container');
</script>