Integración de Paypal en Angular

by | Ago 7, 2019 | Angular

Para realizar la implementación de Paypal con Angular usaremos la librería ngx-paypal.

Lo primero que haremos será instalar la librería.

npm install ngx-paypal --save

Una vez instalada la librería tendremos que importar el modulo NgxPayPalModule.

@NgModule({
imports: [
NgxPayPalModule,
...
],
})

Ahora en el el archivo .ts de nuestro componente donde vamos a realizar la configuración de la compra se
pondrá el siguiente código.

-> Se declara una variable del tipo IPayPalCongig.
public payPalConfig: IPayPalConfig;

-> En el constructor llamaremos el método que contiene toda la configuración.
constructor() {
this.initConfig();
}

-> En este método ‘initConfig()’ realizaremos la configuración de PayPal. Los primeros datos que nos piden es el tipo de
moneda, que en este caso es peso mexicano MXN, y el segundo es el clientId, este id corresponde al id de la cuenta a quien
se le harán los depósitos, es decir al dueño. Para conseguir este id tendremos que ir al sitio de Paypal
https://www.paypal.com/mx/webapps/mpp/account-selection donde nos tendremos que registrar una cuenta de negocios.
Una vez que estemos registrados, ingresaremos a https://developer.paypal.com/ donde iniciaremos sesión e ingresaremos al
dashboard, una vez dentro de esta sección no ubicaremos en la sección de My Apps & Credentials, ahí crearemos una nueva App.


Una vez creada la app, la seleccionaremos para ver los detalles, uno de los datos importantes que debemos de tener en cuenta es
que si queremos realizar transacciones reales deberemos de usar la opción Live, y el Client ID que nos aparece es el que usaremos
en la configuración de PayPal en Angular.

-> Una vez que ya tenemos el client ID, lo siguiente sera nada más configurar la compra, en el objeto amount, pondremos
el tipo de moneda y el valor total de la compra. Y en el objeto Items pondremos la descripción de la compra, el total de
artículos, y el precio de cada artículo.

initConfig() {
this.payPalConfig = {
currency: 'MXN',
clientId: 'ASiNzQ1WmiOYpTOdrmyBskYW6_lOid09x-oPEN0ryIqQnx3KRZ4P8Xx3A8QNwUrUQaSv9J4mkjw4NmXM',

createOrderOnClient: (data) => <ICreateOrderRequest>{
intent: 'CAPTURE',
purchase_units: [
{
amount: {
currency_code: 'MXN',
value: '0.02',
breakdown: {
item_total: {
currency_code: 'MXN',
value: '0.02'
}
}
},
items: [
{
name: 'Tokens',
quantity: '2',
category: 'DIGITAL_GOODS',
unit_amount: {
currency_code: 'MXN',
value: '0.01',
},
}
]
}
]
},
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);
},
};
}

Una vez que pusimos este código podemos observar que contiene varias acciones como son onClick, onError, onCancel,
onClientAuthorization, onApprove, cada una de estas acciones se ejecutará de acuerdo a lo que nos responda la appi
de PayPal.

Propiedad Tipo Descripción
Identificación del cliente cuerda Identificación de su cuenta PayPal
onApprove (datos, acciones) => nulo Ejecutado cuando la transacción de PayPal fue aprobada (pero no autorizada)
createOrderOnClient (datos) => ICreateOrderRequest Use para crear orden en el cliente. Es necesario definir esto o ‘createOrderOnServer’
createOrderOnServer (datos) => Promesa <cadena> Use para crear orden en el servidor. Es necesario definir esto o ‘createOrderOnClient’
onClientAuthorization (autorización) => cualquiera Se llama cuando se completa la autorización del cliente. Use esto para notificar a su servidor sobre el pago.
authorizeOnServer (datos, acciones) => cualquiera Si está configurado, debe autorizar el pago en su servidor. La autorización predeterminada del cliente no se utiliza en este caso.
currency cuerda La moneda de PayPal. El valor predeterminado es USD
button IPayPalButtonStyle Configuración de botones
onError (err) => vacío Llamado cuando PayPal experimenta un error
onCancel (datos, acciones) => nulo Llamado cuando se cancela el pago

Por ultimo en el html de nuestro componente mandaremos a llamar al botón de PayPal.

<ngx-paypal [config]="payPalConfig"></ngx-paypal>


			

Entradas relacionadas

Descubre en 5 minutos las áreas de tu empresa que puedes mejorar