How to integrate PayPal express checkout into angular2 typescript project

Question

Paypal provides an easy way to integrate its express checkout solution but what is the best solution to use this solution in an angular2 project working written in typescript?

Answer 1

I've recently answered similar question (how to write the below code in angular 2 component using typescript) and wrote simple component encapsulating the paypal button.

I've extended my example to have input cost property, so you can pass a cost to the button's component. You can easily extend this and pass more data if needed.

As Aluan Haddad said in the comment, you can wrap the PayPal global in the service. I've written a simple service wrapping the Button property with some type definitions:

export class PaypalService {
    constructor() {  }

    // You can bind do paypal's button with type definitions in the following way:
    public Button: {
        render: ({ payment, onAuthorize }: {
            payment?: (data: any, actions: any) => void,
            onAuthorize?: (data: any, actions: any) => void
        }, divId: string) => void
    } = (window as any).paypal.Button;
}

Working example is in: https://plnkr.co/edit/9AlbWnZDzek9kDdigdED

I'm not sure about inner workings of the PayPal's button but this should give you a head start, hope it helps.