Smart Buttons not displaying in browser

4pixels
Contributor
Contributor

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

Login to Me Too
3 REPLIES 3

MTS_Justin
Moderator
Moderator

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&currency=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!
Login to Me Too

4pixels
Contributor
Contributor

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

Login to Me Too

MTS_Justin
Moderator
Moderator

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!
Login to Me Too

Haven't Found your Answer?

It happens. Hit the "Login to Ask the community" button to create a question for the PayPal community.