Vue/Laravel PayPal integration without smart buttons

Question

I am really bothered by the fact that PayPal is forcing you to use their design on smart buttons so I wanted to integrate it in another way.

I have a Vue/Laravel app, and on Vue side, this is what it looks like:

<div class="column">
    <button class="button is-link is-fullwidth" @click="purchaseWithPayPal">
        <span class="icon">
            <font-awesome-icon :icon="paypalIcon"/>
        </span>
        <span>{{ $t('modal.paypal') }}</span>
    </button>
</div>


 ...

purchaseWithPayPal() {
    axios.post('api/paypal/make-payment', {
        amount: 5
    })
},

On Laravel side I was following this post to do the integration.

I did everything the same, but the issue is that upon successful creation of everything I am being redirected:

return redirect()->to($redirect_url);

and it is causing issues because of CORS related errors. I suppose this is due to the fact I am making an AJAX request which is then redirecting, but I don't see a way to make this a simple on-click event. How can I integrate it so that I use my design and circumvent the CORS issue?

Preston PHX · Accepted Answer · 2020-06-06 20:30:39Z

1

Not sure if you've looked around https://www.paypal.com/buttons/smart or the manual styling documentation, but there are quite a few design options for almost any site.

I would say the chief benefit is precisely not having to redirect, and instead having that modern 'in-context' experience, with your site kept loaded in the background.

But if you would truly prefer to redirect away from your site, the way I would do it is to return the URL in the ajax call, and then set window.top.location.href with the receiving client-side JS.

The exact problem you are having is that you are redirecting the ajax fetch itself, so it is trying to fetch the PayPal site via XHR. You aren't actually redirecting the client-side window, in your current attempt.

edited Jun 6, 2020 at 20:30

answered Jun 6, 2020 at 7:49

Preston PHX

30.8k5 gold badges27 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Norgul Over a year ago

The issue with manual styling is that predefined options to style exist. I am using Bulma as my CSS framework, and buttons don't look the same if I integrate PayPal button. I would like what you'd call in-context experience, but I don't know how can I do it with a custom design. Notice that besides PP I have Stripe and 3rd provider payment options, and it looks crappy if I have 3 different designs in a single modal

Preston PHX Over a year ago

You can show just the PayPal button and have it be one of at least 10 different shape*color combinations, I'm surprised there isn't something that's a close enough fit. Having it stand out with the traditional PayPal yellow or blue background isn't a bad thing, customers recognize that

Norgul Over a year ago

Color is not the issue, shape is. You can see that styling is not the same as other buttons. More even, having a Bulma button next to PP smart button, you can see that they are different. Similar yes, but same no. This is not UI I want as my OCD is screaming inside :)

Preston PHX Over a year ago

Gotcha, well I always advise people that the distinctive PayPal button is worth having because there is a certain (sizable) chunk of customers that know it and trust it. They may not be familiar with your site/business (yet), but they know PayPal, and so they're that much more likely to feel confident/safe enough in committing to that initial purchase. Basically it's worth it for sales.

Norgul Over a year ago

I ended up as you said, returning the URL, then on successful callback calling window.open(response.data.redirect, '_parent');. Thanks

Collectives™ on Stack Overflow

Vue/Laravel PayPal integration without smart buttons

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related