paypal-angular

Paypal Angular is a module to provide easy and fast integration with PayPal Checkout Button. Paypal-Angular wraps Paypal Button flow operations checkout for client integration.

Installing

npm i paypal-angular

or

yarn add paypal-angular

Init

Make paypal-angular available throughout your app

import { NgModule } from "@angular/core";
import { PaypalAngularModule, PaypalAppConfigModel } from "paypal-angular"
 
const paypalConfig: PaypalAppConfigModel = {
  sandbox: '...YOUR-PAYPAL-CLIENT-ID-SANDBOX...',
  production: '...YOUR-PAYPAL-CLIENT-ID-PRODUCTION...'
};
 
@NgModule({
  imports: [ PaypalAngularModule.forRoot(paypalConfig) ]
}) export class AppModule {}

More informatión about checkout process

There are 2 ways of bringing paypal into your web app. Client side express checkout using REST – Click here. Server side express checkout using REST – Click here. I would highly recommend you to read these two links first before you proceed further. check Flow Playpal checkout Signup for a paypal developer account using this link – https://developer.paypal.com/ Now create an app (in sandbox mode). You’ll be given a key.

Use in template

Add tag in your template component (e.g. product.component.html)

<lib-paypal-angular-button
  [locale]="locale"
  [env]="env"
  [commit]="commit"
  [payment]="payment"
  [onAuthorize]="onAuthorize"
  [style]="style"
  [funding]="funding"
></lib-paypal-angular-button>

Use in component

Config your checkout in component (e.g. product.component.ts) Customize the PayPal Checkout Button check here

import { Component, OnInit } from '@angular/core';
import { PaypalAppStyleModel, PaypalAppFundingModel, PaypalAngularService } from 'paypal-angular';
@Component({
  selector: 'app-product',
  templateUrl: './product.component.html'
})
export class ProductComponent implements OnInit {
  payment: Function;
  onAuthorize: Function;
  locale = 'es_ES';
  env = 'sandbox';
  commit = true;
  style: PaypalAppStyleModel;
  funding: PaypalAppFundingModel;
 
  constructor (
    private paypalAngularService: PaypalAngularService
  ) {
    const paypal = this.paypalAngularService.getPaypalRef();
    this.style = {
      color: 'gold',
      layout: 'vertical'
    }
    this.payment = (data, actions) => {
      return actions.payment.create({
        payment: {
          transactions: [
            {
              amount: {
                total: 10,
                currency: 'USD'
              }
            }
          ]
        }
      });
    };
    this.onAuthorize = (data, actions) => {
      return actions.payment.execute().then((payment) => {
        // Do something when payment is successful.
      });
    };
  }
 
  ngOnInit() {}
 
}