Integrar PayPal en Angular

24/11/20200 comentarios

Hola a todos, hoy os voy a explicar como podemos integrar PayPal en Angular.

Antes de meternos con nuestro proyecto de Angular, necesitamos crearnos una cuenta developer de paypal, el enlace es este. Si tienes una cuenta de paypal, puedes usarla para crear tu cuenta de desarrollador.

Volveremos a la cuenta de desarrollador de paypal mas adelante, ahora en nuestro proyecto de angular, necesitamos instalar el paquete ngx-paypal.

En app.module, vamos a añadir el módulo NgxPayPalModule:


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { PaypalComponent } from './paypal/paypal.component';
import { NgxPayPalModule } from 'ngx-paypal';

@NgModule({
  imports:      [ 
    BrowserModule, 
    FormsModule,
    NgxPayPalModule 
  ],
  declarations: [ AppComponent, PaypalComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

En el html del componente que hemos creado, haremos lo siguiente:


<button *ngIf="!showPaypalButtons" (click)="pay()">Pagar con paypal</button>


<ngx-paypal *ngIf="showPaypalButtons" [config]="payPalConfig">
</ngx-paypal>
<button *ngIf="showPaypalButtons" (click)="back()">Volver atras</button>

En el ts, pondremos lo siguiente:


import { Component, OnInit } from "@angular/core";
import { ICreateOrderRequest } from "ngx-paypal";

@Component({
  selector: "app-paypal",
  templateUrl: "./paypal.component.html",
  styleUrls: ["./paypal.component.css"]
})
export class PaypalComponent implements OnInit {
  public payPalConfig: any;
  public showPaypalButtons: boolean;

  constructor() {}

  ngOnInit() {
    this.payPalConfig = {
      currency: "EUR",
      clientId: "AYvU7p49APJ3TWCP7EPq6Z1Sm7LijDirPdDI-G6DjNasJ2tyIVCwb0IZL1v5cKy_tw7qPr_2ybS62gCR",
      createOrder: data =>
        <ICreateOrderRequest>{
          intent: "CAPTURE",
          purchase_units: [
            {
              amount: {
                currency_code: "EUR",
                value: "9.99",
                breakdown: {
                  item_total: {
                    currency_code: "EUR",
                    value: "9.99"
                  }
                }
              },
              items: [
                {
                  name: "Enterprise Subscription",
                  quantity: "1",
                  category: "DIGITAL_GOODS",
                  unit_amount: {
                    currency_code: "EUR",
                    value: "9.99"
                  }
                }
              ]
            }
          ]
        },
      advanced: {
        commit: "true"
      },
      style: {
        label: "paypal",
        layout: "vertical"
      },
      onApprove: (data, actions) => {
        console.log(
          "onApprove - transaction was approved, but not authorized",
          data,
          actions
        );
        actions.order.get().then(details => {
          console.log(
            "onApprove - you can get full order details inside onApprove: ",
            details
          );
        });
      },
      onClientAuthorization: data => {
        console.log(
          "onClientAuthorization - you should probably inform your server about completed transaction at this point",
          data
        );
      },
      onCancel: (data, actions) => {
        console.log("OnCancel", data, actions);
      },
      onError: err => {
        console.log("OnError", err);
      },
      onClick: (data, actions) => {
        console.log("onClick", data, actions);
      }
    };
  }

  pay() {
    this.showPaypalButtons = true;
  }

  back(){
    this.showPaypalButtons = false;
  }
}

El objeto payPalConfig es un objeto muy importante donde mantenemos la configuración de paypal, de eventos al ejecutarse alguna acción.

Es importante poner el id del cliente de paypal (clientId), este lo puedes encontrar al crear una app en paypal.