时间戳

首页 > 解决方案 > Paypal Checkout 按钮 - 环境配置 - Angular 6

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

问题描述

我在我的应用程序中实现了贝宝快速结帐，现在我需要构建应用程序以进行生产，以上线。我使用了 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.Productionand 来寻找client.production?

标签： javascriptangularpaypal

解决方案

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

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

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

所以为了使用环境文件，你应该定义两个环境文件，一个用于dev，一个用于prod，你可以在此处查看定义配置的完整方法 添加两个配置文件后，只需为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());
}

推荐阅读