Smart Buttons not displaying in browser
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I've created a basic Smart Button with ID set to SB for now. I've created a clean HTML page as a test. Pasted code displays in Dreamweaver Preview perfectly, but uploaded page shows no buttons in the browser. https://swlsiy.org.uk/iyengar-yoga/test-paypal-2.html
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hello,
I don't use Dreamweaver, so I can't comment on using that software.
A basic HTML editor such as notepad++ works fine for my basic testing and it's what I've used for your example.
Below is the code for your button, save it with a .html extension and upload it to your web-server. Don't edit it with Dreamweaver.
The code works fine here and the buttons display and function correctly.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Add meta tags for mobile and IE -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title> PayPal Checkout Integration | Client Demo </title>
</head>
<body>
<!-- Set up a container element for the button -->
<div id="paypal-button-container"></div>
<!-- Include the PayPal JavaScript SDK -->
<script src="https://www.paypal.com/sdk/js?client-id=AU_IvrEo_pf_Xfk91VMewQds34z9K9AOfW3xfrOSdeMKK6K_kXKRmk-YUKyUTjkitFpcSIoGG8CGpzSy¤cy=GBP"></script>
<script>
// Render the PayPal button into #paypal-button-container
paypal.Buttons({
// Set up the transaction
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: '88.44'
}
}]
});
},
// Finalize the transaction
onApprove: function(data, actions) {
return actions.order.capture().then(function(orderData) {
// Successful capture! For 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');
// Replace the above to show a success message within this page, e.g.
// const 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>
Thanks !
Was my post helpful? If so, please give me a kudos!
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Thank you MTS_Justin
Works fine. https://swlsiy.org.uk/iyengar-yoga/test-paypal-3.html As you say, something in Dreamweaver is corrupting the code. I used text edit and another ftp client. Thank you for looking at so quickly.
Andy
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hello,
I believe Dreamweaver and other such programs apply formatting to the code, which for a "normal" web-page wouldn't break the page's content, but when you're dealing with code for payment / checkout buttons, the applied formatting tends to break the functionality of the button.
Good to hear you were able to get it working by removing Dreamweaver from the equation.
Thanks !
Was my post helpful? If so, please give me a kudos!
Haven't Found your Answer?
It happens. Hit the "Login to Ask the community" button to create a question for the PayPal community.
- “Sell on Social” button not on my buttons list in PayPal Payments Standard
- Issue with 403 Forbidden Error when Accessing PayPal Sandbox API. in Sandbox Environment
- Checkout buttons appear twice and popups close as soon as they appear (ReactJS) in PayPal Payments Standard
- payments in javascript with custom button in SDKs
- Cannot Make Standard Integration Work in REST APIs