Horizontal Alignment of 2 buttons in 1 row in Express Checkout Script

ronald4u
New Community Member

I am looking for small help regarding alignment of buttons new paypal express checkout script. When i paste the script on my websites pricing table it by default places itself in vertical manner (Image A), where as i want it to be placed horizontally one besides other (Image B).

Image A.jpg

Mentioned below is the paypal code to be aligned, any help shall be greatly appreciated.

 

<script src="https://www.paypalobjects.com/api/checkout.js"></script>

<div id="paypal-button-container"></div>




<script>

    // Render the PayPal button

    paypal.Button.render({

        // Set your environment

        env: 'production', // sandbox | production

        // Specify the style of the button

        style: {
            label: 'checkout', // checkout | credit | pay
            size:  'medium',    // small | medium | responsive
            shape: 'pill',     // pill | rect
            color: 'blue'      // gold | blue | silver
        },

        client: {
            sandbox:    'code',
            production: 'code'
        },

        payment: function(data, actions) {
            return actions.payment.create({
                payment: {
                    transactions: [
                        {
                            amount: { total: '1.99', currency: 'USD' }
                        }
                    ]
                }
            });
        },

        onAuthorize: function(data, actions) {
            return actions.payment.execute().then(function() {
                window.alert('Payment Complete!');
            });
        }

    }, '#paypal-button-container');

</script>

<script src="https://www.paypalobjects.com/api/checkout.js"></script>

<div id="paypal-button-container"></div>

<script>

    // Render the PayPal button

    paypal.Button.render({

        // Set your environment

        env: 'production', // sandbox | production

        // Specify the style of the button

        style: {
            label: 'checkout', // checkout | credit | pay
            size:  'medium',    // small | medium | responsive
            shape: 'pill',     // pill | rect
            color: 'blue'      // gold | blue | silver
        },

        client: {
            sandbox:    'code',
            production: 'code'
        },

        payment: function(data, actions) {
            return actions.payment.create({
                payment: {
                    transactions: [
                        {
                            amount: { total: '2.99', currency: 'USD' }
                        }
                    ]
                }
            });
        },

        onAuthorize: function(data, actions) {
            return actions.payment.execute().then(function() {
                window.alert('Payment Complete!');
            });
        }

    }, '#paypal-button-container');

</script>
Login to Me Too
0 REPLIES 0

Haven't Found your Answer?

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