Paypal zapewnia easy way to integrate its express checkout solution, ale jakie jest najlepsze rozwiązanie, aby użyć tego rozwiązania w projekcie angular2 pracującym na maszynopisie?Jak zintegrować ekspresowe zamówienie PayPal z projektem skryptu kątowego 2?
Odpowiedz
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.
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 :)
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
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? –
Wszystko JavaScript jest maszynopis więc nie zacząć. Integracja Angular 2 prawdopodobnie skorzysta na stworzeniu wstrzykiwalnej usługi do owijania globalnej. –