paypal / paypal-js

Loading wrapper and TypeScript types for the PayPal JS SDK
Apache License 2.0
238 stars 83 forks source link

[Bug] Paypal button doesn't appear in some browser #560

Open josePamp opened 1 month ago

josePamp commented 1 month ago

Library used

paypal-js

🐞 Describe the Bug

The paypal button isn't showing in Samsung and Mi browser.

πŸ”¬ Minimal Reproduction

Just the normal integration

<div id="paypal-button-container" style="text-align: center">PAY AND CONFIRM PURCHASE</div>

<script src="https://www.paypal.com/sdk/js?client-id={{clientId}}&currency=EUR" data-namespace="paypal_sdk"></script>

paypal_sdk.Buttons({`
        style:{
            layout:'horizontal',
            tagline:false,
            color: 'blue',
            label: 'paypal'
        },

        createOrder: function(data, actions) {
            if(check_order_info() == 0 ){
                let result_comp_1 = "";
                if(document.getElementById('btn_confirm_guest_address')){
                    result_comp_1 = call_files_ajax_form($('#form_datos').serialize(),'guest_checkout.php');
                }
                else{
                    result_comp_1 = call_files_ajax_form($('#form_datos').serialize(),'checkout.php');
                }

                let result_comp_2 = "0";
                if(result_comp_1 == '1'){
                    if(document.getElementById('btn_confirm_guest_address')){
                        result_comp_2 = call_files_ajax_form('send','store_create_purchase.php?invitado=1');
                    }
                    else{
                        result_comp_2 = call_files_ajax_form('send','store_create_purchase.php');
                    }

                    if(result_comp_2 != null){
                        return actions.order.create({
                            purchase_units: [{
                                amount: {
                                    value: result_comp_2[0]
                                },
                                reference_id:result_comp_2[1],
                                description:result_comp_2[1]

                            }],
                            application_context:{
                                shipping_preference:'NO_SHIPPING'
                            }
                        });
                    }
                }
            }
        },
        onApprove: function(data, actions) {
            return actions.order.capture().then(function(orderData) {
                payOrder(orderData);
            });
        },
    }).render('#paypal-button-container');

    function payOrder(paypalOrder)
    {
        let url = 'store_gateway_paypal_checkout.php';
        let ajaxData = {
            method: "POST",
            url: URL_WEB+url,
            data: {paypalData: paypalOrder, paymentMethod: ''},
            async:false,
            success: function(result){
                result = $.parseJSON(result);
                if(result.success){
                    location.href = result.success;
                }
            }
        };
        $.ajax(ajaxData);
    }

    call_files_ajax_form(allData,url){
        let results;
        let ajaxData = {
            method: "POST",
            url: URL_WEB+url,
            data: allData,
            async:false,
            success: function(result){
                if(result){
                    results= JSON.parse(result);
                }
            }
        };
        $.ajax(ajaxData);
        return results;
    }

πŸ˜• Actual Behavior

The Paypal button is not displayed in those browsers. We see that in those browsers, when we check the Paypal information, it returns empty button instances, while if we check in other browsers or on the computer, it always returns instances with elements.

On Chrome browser: Paypal response on computer

On Mi browser: Paypal response on Mi browser

πŸ€” Expected Behavior

The button should render and work normally in all browsers.

🌍 Environment

carloscanuelo commented 1 month ago

The same. Doesn't show in non-webkit mobile browsers.