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>