用Paypal自定义客户ID

Posted 2021-03-19

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

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

我试图实现类似于Cart的系统，所以会有多个Client-Id，取决于哪个企业在使用这个系统。因此，我意识到，我需要动态地设置 MY_CLIENT_ID 到使用该网站的商业账户的客户端ID。但我所能找到的是在paypal脚本中硬编码的client-id。index.html. 我需要一些方法，当我创建订单时，在我的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是我要找的 因为我知道商家的client -id，我只是不能硬编码进去，但我不确定。谢谢你的帮助。

答案

我将创建一个 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 的组件。

另外，请确保从你的组件中删除任何硬编码的PayPal脚本标签。index.html 因为它现在将被程序化地添加。

另一答案

我会在服务器端与v2orders做一个基于API的集成。

对于前端，您可以使用以下代码（注意在前端代码中没有客户端ID）。https:/developer.paypal.comdemocheckout#patternserver。

这是最强大的解决方案，也是所有主要购物车平台所使用的方案。

坦率地说，只基于HTMLJS的内嵌客户端ID的集成是为那些没有时间和知识去建立一个合适的v2orders API后台的开发者提供的快速集成。