Paypal Checkout按钮-环境配置-Angular 6

Question

我在我的应用程序中实现了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保留在环境文件中，但是如何在此处更改环境本身呢？ 我想我需要PayPalEnvironment.Production并寻找client.production吗？

Answer 1

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

编辑：对于第一种方法：从库代码，这是如何定义PayPalEnvironment，这实际上是一个枚举：

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

因此，为了使用环境文件，您应该定义两个环境文件，一个用于开发，一个用于生产，您可以在此处看到定义配置的完整方法。添加两个配置文件后，只需为paypalEnv添加一个键，以便开发将其值到“沙盒”，对于prod，该值应为“生产”，例如：

// 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());
}

Answer 2

你可以像下面这样做...

只需根据您的environment配置切换PayPalEnvironment 。

this.payPalConfig = new PayPalConfig(
      PayPalIntegrationType.ClientSideREST,
      environment.production
        ? PayPalEnvironment.Production
        : PayPalEnvironment.Sandbox,
      {
        commit: true,
        client: {
          sandbox: environment.keys.paypal_sandbox_key,
          production: environment.keys.paypal_production_key
        }
      }
      // Other Configs
    );
  }

Answer 3

这应该工作。 要更改环境，只需将“ 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>