Question

Paypal提供easy way to integrate its express checkout solution，但在使用打字稿编写的angular2项目中使用此解决方案的最佳解决方案是什么？

Answer 1

我使用过这样的解决方案：

加载外部脚本的方法

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

组件代码

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

<强>信用卡

Andrei Odri在这里回答：script tag in angular2 template / hook when template dom is loaded

Answer 2

您可以使用角度4实现paypal结帐：

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({
             [...]
            })
    [...]

享受：）

Answer 3

通过使用Remotec的答案，我可以进行快速结帐。但是，它给出了一些违规警告。用户选择币种后，我已在函数中进行渲染。我已经从角度模板传递了“ this”。我用过Angular 6和Angular材质2

VMLDrawing

在CurrencyChange函数中，我已经通过了此操作，在Paypal函数中，我再次调用了angular函数来完成付款。我不知道这是否是个好习惯。但这行得通。

<div class="container section-content">
    <div class="row" style="border-radius: 4px; border: solid 1px #979797;">
        <div class="col-md-3 align-self-center" style="background-color: #4a90e2">
            Align
        </div>
    </div>
</div>

如何将PayPal express checkout集成到angular2 typescript项目中

3 个答案: