Integrar PayPal en Angular

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.

Al abrir la app, pues veras el campo Client ID, ese es el que necesitas.

Al pulsar sobre el botón de PayPal, se os abrirá una ventana de paypal.

La forma de loguearse es con la cuenta de os proporciona paypal, ve a developer paypal y en sandbox accounts, lo puedes ver.

La contraseña lo tenéis en manage accounts.

Cuando os logueeis, veréis esto:

 

Otra cosa que podemos hacer es pagar con una tarjeta ficticia, eso lo podemos hacer con la tercera opción.

En paypal developer, en la sección de Mock -> Credit Card Generator.

Os dejo el ejemplo completo.

Espero que os sea de ayuda. Si tenéis dudas preguntar. Estamos para ayudarte.

Etiquetas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *