How to integrate PayPal express order into angular2 typescript project

Question

Paypal provides an easy way to integrate your express solution, but what is the best solution to use this solution in an angular2 project that is written in typescript?

Answer 1

I used this solution:

The way to load external scripts

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

Component Code

  ngAfterViewInit(): void { this.loadExternalScript("https://www.paypalobjects.com/api/checkout.js").then(() => { paypal.Button.render({ env: 'sandbox', client: { production: '', sandbox: '' }, commit: true, payment: function (data, actions) { return actions.payment.create({ payment: { transactions: [ { amount: { total: '1.00', currency: 'USD' } } ] } }) }, onAuthorize: function(data, actions) { return actions.payment.execute().then(function(payment) { // TODO }) } }, '#paypal-button'); }); } 

Credit

Andrew Audrey answers here: script tag in angular2 template when loading dom template

Answer 2

you can do a paypal checkout using angular 4 as follows:

 import { Component, OnInit } from '@angular/core'; declare let paypal: any; @Component({ selector: 'app-page-offers', templateUrl: './page-offers.component.html', styleUrls: ['./page-offers.component.sass'] }) export class PageOffersComponent implements OnInit { constructor() {} ngOnInit() { $.getScript( 'https://www.paypalobjects.com/api/checkout.js', function() { paypal.Button.render({ [...] }) [...] 

Enjoy :)

Answer 3

I recently answered a similar question ( how to write the code below in an angular 2 component using typescript ) and wrote a simple component that encapsulates the paypal button.

I expanded my example to have an input cost property, so you can pass the cost to the button component. You can easily expand this and transfer more data if necessary.

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

 export class PaypalService { constructor() { } // You can bind do paypal 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: https://plnkr.co/edit/9AlbWnZDzek9kDdigdED

I'm not sure about the internal operation of the PayPal button, but this should give you a start, hope this helps.