help needed to install pay in 3 checkout onto my website
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Can someone please explain how to add Paypal Pay in 3 Checkout to my website please.
I have tried adding the scripts provided to html codes body / head as described, but getting nowhere.
I am using the Xara website software.
Thanks
Harry
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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
Haven't Found your Answer?
It happens. Hit the "Login to Ask the community" button to create a question for the PayPal community.
- Mandatory Account Creation Hindering Customer Experience in REST APIs
- PayPal Express Checkout charging incorrect values? in Sandbox Environment
- Need help to integrate PayPal Checkout Advanced (PPCP) with WooCommerce in PayPal Upgrade Community
- Cart dropps items, fails to return customer to previous window in PayPal Payments Standard
- PayPal checkout broken in Safari last 24 hours in PayPal Payments Standard