Hello @HarryKaplan ,
To implement the UK Pay Later Button passing dataAttributes.amount when calling loadPayPalSDK is required for the Pay Later button to render.
If you have existing standalone PayPal buttons on your page, be sure to also call isEligible() before rendering each button as in the example below.
paypalCheckoutInstance.loadPayPalSDK({
components: 'buttons,messages'
currency: 'USD',
'enable-funding': 'paylater',
dataAttributes: {
amount: '10.00'
}
// Other config options here
}, function () {
var button = paypal.Buttons({
fundingSource: paypal.FUNDING.PAYLATER,
createOrder: function () {
return paypalCheckoutInstance.createPayment({
flow: 'checkout', // Required
amount: '10.00', // Required
currency: 'USD' // Required
});
},
onApprove: function (data, actions) {
return paypalCheckoutInstance.tokenizePayment(data, function (err, payload) {
// Submit `payload.nonce` to your server
});
},
});
if (!button.isEligible()) {
// Skip rendering if not eligible
return;
}
button.render('#pay-later-button');
});
Alternatively, if you're not processing the transaction server side, the sample code below adds payment buttons to your website that capture the payment immediately.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Ensures optimal rendering on mobile devices -->
</head>
<body>
<!-- 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¤cy=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>
</body>
</html>
Powered by Custom Software : NexWebSites.com PayPal Developers
