Javascript 贝宝结账按钮-环境配置-角度6

我在我的应用程序中实现了paypal express签出，现在我需要构建用于生产的应用程序才能上线。我使用了ngx payapl，它看起来像这样：

private initConfig(): void {

        this.payPalConfig = new PayPalConfig(PayPalIntegrationType.ClientSideREST,

        // Here I need to see how to change the environment to 
        // PayPalEnvironment.Production

                            PayPalEnvironment.Sandbox, {
            commit: true,
            client: {
                // how to will it trigger production for ng-build --prod?
                sandbox: '...sandboxclientid...',
                production: '...liveclientid...',
            },
            button: {
                label: 'paypal',
            },
            transactions: [{
                amount: {
                    currency: 'USD',
                    total: 30
                },
                description: ''
            }],
            onPaymentComplete: (data, actions) => {
                // some api calls
            },
            onCancel: (data, actions) => {
                console.log('Payment canceled');
            },
            onError: (err) => {
                console.log(err);
            },
            onClick: () => {
                // some code
            }
        });
    }

---

我想我是从仪表板上获取实时客户端ID的，这没关系，我应该将这些ID保存在环境文件中，但是我如何在这里更改环境本身呢？我想我需要付费的环境。生产和寻找客户。生产

您有两个选项：第一个选项如您所述，将同一配置键的两个不同值放在环境文件下。然后，您只需要从配置中读取密钥，就可以获得不同的dev mode和prod值。 第二个选项是，如果处于开发模式，还可以签入每个组件，并基于env初始化payapl

编辑： 对于第一种方法：根据库代码，这是PayPalenEnvironment的定义这是一个实际的枚举：

export enum PayPalEnvironment {
    Sandbox = 'sandbox',
    Production = 'production'
}

因此，为了使用环境文件，您应该定义两个环境文件，一个用于dev，另一个用于prod，您可以看到定义config的完整方法 添加两个配置文件后，只需为paypalEnv添加一个键，对于开发，将其值设置为“sandbox”，对于prod，其值应为“production” 例如：

// file: environment/environment.dev.ts

export const environment = {
   production: false,
   paypalEnv: 'sandbox',
};

然后，要使用配置文件，请在PyaPal组件下执行以下操作：

// Change for correct path
import { environment } from '../../environments/environment';

private initConfig(): void {

    this.payPalConfig = new PayPalConfig(PayPalIntegrationType.ClientSideREST,
        environment.paypalEnv, {
            commit: true,
            client: {
                // how to will it trigger production for ng-build --prod?
                sandbox: '...sandboxclientid...',
                production: '...liveclientid...',
            },
        ...
    });
}

对于第二种方法，您可以使用以下方法：

import { isDevMode } from '@angular/core';

...
private initConfig(): void { 
    // The console.log here is just for demo but you can use the value to decide
    console.log(isDevMode());
}

---

你可以像下面这样做

只需根据您的环境配置切换PayPalenEnvironment

---

这应该行得通。要更改环境，只需将“env”属性从沙箱更改为生产环境

someFile.ts

import { Component, OnInit, AfterViewChecked } from "@angular/core";
import { CartService } from "../cart.service";

declare let paypal: any;

@Component({
  selector: "app-shopping-cart",
  templateUrl: "./shopping-cart.component.html",
  styleUrls: ["./shopping-cart.component.css"]
})
export class ShoppingCartComponent implements OnInit, AfterViewChecked {
  cartItemsArray = this.cart.cartItems;
  constructor(private cart: CartService) {
    this.cart.count.subscribe(price => {
      this.finalAmount = price;
    });
  }

  ngOnInit() {}

  //Paypal
  addScript: boolean = false;
  finalAmount: number;
  paypalConfig = {
    env: "sandbox",
    client: {
      sandbox:
        "sandbox-key",
      production: "production-key"
    },
    commit: true,
    payment: (data, actions) => {
      return actions.payment.create({
        payment: {
          transactions: [
            { amount: { total: this.finalAmount, currency: "USD" } }
          ]
        }
      });
    },
    onAuthorize: (data, actions) => {
      return actions.payment.execute().then(payment => {});
    }
  };
  //End of Paypal


  ngAfterViewChecked(): void {
    if (!this.addScript) {
      this.addPaypalScript().then(() => {
        paypal.Button.render(this.paypalConfig, "#paypal-checkout-button");
      });
    }
  }

  addPaypalScript() {
    this.addScript = true;
    return new Promise((resolve, reject) => {
      let scripttagElement = document.createElement("script");
      scripttagElement.src = "https://www.paypalobjects.com/api/checkout.js";
      scripttagElement.onload = resolve;
      document.body.appendChild(scripttagElement);
    });
  }
}

someFile.component.html

<div id="paypal-checkoutout-button"></div>

---

那部分环境怎么样？沙箱？除了在两个if块中重复相同的代码外，还有更好的处理方法吗？嗯，我不知道你的意思是什么，我如何更改该部分，以获得PayPalenEnvironment.Production，当构建用于生产时？我明白你说的话，只是我不知道该写什么，该写什么

<div id="paypal-checkoutout-button"></div>