如何将 PayPal 快速结账集成到 angular2 typescript 项目中

Question

Paypal 提供了easy way to integrate its express checkout solution，但在使用 typescript 编写的 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

您可以像这样使用 Angular 4 实现贝宝结帐：

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 的答案，我可以进行快速结帐。它虽然给出了一些违规警告。用户选择货币后，我已经在我的函数中呈现。我已经从角度模板传递了“这个”。我用过 Angular 6 和 Angular 材料 2

<div class="container">
  <div *ngFor="let currency of currencies">
  </div>

  <div class="row">
    <form >
      <mat-form-field appearance="standard" class="col-sm-12 col-md-6">
        <mat-label>Cost</mat-label>
        <input matInput placeholder="Amount" [(ngModel)]="cost" required disabled="true" name="amount" id="amount">
      </mat-form-field>

      <mat-form-field appearance="standard" class="col-sm-12 col-md-6">
        <mat-select placeholder="Select Currency" [(ngModel)]="selectedCurrency" name="curr" id="curr" (selectionChange)="CurrencyChange(cost,selectedCurrency,this)" >
          <mat-option *ngFor="let c of currencies" [value]="c.value" >
            {{c.viewValue}}
          </mat-option>
        </mat-select>

      </mat-form-field>
    </form>

  </div>
  <div id="paypal-button" class="align-content-between align-content-center"></div>
</div>

在 CurrencyChange 函数中，我已经传递了这个，在 paypal 函数中，我再次调用了我的 angular 函数来完成付款。我不知道这是否是一个好习惯。但这行得通。

    export class PaymentComponent implements OnInit {

  cost = '1';
  currency = 'INR';
  selectedCurrency = "0";
  currencies: Currency[] = [
    {
      value: "0",
      viewValue: "Select Currency"
    },
    {
      "value": "INR",
      "viewValue": "Indian Ruppe"
    }, {
      "value": "USD",
      "viewValue": "US Dollar"
    },
    {
      "value": "EUR",
      "viewValue": "EURO"
    }]

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

  ngOnInit() {
    this.loadExternalScript("https://www.paypalobjects.com/api/checkout.js");
  }


  constructor() { }

  paymentSuccess(payment) {
    //alert('Payment Success');
  }
  CurrencyChange(cost, selectedCurreny,self): void {

    document.getElementById("paypal-button").innerHTML = "";
    if (selectedCurreny == 0) {
      alert('Please select the Country');
      return;
    }
    //reset earlier inserted paypal button
    paypal.Button.render({
      env: 'sandbox',
      client: {
        production: 'AQ9IbOayBJxHmad9DMGoysS4UhzE-usUqfSQ-CLzSn3M96qvZny5vZZ2VkNzn6EBTnE2UU4L8PDkqJJE',
        sandbox: 'AQ9IbOayBJxHmad9DMGoysS4UhzE-usUqfSQ-CLzSn3M96qvZny5vZZ2VkNzn6EBTnE2UU4L8PDkqJJE'
      },
      commit: true,
      payment: function (data, actions) {
        return actions.payment.create({
          payment: {
            transactions: [
              {
                amount: { total: cost, currency: selectedCurreny }
              }
            ]
          }
        })
      },
      onAuthorize: function (data, actions) {
        return actions.payment.execute().then(function (payment) {

          alert('Payment Successful')
          self.paymentSuccess(payment);
            console.log(payment)
        })
      }
    }, '#paypal-button');
  }
}

Answer 4

我最近回答了类似的问题 (how to write the below code in angular 2 component using typescript)，并编写了封装 paypal 按钮的简单组件。

我已经扩展了我的示例，使其具有输入成本属性，因此您可以将成本传递给按钮的组件。如果需要，您可以轻松扩展它并传递更多数据。

正如 Aluan Haddad 在评论中所说，您可以将 PayPal 全局包装在服务中。我编写了一个简单的服务，用一些类型定义包装了 Button 属性：

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

工作示例位于：https://plnkr.co/edit/9AlbWnZDzek9kDdigdED

我不确定 PayPal 按钮的内部工作原理，但这应该可以让您抢先一步，希望对您有所帮助。