Search code examples
paypalvenmo

Venmo not displaying with PayPal JS SDK Smart Buttons


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


Solution

  • &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)