Search code examples
javascriptpaypalpaypal-sandbox

PayPal Express Checkout, error when supplying input_fields

I'm using PayPal Express Checkout from JavaScript.

This is the code I have and works (I see the PayPal button, I can click it, and the payment window opens fine):

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

<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<script>
        paypal.Button.render({

            env: 'sandbox',

            client: {
                sandbox: 'xxxxxx',
                production: 'yyyyyy'
            },

            payment: function () {

                var env = this.props.env;
                var client = this.props.client;

                return paypal.rest.payment.create(env, client, {
                    transactions: [
                        {
                            amount: { total: '1.00', currency: 'USD' }
                        }
                    ]

                });
            },

            commit: true, 

            onAuthorize: function (data, actions) {

                return actions.payment.execute().then(function() {
                    document.querySelector('#paypal-button-container').innerText = 'Payment Complete!';
                });
            }

        }, '#paypal-button');

</script>

But, if I supply input_fields like the code below, it stops working and throws a console error:

        paypal.Button.render({

            env: 'sandbox',

            client: {
                sandbox: 'xxxxxx',
                production: 'yyyyyy'
            },

            payment: function () {

                var env = this.props.env;
                var client = this.props.client;

                return paypal.rest.payment.create(env, client, {
                    transactions: [
                        {
                            amount: { total: '1.00', currency: 'USD' }
                        }
                    ]

                }, {
                    input_fields: {
                        no_shipping: 1
                    }
                });
            },

            commit: true, 

            onAuthorize: function (data, actions) {
                return actions.payment.execute().then(function() {
                    document.querySelector('#paypal-button-container').innerText = 'Payment Complete!';
                });
            }

        }, '#paypal-button');

This is the error detail: Console error details

In this last case, I see the PayPal button, the window opens when I click on it, but after a few seconds the window closes itself and gives the console error provided here.
What am I missing?

UPDATE
As @bluepnume pointed out, if I switch from sandbox to production environment, the problem disappears.
But, if I also supply first_name and last_name in input_fields, I get another console error no matter if I'm in sandbox or production environment.

This is the code snippet:

, {
      input_fields: {
          no_shipping: 1,
          first_name: 'Abc',
          last_name: 'Dfg'
      }
 }

And this is the error message:

enter image description here

Solution

  • This is a known issue that's being tracked. For what it's worth, if you run in production mode, the issue should not be present.

    EDIT: For the second issue, looks like this is not a valid request format. You should be able to see in your network tab:

    enter image description here

    Are you looking for the payer_info field for the payments api? https://developer.paypal.com/docs/api/payments/