Настройте Client-Id с Paypal

Question

Я использую интеллектуальные кнопки оплаты PayPal в моем Angular проекте. Я знаю, что в моем файле index. html у меня есть следующий скрипт:

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

Я пытаюсь внедрить систему, подобную Cart, и поэтому будет несколько Client-Id в зависимости от того, какой бизнес использует это. Таким образом, я понял, что мне нужно динамически установить MY_CLIENT_ID для Client-Id бизнес-аккаунта, который использует сайт. Но все, что я могу найти, это жестко кодировать идентификатор клиента в скрипте PayPal в index.html. Мне нужно каким-то образом, чтобы при создании заказа установить идентификатор клиента в моем Angular компоненте. Что-то вроде следующего:

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

Я не верю, что идентификатор продавца - это то, что я ищу, потому что я знаю идентификатор клиента бизнеса, я просто не могу его жестко закодировать, но я Я не уверен. Спасибо за любую помощь.

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 вашего компонента.

Кроме того, обязательно удалите все жестко закодированные теги сценариев PayPal из index.html, поскольку теперь они будут добавлены программным способом.

Answer 2

Я бы выполнил интеграцию на стороне сервера на основе API с v2 / orders.

Для внешнего интерфейса вы должны использовать следующее (обратите внимание, что в коде внешнего интерфейса отсутствует идентификатор клиента) : https://developer.paypal.com/demo/checkout/# / pattern / server

Это самое надежное решение, которое используется всеми основными платформами корзин для покупок.

Чтобы быть абсолютно откровенным, HTML / JS Интеграции на основе только со встроенным идентификатором клиента предназначены для быстрой интеграции разработчиками, у которых нет времени / знаний для создания правильной серверной части API v2 / orders.