I'm building a WordPress website and there I've already integrated PayPal checkout. Now, I want to add a discount coupon code to the checkout page. How can I achieve this with some modification in the below code?
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Ensures optimal rendering on mobile devices -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Optimal Internet Explorer compatibility -->
<!-- Include the PayPal JavaScript SDK; replace "test" with your own sandbox Business account app client ID -->
<script src="https://www.paypal.com/sdk/js?client-id=<test-id>;currency=USD"></script>
<!-- Set up a container element for the button -->
<div id="paypal-button-container"></div>
<script>
paypal.Buttons({
// Sets up the transaction when a payment button is clicked
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: '77.44' // Can reference variables or functions. Example: `value: document.getElementById('...').value`
}
}]
});
},
// Finalize the transaction after payer approval
onApprove: function(data, actions) {
return actions.order.capture().then(function(orderData) {
// Successful capture! For dev/demo purposes:
console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
var transaction = orderData.purchase_units[0].payments.captures[0];
alert('Transaction '+ transaction.status + ': ' + transaction.id + '\n\nSee console for all available details');
// When ready to go live, remove the alert and show a success message within this page. For example:
// var element = document.getElementById('paypal-button-container');
// element.innerHTML = '';
// element.innerHTML = '<h3>Thank you for your payment!</h3>';
// Or go to another URL: actions.redirect('thank_you.html');
});
}
}).render('#paypal-button-container');
</script>
If you are using Wordpress, you may want to consider some type of checkout that actually integrates with the Wordpress CMS in some fashion -- such as a plugin like WooCommerce, and one of its various PayPal payment method plugins.
Otherwise, if working with independent HTML/JS code like the above, that does not interface with Wordpress in any way. It simply does what you tell it to do. Where the amount, 77.44 in this example, is specified, you can add your own code to apply a discount. You are free to to do anything that is possible with HTML/JS, and there are any number of guides that can get you started on programming if this is new to you.
To create a discount button code: 1.) Log in to your PayPal account.
2.) Click Tools.
3.) Click PayPal buttons.
4.) Click Select button for preferred button type.
5.) Enter your information to customize the button to your needs.
6.) Click Step 2: Track inventory, profit & loss and uncheck Save button at PayPal. (This ensures that you're creating a non-hosted button.)
7.) Click Create Button.
8.) Click Remove code protection. (You must do this to make your code editable.) 9.) Click Select Code to select the button code.
10.) Copy and paste the button code into your own webpage code.
An example of the JavaScript code used to apply the 10% discount code
<script type="text/javascript">
<!--
discnt = 10; // set blanket 10% discount
//-->
</script>And this is the code for a button to apply the 10% discount code
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" onsubmit="this.target = 'paypal';
discnt = 10;
coupval = '(blanket)';
ReadForm (this);
discnt = 0;">
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="business" value="your_email_goes_here@your_site.com" />
<input type="hidden" name="item_name" value="Test Item" />
<input type="hidden" name="amount" value="10.00" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="lc" value="US" />
<input type="hidden" name="baseamt" value="10.00" />
Input quantity >
<input type = "text"
name = "quantity"
value = "1"
size = "3" />
<input type="image" src="addcart.gif" name="submit" alt="cart add" />
</form>