PayPal Express Checkout with React/Next.js

Faruk Çakı

3 min readJan 31, 2019

I’m gonna keep it short and simple.

What we are going to do?

We will create a PayPal Express Checkout button for our Next.js website

What do you need:

PayPal API keys (get from here: https://developer.paypal.com/developer/applications/)

Our PaypalButton component will look like this in the end. If you already read and understand it you may not need to continue further, I’ll show everything step by step.

1. Include PayPal Checkout script to your app

<script src="https://www.paypalobjects.com/api/checkout.js" />

Add this script on your app, I added mine in _documents.js (If you are coding in plain React you can add that on your index.html as a usual script tag)

2. Create PaypalButton Component

This component will be used for PayPal’s Buy Now button. We will use this component when we want to display a checkout button, PayPal itself will handle all others.

Create your component named PaypalButton.js or whatever you wish

The code above is our skeleton component. It is basically displaying “Loading…” until componentDidMounth() is called and setting isEnabled state to true.

Since Next.js is SSR and paypal-express-checkout is a client-side library we can’t use it directly in the render. We should wait for the page is being loaded, using componentDidMount() of course.

Check out this basic code from official PayPal docs before proceed to next step: https://developer.paypal.com/demo/checkout/#/pattern/client

Now we are ready to create our button, we already included PayPal script in our app. And I assume you checked the code snippet on the link above.

Now you can use paypal.Button.render (check the link above if you didn’t yet) method inside componentDidMount(). The final component code will be the code at the very beginning of this post. Simply use the example code on the PayPal docs as I did.

Conclusion

Now you have your payment button component, include it in any page and use it. PayPal checkout button will be automatically generated and displayed on your div, and when you click it you will see this as expected:

Don’t forget that we set the payment amount and currency inside our component as $1.00, for more flexibility, use props to receive these kinds of data from the renderer component. I left that part for you.

Thanks for reading!

Don’t forget to follow me for upcoming blog posts.