Problem with standalone smart buttons

xPlux
Member
Member

Hello,

I have a problem with smart buttons when I render them standalone. Buttons displays properly. When I click them my backend generates order and returns order id then PayPal window shows for a while and then dissapers. This same code works when I change standalone flag to false.

 

What I'm doing wrong? There is something I should change to render buttons separately?

 

I also tried to render buttons in separate containers but this nothing change.

Link to the the documentation I used.

My code below.

 

<script src="https://www.paypal.com/sdk/js?client-id=XXX&components=buttons,funding-eligibility&locale=en_PL&currency=PLN"></script>

<script>
    function getButton(fundingSource) {

        return paypal.Buttons({
            fundingSource: fundingSource,
            createOrder: function(data, actions) {
                return fetch('/api/user/paypal/create', {
                    method: 'post',
                }).then((res) => {
                    return res.json();
                }).then((transaction) => {
                    return transaction.external_uuid;
                });
            },
            onApprove: function(data, actions) {
                return fetch('/api/user/paypal/capture', {
                    method: 'post',
                }).then((res) => {
                    return res.json();
                }).then((orderData) => {
                    const element = document.getElementById('paypal-button-container');
                    let errorDetail = Array.isArray(orderData.details) && orderData.details[0];

                    if (errorDetail && errorDetail.issue === 'INSTRUMENT_DECLINED') {
                        return actions.restart();
                    }

                    if (errorDetail) {
                        let msg = 'Sorry, your transaction could not be processed.';
                        if (errorDetail.description) msg += '\n\n' + errorDetail.description;
                        if (orderData.debug_id) msg += ' (' + orderData.debug_id + ')';
                        element.innerHTML = '<h3>'+msg+'</h3>';
                        return;
                    }

                    element.innerHTML = '<h3>Thank you for your payment!</h3>';
                });
            },
            onError: function (err) {
                console.log('onError');
                console.log(err);
            },
            onCancel: function (data) {
                console.log('onCancel');
                console.log(data);
            },
        });
    }

    let standalone = true;

    if (standalone)
    {
        paypal.getFundingSources().forEach((fundingSource) => {
            let button = getButton(fundingSource);
            if (button.isEligible())
                button.render('#paypal-button-container')
        })
    }
    else
    {
        let button = getButton(null);
        button.render('#paypal-button-container')
    }
</script>

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

 

 

Login to Me Too
0 REPLIES 0

Haven't Found your Answer?

It happens. Hit the "Login to Ask the community" button to create a question for the PayPal community.