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

By using Remotec's answer I'm able to render the express checkout. It gives some violation warnings though. I've rendered in my function after user selects currency. I've passed 'this' from angular template. I've used Angular 6 and Angular material 2

  

  

  

    

      
        Cost
        
      

      
        
          
            {{c.viewValue}}
          
        

      
    

  
  

In function CurrencyChange I've this is passed and in paypal function I've again called my angular function to complete the payment. I don't know if this is a good practice. But this worked.

    export class PaymentComponent implements OnInit {

  cost = '1';
  currency = 'INR';
  selectedCurrency = "0";
  currencies: Currency[] = [
    {
      value: "0",
      viewValue: "Select Currency"
    },
    {
      "value": "INR",
      "viewValue": "Indian Ruppe"
    }, {
      "value": "USD",
      "viewValue": "US Dollar"
    },
    {
      "value": "EUR",
      "viewValue": "EURO"
    }]

  private loadExternalScript(scriptUrl: string) {
    return new Promise((resolve, reject) => {
      const scriptElement = document.createElement('script')
      scriptElement.src = scriptUrl
      scriptElement.onload = resolve
      document.body.appendChild(scriptElement)
    })
  }

  ngOnInit() {
    this.loadExternalScript("https://www.paypalobjects.com/api/checkout.js");
  }


  constructor() { }

  paymentSuccess(payment) {
    //alert('Payment Success');
  }
  CurrencyChange(cost, selectedCurreny,self): void {

    document.getElementById("paypal-button").innerHTML = "";
    if (selectedCurreny == 0) {
      alert('Please select the Country');
      return;
    }
    //reset earlier inserted paypal button
    paypal.Button.render({
      env: 'sandbox',
      client: {
        production: 'AQ9IbOayBJxHmad9DMGoysS4UhzE-usUqfSQ-CLzSn3M96qvZny5vZZ2VkNzn6EBTnE2UU4L8PDkqJJE',
        sandbox: 'AQ9IbOayBJxHmad9DMGoysS4UhzE-usUqfSQ-CLzSn3M96qvZny5vZZ2VkNzn6EBTnE2UU4L8PDkqJJE'
      },
      commit: true,
      payment: function (data, actions) {
        return actions.payment.create({
          payment: {
            transactions: [
              {
                amount: { total: cost, currency: selectedCurreny }
              }
            ]
          }
        })
      },
      onAuthorize: function (data, actions) {
        return actions.payment.execute().then(function (payment) {

          alert('Payment Successful')
          self.paymentSuccess(payment);
            console.log(payment)
        })
      }
    }, '#paypal-button');
  }
}