Question

我正在Angular项目中实现PayPal的智能付款按钮。我知道在我的index.html文件中，我有以下脚本：

<script
    src="https://www.paypal.com/sdk/js?client-id=MY_CLIENT_ID">
  </script>

我正在尝试实现类似Cart的系统，因此将有多个Client-Id，具体取决于哪个企业正在使用它。因此，我意识到我需要将MY_CLIENT_ID动态地设置为使用该站点的企业帐户的Client-Id。但是我所能找到的就是在index.html的paypal脚本中对client-id进行硬编码。我需要某种方式来创建订单以在Angular组件中设置客户端ID。类似于以下内容：

paypal.Buttons({
      clientId: dataService.business.clientId  // **IMPORTANT** PART I NEED TO DYNAMICALLY SET THE CLIENTID
        // THE REST IS JUST TYPICAL PAYPAL BUTTON STUFF.
      createOrder: (data, actions) => {
        return actions.order.create({
          purchase_units: [
            {
              description: this.product.description,
              amount: {
                currency_code: 'USD',
                value: this.product.price,
              }
            }
          ]
        });
      },

      onApprove: async (data, actions) => {
        const order = await actions.order.capture();
        this.paidFor = true;
        console.log(order);
      }
    })
      .render(this.paypalElement.nativeElement);

我不相信商人ID是我要找的东西，因为我知道企业的客户ID，我只是无法对其进行硬编码，但我不确定。感谢您的帮助。

Answer 1

我会这样创建一个PayPalService并从组件中调用它。

import { DOCUMENT } from '@angular/common';
import { Inject, Injectable } from '@angular/core';
import { fromEvent, Observable } from 'rxjs';
import { first } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class PaypalService {
  constructor(
    @Inject(DOCUMENT)
    private document: Document
  ) {}

  public initiate(clientId: string): Observable<void> {
    const paypalScriptElement: HTMLScriptElement = this.document.createElement('script');

    paypalScriptElement.src = `https://www.paypal.com/sdk/js?client-id=${clientId}`;
    paypalScriptElement.id = 'paypal-script';

    this.document.head.appendChild(paypalScriptElement);

    return fromEvent<void>(paypalScriptElement, 'load').pipe(first());
  }

  public remove(): void {
    const paypalScriptElement = this.document.getElementById('paypal-script');

    this.document.head.removeChild(paypalScriptElement);
  }
}

在您的组件中，按以下方式使用：

this.paypalService.initiate(dataService.business.clientId).subscribe(
  () => paypal.Buttons({
      // THE REST IS JUST TYPICAL PAYPAL BUTTON STUFF.
      createOrder: (data, actions) => {
        return actions.order.create({
          purchase_units: [
            {
              description: this.product.description,
              amount: {
                currency_code: 'USD',
                value: this.product.price,
              }
            }
          ]
        });
      },

      onApprove: async (data, actions) => {
        const order = await actions.order.capture();
        this.paidFor = true;
        console.log(order);
      }
    }).render(this.paypalElement.nativeElement)
);

请确保在组件的this.paypalService.remove()中调用ngOnDestroy。

此外，请确保从index.html删除所有硬编码的PayPal脚本标签，因为现在将以编程方式将其添加。

Answer 2

我将与服务器端，基于API的v2 /订单进行集成。

对于前端，您将使用以下内容（前端中的client-id可以是您自己的）：https://developer.paypal.com/demo/checkout/#/pattern/server

这是最可靠的解决方案，并且是所有主要购物车平台使用的解决方案。

在后端，您有两个选择。您可以使用自己的client-id / secret并使用payee对象指定接收者：https://developer.paypal.com/docs/checkout/integration-features/custom-payee/-但是，由于您显然知道接收者的client-id和密码，因此看来您应该能够只是使用它们。

无论如何，您需要实现与前端代码配对的两条途径是“设置交易”和“捕获交易”，在此处记录：https://developer.paypal.com/docs/checkout/reference/server-integration/

使用贝宝自定义客户端ID

2 个答案: