angular - 如何将 PayPal 快速结帐集成到 angular2 typescript 项目中

标签 angular typescript paypal

Paypal 提供了一个 easy way to integrate its express checkout solution但是在用 typescript 编写的 angular2 项目中使用此解决方案的最佳解决方案是什么?

最佳答案

我用过这样的解决方案:

加载外部脚本的方法

  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

关于angular - 如何将 PayPal 快速结帐集成到 angular2 typescript 项目中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43806348/

相关文章:

angular - 绑定(bind)表达式不能在表达式 ANGULAR 7 的末尾包含链式表达式

javascript - typescript 错误 - 找不到名称 'require'

Angular 10 错误 "Cannot find module ' @angular/core' 或其相应的类型声明”

typescript - 为什么函数在 vue 3 设置 block 中立即执行

php - 在 PHP 中构建包含多个项目和 PayPal 按钮的购物车

angular - 允许用户在 Angular 6 中仅输入 mat-autocomplete 中的选项

reactjs - 用 typescript react forwardRef

reactjs - React-Table:在组件 ref 上调用 'getResolvedState()' 抛出异常

PHP 通过参数传递数组

ruby-on-rails - RoR 提交对象以供批准,仅在批准后处理付款