I am working with paypal and I need to render multiple paypal express checkout buttons in my table.

I followed a solution I found in this link

and here's what I did.

  document.querySelectorAll('.btn-paypal').forEach(function(){
    var dis = $(this);
    var amount = dis.data('amount');

    paypal.Button.render({

        env: 'sandbox', 

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

        client: {
            sandbox:    'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-w6Q9rX2BdH1',
            production: '<insert production client id>'
        },

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

        mit: true,

        onAuthorize: function(data, actions) {
            return actions.payment.get().then(function(paymentDetails) {
                console.log(paymentDetails)
                swal({ 
                    title: "Confirm Payment!",
                    text: "Confirm the amount of ¥"+paymentDetails.transactions[0].amount.total,
                    type: "info",
                    confirmButtonClass: "btn btn-danger",
                    confirmButtonText: "Yes! Continue Payment",
                    showCancelButton: true,
                    cancelButtonText: "No! Cancel Transaction"
                  },
                  function(){
                    $('.ajax-loading').show();
                   return actions.payment.execute().then(function(){
                    alert('Payment Success');
                   })
                });
            });
        },
        onError: function(err) {
            $('.ajax-loading').hide();
            swal('Ooops!','Paypal failed to load. Please click the paypal button again!','error');
            console.log(err);
        }
    }, dis);
})

when I try to run this code I get no button displayed in the table and an error appears in the console saying, Uncaught Error: Document is ready and element [object Object] does not exist

What is my error here? Please help.

Thanks!

I am working with paypal and I need to render multiple paypal express checkout buttons in my table.

I followed a solution I found in this link

and here's what I did.

  document.querySelectorAll('.btn-paypal').forEach(function(){
    var dis = $(this);
    var amount = dis.data('amount');

    paypal.Button.render({

        env: 'sandbox', 

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

        client: {
            sandbox:    'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-w6Q9rX2BdH1',
            production: '<insert production client id>'
        },

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

        mit: true,

        onAuthorize: function(data, actions) {
            return actions.payment.get().then(function(paymentDetails) {
                console.log(paymentDetails)
                swal({ 
                    title: "Confirm Payment!",
                    text: "Confirm the amount of ¥"+paymentDetails.transactions[0].amount.total,
                    type: "info",
                    confirmButtonClass: "btn btn-danger",
                    confirmButtonText: "Yes! Continue Payment",
                    showCancelButton: true,
                    cancelButtonText: "No! Cancel Transaction"
                  },
                  function(){
                    $('.ajax-loading').show();
                   return actions.payment.execute().then(function(){
                    alert('Payment Success');
                   })
                });
            });
        },
        onError: function(err) {
            $('.ajax-loading').hide();
            swal('Ooops!','Paypal failed to load. Please click the paypal button again!','error');
            console.log(err);
        }
    }, dis);
})

when I try to run this code I get no button displayed in the table and an error appears in the console saying, Uncaught Error: Document is ready and element [object Object] does not exist

What is my error here? Please help.

Thanks!

• javascript
• jquery
• paypal

2 Answers 2

I have a single Paypal button, but had the same error. The HTML example states

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

Braintree manual

while the script is in a separate file. It seems that the div element is not yet rendered while the script is loading.

I simply moved the script inside the div element and now the button appears. Make sure the script does not load elsewhere prior this point.

If you are using a js framework like Vue for example, just load it first in the mounted hook and it should work.