Angular 5 – Paypal express checkout

Hi Friends,

Hope you are all well. In this post let’s see how to bring in paypal express checkout feature into your angular 5 apps.

Let’s begin.

A screencast of this post

Code for this post is available – here.

There are 2 ways of bringing paypal into your web app. They are

  • Client side express checkout using REST – Click here.
  • Server side express checkout using REST – Click here.

I would highly recommend you to read these two links first before you proceed further.

In this post we’ll see about client side express checkout using REST.

Signup for a paypal developer account using this link –

Now create an app (in sandbox mode). You’ll be given a key.

Next scaffold out an angular app using the below command.

Once that is done open up app.component.html and add the below code.

Now open app.component.ts file and add the below code.

That’s it. Now what have we done here ?

paypal.Button.render(this.paypalConfig, ‘#paypal-checkout-btn’);

This is the line of code that actually brings in the button for express checkout here. So how will this code run. Let’s see.

Run this code using the below command.

Click on the paypal button (Yellow button). You’ll see a screen like the one shown below.


You could either use your account now or just click on check out as a guest to pay using your card.


As easy as that. You could use express checkout in your next e-commerce site or any other site where billing is required. (Note that you would have to use your production key when your app goes live).

Hope this post helped you guys. If you found this helpful, kindly share it with someone and help them too.

Thanks for reading. Peace.. :)


Liked it? Take a second to support admin on Patreon!
  • michabbb

    How do you prevent changes of the price (or other values) by the user hacking the frontend?

    • Have a collection in firestore that stores all your product prices, discounts, coupons etc., Allow only read access to that collection. Then whenever a user tries to buy a product just check the price with the price in the collection and then proceed further with the transaction or just display a message saying you tried something cool, so the price of the product has been doubled for you and simply increase the price..

      • michabbb

        I don’t understand your advise, sorry .
        “paypalConfig” is part of the frontend and used to render the paypal button. If the button is rendered, how do you want to check anything and where exactly? The rendering script does not know if “paypalConfig” has been changed.

        • paypal.Button.render() -> this is the line that renders the paypal button onto the webpage, which upon clicking opens up the paypal gateway popup. Do a check before this line. See if this.finalAmount matches with the amount you have stored in the prices collection in firestore. If it matches simply render the button.

          • michabbb

            hm… okay, thanks. i guess i prefer the mix of client and server, as in most client apps, you usually have a backend anyway.

          • anilvarma

            you developed this task in visual code right … about visual studio ..
            i write this code visual studio but here i getting errors like this

            “name”: “VALIDATION_ERROR”,
            “details”: [
            “field”: “transactions.amount”,
            “issue”: “Currency amount must be non-negative number, may optionally contain exactly 2 decimal places separated by ‘.’, optional thousands separator ‘,’, limited to 7 digits before the decimal point and currency which is a valid ISO Currency Code”
            “message”: “Invalid request – see details”,

          • anilvarma

            errors like this
            ncaught Error: Error: Request to post failed with 400 error. Correlation id: 11fae4b73489f, 11fae4b73489f

    • That was a good question btw., Thanks.

  • Junior Kamla

    Hi! good post but I am stuck on calling a function from the component after the transaction is completed(in the button onAuthorize method), any advice?

  • theCompleteMan

    It worked like a charm. How do you set a recurring payment?

  • Lucas Suarez B.
    • Gustavo Estrada Aedo

      I have the same problem. Have you found a solution?

      • Boyan Manahilov

        You are including the script twice. Check if you have already included the “” in the index.html for example.

      • Lucas Suarez B.

        I think the problem has to do that the component where the PayPal library is imported is initialized every time that that component is entered, the error disappears when deploy ng build –prod

    • Philippe Steve

      You surely manually added to your index.html .Remove it and it will be OK

  • Chethan Hegde

    Hi ! How can i disable the billing address and shipping address of paypal page??
    Please do needful.

  • Priyatham Krishna

    This is the error getting…We aren’t able to process your payment using your PayPal account at this time. Please go back to the merchant and try using a different payment method.

  • Vilas Chavan

    I am not getting the paypal transaction id here. Could you please let me know how do I get that.

    • Sujit Pasalkar

      hey i have same question.Have you found any

  • Thinktrek Software

    Hi.It is very good article.i have tried all the steps.But for me amount is not showing on the paypal popup screen.could you please help me.

  • Shweta Gharshi

    Hey i am able to get paypal login page. But after entering my email and password it prompts “Some of your information isn’t correct. Please try again.” Any suggestion??

  • JB

    Downloaded your github repo and ran it. I was having a problem with the iframe not loading within the page but as a separate window. Wanted to know if your code has that issue and it does. The paypal demo doesn’t have that problem so I was wondering if you know any solution to fix the iframe problem. The window works fine as it responds back to the angular app. But the users are having problems finding the window if they click outside etc.

  • Prashanth Hiremath

    I used your code when i use test credit/debit cards i am getting error that “this card is not valid please use another card” I used many test cards but i am getting the same error what will be the issue.

  • Prashanth Hiremath

    How to send a Invoice to the customer Email after payment successful if you have any github source please suggest me . I am using angular 7 .

    thank you

  • Prashanth Hiremath

    I used many test cards to check the payment process but i am getting the error that “this card is not valid please use the another card” what will be the issue can you please help me out.

  • Prashanth Hiremath

    After every payment successful i need to send the invoice to the customer mail is it possible from client side (aangular 7). If you have any github source please share with me.

    thank you

  • Philippe Steve

    When initiating the button I get the error Error: No handler found for post message: zoid_init from in http://localhost:4200/home. NEED HELP PLEASE

  • Rupesh
  • karuna

    how can i integrate this code for production url instead of sanboxaccount

  • RK

    It is a good post about paypal integration and thanks for sharing and your efforts.
    my question might not be regarding the code. I have integrated your code in my app and i am using paypal Germany. When i click button, it pops up the payment screen but instead of checkout as a guest it shows signup. Can anyone please explain what is happening and guide me in right direction.