Кнопка Paypal Checkout - настройка среды - Angular 6

Question

Я внедрил экспресс-проверку PayPal в своем приложении, и теперь мне нужно создать приложение для производства, чтобы оно появилось.Я использовал 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
            }
        });
    }

Полагаю, я получаю идентификатор живого клиента с панели инструментов, это нормально, и я должен сохранить эти идентификаторы в файлах среды, но как это сделать?Я изменяю саму среду здесь?Я думаю, мне понадобится PayPalEnvironment.Production и искать client.production?

Answer 1

Вы можете сделать, как показано ниже ...

Просто переключите PayPalEnvironment в зависимости от конфигурации environment.

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 2

Это должно работать.Чтобы изменить среду, просто измените свойство 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>

Answer 3

У вас есть 2 варианта: первый, как вы описали, поместите два разных значения для одного и того же ключа конфигурации в файлы среды.тогда вам просто нужно прочитать ключ из конфигурации, и вы получите другое значение для режима dev и prod.Второй вариант, вы также можете проверить в каждом компоненте, если вы находитесь в режиме разработки и инициализировать payapl на основе env.

РЕДАКТИРОВАТЬ: Для первого метода: из кода библиотеки этоВот как определяется PayPalEnvironment. Это фактическое перечисление:

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

Итак, чтобы использовать файлы окружения, вы должны определить два файла окружения, один для dev и один для prod, вы можете увидеть полный способ определенияconfig здесь После добавления двух файлов конфигурации, просто добавьте один ключ для paypalEnv, для разработки поместите его значение в «песочницу», а для 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());
}