Venmo not displaying with PayPal JS SDK Smart Buttons

866 Views Asked by At

I'm trying to implement PayPal and Venmo on my scratch Laravel project. The result should be like this:

enter image description here

However when I integrated it, it only shows these buttons:

enter image description here

Is there any way to display that Venmo button?

Here's the code, &enable-funding=venmo is included

     <div class="container">
            <div class="row">
                <div class="col-md-8">

                </div>
                <div class="col-md-4">
                    <div id="smart-button-container" style="margin-top: 5em;">
                        <div >
                            <div id="paypal-button-container"></div>
                        </div>
                    </div>


                </div>
            </div>
        </div>
        
        <script src="https://www.paypal.com/sdk/js?client-id={{env('APP_CLIENT_ID')}}&enable-funding=venmo&currency=USD" data-sdk-integration-source="button-factory"></script>


        <script>
            function initPayPalButton() {
                paypal.Buttons({

                    style: {
                        shape: 'rect',
                        color: 'gold',
                        layout: 'vertical',
                        label: 'paypal',

                    },

                    createOrder: function(data, actions) {
                        return actions.order.create({
                            purchase_units: [
                                {
                                    "amount":
                                        {
                                            "currency_code":"USD",
                                            "value":1
                                        }
                                }]
                        });
                    },

                    onApprove: function(data, actions) {
                        
                        return actions.order.capture().then(function(orderData) {
                            
                            console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));

                            const element = document.getElementById('paypal-button-container');
                            
                            element.innerHTML = '';

                            element.innerHTML = '<h3>Thank you for your payment!</h3>';
                        
                        });

                    },

                    onError: function(err) {
                        console.log(err);
                    }

                    }).render('#paypal-button-container');
                }

                initPayPalButton();

        </script>
    

Reference: https://www.paypal.com/merchantapps/appcenter/acceptpayments/checkout

1

There are 1 best solutions below

2
Preston PHX On BEST ANSWER

&enable-funding=venmo&currency=USD

You already are doing the right things with that on the SDK line.

However, Venmo will only appear to a US IP; for sandbox mode, you can simulate what a US buyer will see with &buyer-country=US

(Don't add buyer-country with a live client ID, as the buttons will not load -- only works for sandbox)