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 – https://developer.paypal.com/

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.

first

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

second

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 …..how 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 https://www.sandbox.paypal.com/v1/payments/payment 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?

  • 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.

  • 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.