2017-05-05 57 views

Odpowiedz

0

Ostatnio odpowiedziałem na podobne pytanie (how to write the below code in angular 2 component using typescript) i napisałem prosty komponent zawierający przycisk paypal.

Rozszerzyłem mój przykład o właściwości kosztu wejściowego, aby można było przesłać koszt do składnika przycisku. Możesz w łatwy sposób rozszerzyć to i przekazać więcej danych w razie potrzeby.

Jak powiedział Aluan Haddad w komentarzu, można zawrzeć PayPal w usłudze globalnej. Pisałem prostą obsługę opakowywania właściwość Przycisk z niektórych definicji Typ:

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; 
} 

przykład Praca znajduje się w: https://plnkr.co/edit/9AlbWnZDzek9kDdigdED

nie jestem pewien o wewnętrzne funkcjonowanie przycisku PayPal, ale to powinno dać początek, mam nadzieję, że to pomaga.

3

można zaimplementować paypal kasę z kątowym 4 tak:

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 :)

4

Użyłem takiego rozwiązania:

metoda ładowania zewnętrznych skryptów

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

Kod Komponent

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

Andriej Odri za odpowiedź tutaj: script tag in angular2 template/hook when template dom is loaded

+0

Jak możesz zmienić (ustawić dinamicznie) wartość amount.total? w jaki sposób można wywołać funkcję w kontrolerze po wykonaniu wywołania onAuthorize? –