Paypal Checkout button - environment configuration - Angular 6

Question

I implemented the paypal express checkout in my app, and now I need to build the app for production, to go live. I used ngx-payapl, and it looks something like this:

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

I guess I get the live client ID from the dashboard, thats ok, and I should keep those ID's in environment files, but how can I change the environment itself here? I guess I would need the PayPalEnvironment.Production and to look for client.production?

galvan · Accepted Answer · 2019-02-12T14:23:38.167

You have 2 options: the first is as you describe, put two different values for the same configuration key under environment files. then you just need to read the key from the configuration and you'll get a different value for dev mode and prod. The second option, you can also check in each component if you are in dev mode and to initialize payapl based on the env.

EDIT: For the first method: from the library code this is how PayPalEnvironment is defined this is actual an enum:

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

So in order to use the environment files you should define two environment files one for dev and one for prod, you can see the full way to define config here After adding two config files, just add one key for paypalEnv, for development put its value to 'sandbox' and for prod the value should be 'production' for example:

// file: environment/environment.dev.ts

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

then to use the configuration file, under you PyaPal component to the following:

// 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...',
            },
        ...
    });
}

For the second method you can use the following way:

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

What about that part PayPalEnvironment.Sandbox ? Is there a better way of handling that other than repeating the same code in 2 if blocks? — Nemanja G, Feb 12 '19 at 13:46
Hm, I'm not sure what you mean, how do I change that part, to have PayPalEnvironment.Production when building for production? I understand what you say I just don't get where and what to write exactly — Nemanja G, Feb 12 '19 at 14:12

score 0 · Answer 2 · answered Feb 24 '19 at 14:29

You can do like below ...

Just switch the PayPalEnvironment based on your environment config.

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

score 0 · Answer 3 · answered Apr 12 '19 at 22:01

This should work. To change environments, just change the 'env' property from sandbox to production.

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>

Paypal Checkout button - environment configuration - Angular 6

3 Answers3