通过Paypal API（沙盒）结帐的问题

Question

我已经实现了Paypal API提供的一组按钮。首先-基本的“ Paypal按钮”-似乎无法正常工作。它会打开一个新窗口，但是加载需要花费很多时间，但最后仍然会向我显示大多数时间“出了点问题” 信息以及按钮“重试” -但重试一无所获（或者有时是：“此刻似乎无法正常工作。请稍后重试”。）。连同控制台中的所有内容一起，它显示有关“内容安全策略和脚本内联（„ script-src）“ 的错误-但是当我尝试通过借方实际访问付款时，这两个内容都显示了或Paypal窗口中的信用卡。在大多数情况下，当我第一次尝试访问它时，它只是加载了很长时间，在控制台中显示了一些超时信息，并给我“出了点问题” 。

第二个奇怪的事情是带借记卡/信用卡的付款方式。我尝试在Paypal开发人员帐户中创建两个单独的应用程序-为API获得了两个不同的客户端ID-并且第一次付款没有问题，但是接下来的每个通常都返回“无法捕获订单” 控制台中的打字稿错误。有时，最终会出现一些信息，说明他们在没有任何细节的情况下无法进行付款。

我不确定自己在做什么错-这只是API的基本用法。

index.html文件中的这一行：

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

以下是paypal.ts文件，其中包含paypal API的用法：

 import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

declare var paypal;

@Component({
  selector: 'app-payment',
  templateUrl: './payment.component.html',
  styleUrls: ['./payment.component.css']
})
export class PaymentComponent implements OnInit {
  @ViewChild('paypal', { static: true }) paypalElement: ElementRef;

  product = {
    price: 7.7,
    description: 'ticket payment'
  };

  paidFor = false;

  constructor() { }

  ngOnInit() {
    paypal
          .Buttons({
            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);
            },
            onError: err => {
              console.log(err); <- here appears the "Order could not be captured"
            }
          })
          .render(this.paypalElement.nativeElement);
  }