* Payment

Payment

Thank You for your business

Perfect — here’s a fully working PayPal Smart Button embed that lets the user enter their own amount before checkout. You can paste this directly into a Beaver Builder HTML module.

✅ Copy-Paste HTML for Beaver Builder

🔑 What you need to make it work

  1. PayPal Business Account (or upgraded personal account).
  2. Client ID from PayPal Developer Dashboard — this is what connects the buttons to your account.
  3. Embed code pasted into Beaver Builder’s HTML module.

Once those are in place, the buttons will show up on your page and payments will go straight into your PayPal account.

when you embed the PayPal Smart Buttons code into Beaver Builder (via the HTML module), it will connect directly to your PayPal account and display the full set of payment options:

  • PayPal Checkout (standard PayPal login and balance)
  • Venmo (if the customer has Venmo enabled)
  • Pay Later (installments or financing, depending on eligibility)
  • Debit or Credit Card (without requiring a PayPal account)

All of these are handled by PayPal’s JavaScript SDK, so once you paste the code and include your PayPal Client ID, the buttons automatically link to your PayPal account. Customers can click “Pay” and complete the transaction through PayPal’s secure checkout flow.

<!-- Payment summary -->
<div style="max-width: 520px; margin-bottom: 16px;">
<h2 style="margin: 0 0 8px;">HVAC Service Payment</h2>
<div style="color:#555;">Thank you for your business.</div>
</div>

<!-- Amount input -->
<label for="custom-amount" style="display:block; margin:12px 0 6px; font-weight:600;">Enter amount (USD)</label>
<input type="number" id="custom-amount" placeholder="e.g. 275.00" style="width:100%; max-width:520px; padding:8px; font-size:16px;" min="1" step="0.01" required>

<!-- Optional note field -->
<label for="customer-note" style="display:block; margin:12px 0 6px; font-weight:600;">Add a note (optional)</label>
<textarea id="customer-note" maxlength="200" rows="3" style="width:100%; max-width:520px;"></textarea>

<!-- PayPal buttons container -->
<div id="paypal-buttons-container" style="margin-top:16px;"></div>

<!-- PayPal SDK -->
<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&currency=USD&components=buttons,hosted-fields,card-fields,venmo,paylater"></script>

<script>
paypal.Buttons({
style: {
layout: 'vertical',
color: 'gold',
shape: 'rect',
label: 'paypal'
},

createOrder: function(data, actions) {
const amount = document.getElementById('custom-amount').value;
const note = document.getElementById('customer-note').value || '';

if (!amount || parseFloat(amount) <= 0) {
alert('Please enter a valid amount.');
return;
}

return actions.order.create({
purchase_units: [{
amount: {
value: amount,
currency_code: 'USD'
},
description: 'HVAC Service',
custom_id: 'HVAC-CUSTOM',
soft_descriptor: 'Frontline Mechanical',
items: [{
name: 'HVAC Service',
quantity: '1',
unit_amount: { value: amount, currency_code: 'USD' }
}]
}],
application_context: {
shipping_preference: 'NO_SHIPPING',
brand_name: 'Frontline Mechanical Inc',
user_action: 'PAY_NOW',
landing_page: 'LOGIN'
}
});
},

onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Payment completed by ' + (details.payer.name?.given_name || 'customer') + '. Thank you!');
});
},

onError: function(err) {
console.error('PayPal error:', err);
alert('There was an issue processing the payment. Please try again.');
}
}).render('#paypal-buttons-container');
</script>