Paypal Express Checkout window vanishes or terminated before it finish loading

Ugoteck
Contributor
Contributor

Please am integrating paypal in a project using paypal Express checkout (EC), when you click the payment button, the Express Checkout window begins to load but it vanishes or is terminated before it finishes loading. i dont know the cause. initially, it loads completely and is ready for the user to enter his/her paypal details, but after loading completey for about three to five times, it started to malfunction(terminated and vanishes before it finish loading). please can any body help me with the solution, am new to paypal integration. below is the code i use

 

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

 

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

    // Render the PayPal button
   var amt = document.getElementById("amount").value;
    paypal.Button.render({

        // Set your environment

        env: 'sandbox', // sandbox | production

        // Specify the style of the button

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

        // PayPal Client IDs - replace with your own
        // Create a PayPal app: https://developer.paypal.com/developer/applications/create

        client: {
            sandbox:    'AZDxjDScFpQtjWTOUtWKbyN_bDt4OgqaF4eYXlewfBP4-8aqX3PiV8e1GWU6liB2CUXlkA59kJXE7M6R',
            production: '<insert production client id>'
        },
        
        
            commit: true, // Show a 'Pay Now' button

        // Wait for the PayPal button to be clicked

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

        // Wait for the payment to be authorized by the customer

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

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

</script>

 

thanks

Login to Me Too
1 REPLY 1

MTS_Jennifer
Moderator
Moderator

Here is a solution to your code:

 

Change this:

    // Render the PayPal button
   var amt = document.getElementById("amount").value;
    paypal.Button.render({

 

To

 

 paypal.Button.render({

 

With everything else remaining the same, I was able to run a successful test transaction.

 

This is from the demo documenation on the PayPal Developer website.

 

Thanks,
Jennifer

 

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.