Arhiva Angular Framework - Tomislav Stanković

Implementacija CorvusPay kartičnog plaćanja koristeći Node.js, Express.js i Angular

U ovom blog postu možete saznati kako implementirati CorvusPay kartično plaćanje koristeći Node.js tj. Express.js i Angular Framework.

Kartično plaćanje provodi se kroz Corvus Form Service što znači da korisnik nakon odabira artikala bude preusmjeren na URL za autorizaciju kreditne kartice. Na tom URL-u ispunjava se obrazac s potrebnim podacima o kreditnoj kartici nakon čega korisnik ponovno bude preusmjeren na web shop gdje se najčešće prikazuje poruka o ne/uspješnoj kupovini.

Tijek transakcije kroz CorvusPay sustav odvija se na sljedeći način:

Kupac u web trgovini odabire proizvod ili uslugu koju želi platiti karticom.

Kupac se preusmjerava sa stranice trgovca na CorvusPay platnu formu (stranicu) gdje unosi podatke potrebne za realizaciju kartične transakcije.

CorvusPay šalje banci zahtjev za autorizacijom.

Banka šalje odgovor na zahtjev za autorizacijom na CorvusPay.

CorvusPay preusmjerava kupca na cancel ili success url kojeg definira trgovac ovisno o ishodu transakcije.

Moguća je i integracija tog obrasca unutar web shopa, ali u tom slučaju trgovac mora imati PCI DSS certifikat.

Tijek implementacije

Proces se istovremeno odvija u dva smjera. Prvi se tiče administrativnih poslova u kojima Corvus od trgovca prikuplja potrebnu dokumentaciju za pokretanje procesa aktivacije kartičnog plaćanje koju prosljeđuje prema bankama/kartičnim kućama.

Paralelno trgovac (web shop) postavlja obavezan sadržaj na web trgovinu (uvjeti korištenja i plaćanja, logo CorvusPaya,…), vrši implementaciju prema dostupnim uputama i testira sustav pomoću razvojnog certifikata. Nakon obavljenih testova postavlja se produkcijski certifikat čime se proces implementacije završava.

Uvod

Komunikacija između trgovca i usluge CorvusPay vrši se putem HTTPS POST web zahtjeva.

Svaki web zahtjev prema Corvusu treba obavezno sadržavati tri parametra, a to su:

– Store ID
– Secret Key
– Client Certificate (.p12).

Dobiju se dva seta ovih podataka. Jedan set za testiranje, a drugi za produkciju.

Obavezni CorvusPay parametri

Obavezni parametri su: version, store_id, order_number, language, currency, amount, cart, signature i require_complete.

U slučaju greške pri kreiranju parametara prikazat će se sljedeći ekran:

CorvusPay greška — Vaš zahtjev ne može biti obrađen – CorvusPay

order_number mora biti jedinstven jer sustav će provjeriti i odbiti svaki upit na Corvus API ako narudžba s istim brojem narudžbe već postoji.

signature se kreira koristeći HMAC-SHA256. On se sastoji od svih obaveznih i opcionalnih vrijednosti (key-value field pairs), poredanih abecedno i spojenih bez razmaka.

To onda izgleda ovako:

amount10.00cartkindlepaperwhitecurrencyHRKlanguagehrorder_number1537270065109require_completefalsestore_id2029version1.3

1	amount10.00cartkindlepaperwhitecurrencyHRKlanguagehrorder_number1537270065109require_completefalsestore_id2029version1.3

na osnovu čega se dobije signature

6cc62fa239555f790b5665d4b002faa5b1d90ded5e4caa3e70d37a4db88d6d51

1	6cc62fa239555f790b5665d4b002faa5b1d90ded5e4caa3e70d37a4db88d6d51

signature = HMAC-256(key, key-value field pairs)

~ ključ: UNV3-i2otJw0rUWzA2lpcNRqTOYRWdAeTw
~ parametri:
– version : 1.3
– store_id : 2029
– order_number : 1537270065109
– amount : 10.00
– currency : HRK
– cart : kindle paperwhite
– require_complete : false
– language : hr

CorvusPay HTTPS POST — CorvusPay Integration Manual v5.1.0

Neobavezni CorvusPay parametri

Osim obaveznih parametara moguće je koristiti i neobavezne. U ovom slučaju to će biti parametri vezani uz plaćanje na rate.

Tri su načina pokretanja transakcije na rate:
• Fiksni broj rata
• Fleksibilan broj rata
• Samostalan odabir rata za određenu karticu

Napomene:
• Ako se za određenu platnu karticu ne pošalje parametar payment_brandName kartica neće biti dostupna za odabir
• Prvi znak parametra payment_ trebao bi biti jednak N ili Y jer to označava je li dozvoljeno jednokratno plaćanje ili ne
• Posljednja četiri znaka određuju raspon broja rata. Kupac može odabrati broj rata u rasponu između prvog dvoznamenkastog broja i drugog dvoznamenkastog broja

CorvusPay plaćanje na rate — CorvusPay Integration Manual v5.1.0

Web aplikacija (Angular)

Unutar forme pomoću POST metode poziva se API za pokretanje kartičnog plaćanja.

Sve navedene vrijednosti su promjenjive tako da ih prilikom svake promjene unutar .ts datoteke treba osvježiti i unutar forme </form>.

Parametri signature i payment_ mogu se kreirati na frontendu i backendu. U ovom slučaju oni će se kreirati na frontendu i prosljeđivati kroz formu na API.

<form [action]="'https://localhost:3000/api/corvus/'" ngNoForm method="POST" target="_self">
  <button [disabled]="disableSecondClick" class="btn-pay" type="submit">Plati karticom</button>
  <div hidden>
       <input name='order_number' value='{{orderNumber}}'>
       <input name='amount' value='{{paymentForm.value.amount}}'>
       <input name='cart' value='{{paymentForm.value.cart}}'>
       <input name='signature' value='{{paymentForm.value.signature}}'>
       <input name='payment_visa' value='{{paymentForm.value.payment_visa}}'>
       <input name='payment_master' value='{{paymentForm.value.payment_master}}'>
       <input name='payment_maestro' value='{{paymentForm.value.payment_maestro}}'>
       <input name='payment_diners' value='{{paymentForm.value.payment_diners}}'>
  </div>
</form>

<button [disabled]="disableSecondClick" class="btn-pay" type="submit">Plati karticom</button>

</div>

</form>

Za potrebu kreiranja HmacSHA256 potpisa koristi se crypto-js. Uz to, unutar environment varijable nalaze se razvojni i produkcijski parametri secretKey i storeId.

import * as crypto from 'crypto-js';
import * as HmacSHA256 from 'crypto-js/hmac-sha256';

import { environment } from './../../environments/environment';

...

import * as crypto from 'crypto-js';

import * as HmacSHA256 from 'crypto-js/hmac-sha256';

import { environment } from './../../environments/environment';

...

Glavna razlika u ovom dijelu tiče se ukupne cijene tj. ovisno o tome prelazi li iznos od 500kn plaćanje na rate biti će odobreno ili onemogućeno. U oba slučaja kreira se različit signature.

Za ukupan iznos veći ili jednak 500kn koristi se sljedeće:

this.value_pairs="amount"+this.amountTotal.toFixed(2)+
                 "cart"+this.orderedItem+
                 "currencyHRK"+
                 "languagehr"+
                 "order_number"+this.orderNumber+
                 "payment_all_dynamictrue"+
                 "payment_dinersY0112"+
                 "payment_maestroY0112"+
                 "payment_masterY0112"+
                 "payment_visaY0112"+"require_completefalse"+
                 "store_id"+environment.storeId+
                 "version1.3";
this.signature = HmacSHA256(this.value_pairs,environment.secretKey).toString(crypto.enc.Hex);
this.paymentForm.patchValue({
        amount: this.amountTotal.toFixed(2),
        signature: this.signature,
        payment_visa: 'Y0112',
        payment_master: 'Y0112',
        payment_maestro: 'Y0112',
        payment_diners: 'Y0112'
});

this.value_pairs="amount"+this.amountTotal.toFixed(2)+

"cart"+this.orderedItem+

"currencyHRK"+

"languagehr"+

"order_number"+this.orderNumber+

"payment_all_dynamictrue"+

"payment_dinersY0112"+

"payment_maestroY0112"+

"payment_masterY0112"+

"payment_visaY0112"+"require_completefalse"+

"store_id"+environment.storeId+

"version1.3";

this.signature = HmacSHA256(this.value_pairs,environment.secretKey).toString(crypto.enc.Hex);

this.paymentForm.patchValue({

amount: this.amountTotal.toFixed(2),

signature: this.signature,

payment_visa: 'Y0112',

payment_master: 'Y0112',

payment_maestro: 'Y0112',

payment_diners: 'Y0112'

});

Dok se za iznose manje od 500kn koristi:

this.value_pairs="amount"+this.amountTotal.toFixed(2)+
                 "cart"+this.orderedItem+
                 "currencyHRK"+
                 "languagehr"+
                 "order_number"+this.orderNumber+
                 "payment_all_dynamictrue"+
                 "payment_dinersY0000"+
                 "payment_maestroY0000"+
                 "payment_masterY0000"+
                 "payment_visaY0000"+
                 "require_completefalse"+
                 "store_id"+environment.storeId+
                 "version1.3";
this.signature = HmacSHA256(this.value_pairs,environment.secretKey).toString(crypto.enc.Hex);
this.paymentForm.patchValue({
         amount: this.amountTotal.toFixed(2),
         signature: this.signature,
         payment_visa: 'Y0000',
         payment_master: 'Y0000',
         payment_maestro: 'Y0000',
         payment_diners: 'Y0000'
});

this.value_pairs="amount"+this.amountTotal.toFixed(2)+

"cart"+this.orderedItem+

"currencyHRK"+

"languagehr"+

"order_number"+this.orderNumber+

"payment_all_dynamictrue"+

"payment_dinersY0000"+

"payment_maestroY0000"+

"payment_masterY0000"+

"payment_visaY0000"+

"require_completefalse"+

"store_id"+environment.storeId+

"version1.3";

this.signature = HmacSHA256(this.value_pairs,environment.secretKey).toString(crypto.enc.Hex);

this.paymentForm.patchValue({

amount: this.amountTotal.toFixed(2),

signature: this.signature,

payment_visa: 'Y0000',

payment_master: 'Y0000',

payment_maestro: 'Y0000',

payment_diners: 'Y0000'

});

Backend API (Express.js)

Backend logika nalazit će se u server.js datoteci. Kako ju kreirati možete se vidjeti u blog postu “Izrada RESTful API-ja koristeći Node.js i Express.js“. Razlika između primjera iz tog blog posta i ovoga sada je što više nije potrebno koristiti body-parser.

var express = require('express');
var app = express();

app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use('/api', apiRoutes);

var port = process.env.PORT || 3000;
 
var apiRoutes = express.Router();

apiRoutes.get('/', function(req, res) {
    res.json({ message: 'CorvusPay API je pokrenut!' });
});

...

app.listen(port);

var express = require('express');

var app = express();

app.use(express.json());

app.use(express.urlencoded({ extended: true }));

app.use('/api', apiRoutes);

var port = process.env.PORT || 3000;

var apiRoutes = express.Router();

apiRoutes.get('/', function(req, res) {

res.json({ message: 'CorvusPay API je pokrenut!' });

});

...

app.listen(port);

Ova će se datoteka sastojati od tri krajnje točke (API endpoints).

Prva krajnja točka, '/corvusPay', preusmjerit će korisnika na formu za plaćanje.

apiRoutes.post('/corvusPay', function(req, res) {
    if(req.body.order_number && req.body.amount){
        res.status(301).redirect(307, 'https://test-wallet.corvuspay.com/checkout/?store_id=2029&order_number='+req.body.order_number+'&language=hr&currency=HRK&amount='+req.body.amount+'&cart='+req.body.cart+'&signature='+req.body.signature+'&require_complete=false&version=1.3&payment_all_dynamic=true&payment_visa='+req.body.payment_visa+'&payment_master='+req.body.payment_master+'&payment_maestro='+req.body.payment_maestro+'&payment_diners='+req.body.payment_diners)
    } else {
        res.json({
            success: false,
            status: 502,
            message: 'Greška, ne šaljete sve potrebne podatke za plaćanje!'
        });
    }
});

apiRoutes.post('/corvusPay', function(req, res) {

if(req.body.order_number && req.body.amount){

res.status(301).redirect(307, 'https://test-wallet.corvuspay.com/checkout/?store_id=2029&order_number='+req.body.order_number+'&language=hr&currency=HRK&amount='+req.body.amount+'&cart='+req.body.cart+'&signature='+req.body.signature+'&require_complete=false&version=1.3&payment_all_dynamic=true&payment_visa='+req.body.payment_visa+'&payment_master='+req.body.payment_master+'&payment_maestro='+req.body.payment_maestro+'&payment_diners='+req.body.payment_diners)

} else {

res.json({

success: false,

status: 502,

message: 'Greška, ne šaljete sve potrebne podatke za plaćanje!'

});

}

});

Nakon unosa i obrade podataka o kartici

CorvusPay - obrada u tijeku — CorvusPay – obrada u tijeku

korisnik je preusmjeren na dodatnu sigurnosnu autentifikaciju kartice.

CorvusPay - sigurnosna autentifikacija kartice — CorvusPay – sigurnosna autentifikacija kartice

Ako je sve prošlo uspješno korisniku će se prikazati obavijest

CorvusPay - transakcija-uspjela — CorvusPay – transakcija uspjela

i na e-mail će dobiti obavijest o uspješnoj narudžbi.

CorvusPay - obavijest o uspješnoj narudžbi — CorvusPay – obavijest o uspješnoj narudžbi

Druga krajnja točka, '/corvusPaySuccess' , prihvaća odgovor od Corvusa kada je plaćanje uspješno provedeno.

apiRoutes.post('/corvusPaySuccess', function(req, res) {
    res.status(200).redirect(301, 'https://localhost/success/'+req.body.order_number)
    ...
});

apiRoutes.post('/corvusPaySuccess', function(req, res) {

res.status(200).redirect(301, 'https://localhost/success/'+req.body.order_number)

...

});

Treća krajnja točka, '/corvusPayCancel' , prihvaća odgovor od Corvusa kada je plaćanje neuspješno ili otkazano.

apiRoutes.post('/corvusPayCancel', function(req, res) {
    res.status(200).redirect(301, 'https://localhost/cancel/'+req.body.order_number)
    ...
});

apiRoutes.post('/corvusPayCancel', function(req, res) {

res.status(200).redirect(301, 'https://localhost/cancel/'+req.body.order_number)

...

});

*ngFor u Angularu 101

Cilj blog posta “*ngFor u Angularu za početnike” je napraviti uvod u ngFor Angular direktivu jer ona je osnova koju svaki, Angular, developer treba i mora znati.

*ngFor direktiva se primarno koristi za prikaz niza podataka (array) i početnicima može predstavljati poseban izazov. Također, može se koristiti i za prikaz objekata uz pomoć KeyValuePipe.

Prije nego krenem s izradom primjera trebam kreirati Angular projekt, a to činim naredbom:

$ ng new AngularNgFor
$ cd AngularNgFor
$ ng serve

$ ng new AngularNgFor

$ cd AngularNgFor

$ ng serve

Projekt je vidljiv na adresi http://localhost:4200/

Uvod

*ngFor direktiva u Angularu, osim što služi za prikaz niza podataka, je optimizirana da minimalno utječe na DOM (Document Object Model).

To će se najbolje vidjeti u nastavku kada budem koristio let i = index pri čemu ću uklanjati elemente niza bez da ga cijelog ponovno osvježavam.

Angular će se pobrinuti za to da samo taj jedan element izbaci dok sve drugo ostaje isto. Isti slučaj bi bio i kada bi htio dodati novi element u niz.

U slučaju kada podatke dohvaćamo putem nekog API-ja dogodit će se, u slučaju kada se neki podataka obriše ili doda, da Angular više neće znati što treba biti na kojoj poziciji. U tom slučaju koristim trackBy putem čega Angularu mogu reći koji parametar da koristi kako bi identificirao elemente.

*ngFor – prikaz niza podataka

Ako npr. imam sljedeći niz podatka za pretpostaviti je da ih želim na ekranu prikazati kao popis. U ovom će slučaju to biti jednostavan popis osoba. Podaci su fiksno određeni unutar niza, ali logika je ista čak i da stižu putem nekog API-ja.

simpleArray = [
    {
      id: 4,
      name: 'Tomislav',
      country: 'Croatia'
    },
    {
      id: 5,
      name: 'Jomislav',
      country: 'Croatia'
    },
    {
      id: 6,
      name: 'Valsimot',
      country: 'Croatia'
    },
  ]

simpleArray = [

{

id: 4,

country: 'Croatia'

{

id: 5,

country: 'Croatia'

{

id: 6,

country: 'Croatia'

]

Gore navedeni popis podataka želim prikazati na sljedeći način:

<ul>
  <li>Tomislav, Croatia</li>
  <li>Jomislav, Croatia</li>
  <li>Valsimot, Croatia</li>
</ul>

<ul>

<li>Tomislav, Croatia</li>

<li>Jomislav, Croatia</li>

<li>Valsimot, Croatia</li>

</ul>

To znači da nekako moram postići da se za svaki objekt unutar niza kreira novi <li></li> element.

Upravo tu uskače *ngFor sa vrlo jednostavnom sintaksom *ngFor="let <value> of <collection>" pri čemu <value> označava naziv varijable koji proizvoljno određujem, dok <collection> označava izvor podataka što je u ovom slučaju niz simpleArray.

<ul>
  <li *ngFor="let data of simpleArray">{{data.name}}, {{data.country}}</li>
</ul>

<ul>

<li *ngFor="let data of simpleArray">{{data.name}}, {{data.country}}</li>

</ul>

Konačni rezultat je sljedeći:

Ako želim imati redne brojeve mogu koristiti ol tag. Ovo spominjem samo iz razloga što ću u nastavku pokazati kako je redne brojeve moguće dobiti i pomoću indexa elementa.

ngFor + element index*

index se definira kao varijabla let i = index i uvijek počinje od 0. Mogu ga koristiti kako bi prikazao redne brojeve elemenata.

<ul>
  <li *ngFor="let data of simpleArray; let i = index">{{i+1}} - {{data.name}}, {{data.country}}</li>
</ul>

<ul>

<li *ngFor="let data of simpleArray; let i = index">{{i+1}} - {{data.name}}, {{data.country}}</li>

</ul>

Na ekranu to izgleda ovako:

index mogu, ali i ne moram prikazati na ekranu. U oba ga slučaja mogu koristiti kako bi pristupio pojednom elementu niza.

U sljedećem ću primjeru pomoću funkcije removeByIndex(i) ukloniti neke elemente iz niza.

removeByIndex(i){
   console.log(i);
   this.simpleArray.splice(i,1);
   console.log(this.simpleArray);
}

removeByIndex(i){

console.log(i);

this.simpleArray.splice(i,1);

console.log(this.simpleArray);

}

Funkciju pozivam klikom na pojedini element.

<ul>
  <li *ngFor="let data of simpleArray; let i = index" (click)="removeByIndex(i)">{{i}} - {{data.name}}, {{data.country}}</li>
</ul>

<ul>

<li *ngFor="let data of simpleArray; let i = index" (click)="removeByIndex(i)">{{i}} - {{data.name}}, {{data.country}}</li>

</ul>

U praksi to izgleda ovako:

ngFor + trackBy*

trackBy se definira kao ; trackBy: id.

<ul>
  <li *ngFor="let data of simpleArray; let i = index; trackBy: id" (click)="trackElement(i,data.id)">{{data.name}}, {{data.country}}</li>
</ul>

<ul>

<li *ngFor="let data of simpleArray; let i = index; trackBy: id" (click)="trackElement(i,data.id)">{{data.name}}, {{data.country}}</li>

</ul>

Pomoću funkcije trackElement(i,data.id) dohvaćam unikatni ID svakog elementa niza.

trackElement(i: number, element: any) {
    console.log("index:" + " " + i + ", " + "trackBy ID:" + " " + element);
}

trackElement(i: number, element: any) {

console.log("index:" + " " + i + ", " + "trackBy ID:" + " " + element);

}

U praksi to izgleda ovako:

*ngFor – prvi i zadnji element niza

*ngFor direktiva u Angularu nudi još jednu zanimljivu mogućnost, a to je dohvaćanje prvog i zadnjeg elementa niza pomoću ; let first = first; let last = last.

<ul>
  <li *ngFor="let data of simpleArray; let first = first; let last = last" [ngClass]="{ firstClass: first, lastClass: last }">{{data.name}}, {{data.country}}</li>
</ul>

<ul>

<li *ngFor="let data of simpleArray; let first = first; let last = last" [ngClass]="{ firstClass: first, lastClass: last }">{{data.name}}, {{data.country}}</li>

</ul>

Na taj se način prvi i zadnji element mogu npr. urediti CSS-om.

.firstClass {
    color: red;
}
.lastClass {
    color: blue;
}

.firstClass {

color: red;

}

.lastClass {

color: blue;

}

U praksi to izgleda ovako:

Iako ovo još nisam koristio u nekoj produkcijskoj aplikaciji izgleda vrlo zanimljivo.

*ngFor – parni i neparni elementi niza

Kada već spominjem uređivanje elementata CSS-om, postoji još jedna zanimljiva funkcionalnost korištenjem ; let even = even; let odd = odd.

<ul>
 <li *ngFor="let data of simpleArray; let even = even; let odd = odd" [ngClass]="{ evenClass: even, oddClass: odd }">{{data.name}}, {{data.country}}</li>
</ul>

<ul>

<li *ngFor="let data of simpleArray; let even = even; let odd = odd" [ngClass]="{ evenClass: even, oddClass: odd }">{{data.name}}, {{data.country}}</li>

</ul>

Na taj se način parni i neparni elementi mogu npr. urediti CSS-om.

.evenClass {
    color: red;
}
.oddClass {
    color: blue;
}

.evenClass {

color: red;

}

.oddClass {

color: blue;

}

U praksi to izgleda ovako:

*ngFor – niz unutar niza

Osim prikaza osnovnog niza mogu prikazati i napredni niz tj. countryList niz unutar nestedArray niza.

nestedArray: any[] = [
    {
      id: 4,
      name: 'Tomislav',
      countryList: [
        {
          shortCode: 'HR',
          fullName: 'Croatia'
        },
        {
          shortCode: 'UK',
          fullName: 'United Kingdom'
        }
      ]
    },
    {
      id: 5,
      name: 'Jomislav',
      countryList: [
        {
          shortCode: 'HR',
          fullName: 'Croatia'
        },
        {
          shortCode: 'UK',
          fullName: 'United Kingdom'
        }
      ]
    },
    {
      id: 6,
      name: 'Valsimot',
      countryList: [
        {
          shortCode: 'HR',
          fullName: 'Croatia'
        },
        {
          shortCode: 'UK',
          fullName: 'United Kingdom'
        }
      ]
    },
]

nestedArray: any[] = [

{

id: 4,

countryList: [

{

shortCode: 'HR',

fullName: 'Croatia'

{

shortCode: 'UK',

fullName: 'United Kingdom'

}

]

{

id: 5,

countryList: [

{

shortCode: 'HR',

fullName: 'Croatia'

{

shortCode: 'UK',

fullName: 'United Kingdom'

}

]

{

id: 6,

countryList: [

{

shortCode: 'HR',

fullName: 'Croatia'

{

shortCode: 'UK',

fullName: 'United Kingdom'

}

]

U ovom slučaju *ngFor ide unutar <ul>.

<ul *ngFor="let data of nestedArray">
   <li>{{data.name}}</li>
      <ul>
        <li *ngFor="let country of data.countryList">
            {{country.fullName}}
        </li>
      </ul>
</ul>

<ul>

</li>

</ul>

U praksi to izgleda ovako:

Zaključak

U ovom blog postu, pod nazivom “*ngFor u Angularu za početnike“, naveo sam osnovne funkcionalnosti *ngFor direktive s kojom svaki developer može napraviti funkcionalno rješenje. Sve dalje ovisi o specifičnim potrebama projekta.

P.S. Struktura projekta prema package.json:

{
  "name": "angular-ng-for",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/cli": "~7.3.9",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2"
  }
}

{

"name": "angular-ng-for",

"version": "0.0.0",

"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e"

"private": true,

"dependencies": {

"@angular/animations": "~7.2.0",

"@angular/common": "~7.2.0",

"@angular/compiler": "~7.2.0",

"@angular/core": "~7.2.0",

"@angular/forms": "~7.2.0",

"@angular/platform-browser": "~7.2.0",

"@angular/platform-browser-dynamic": "~7.2.0",

"@angular/router": "~7.2.0",

"core-js": "^2.5.4",

"rxjs": "~6.3.3",

"tslib": "^1.9.0",

"zone.js": "~0.8.26"

"devDependencies": {

"@angular-devkit/build-angular": "~0.13.0",

"@angular/cli": "~7.3.9",

"@angular/compiler-cli": "~7.2.0",

"@angular/language-service": "~7.2.0",

"@types/node": "~8.9.4",

"@types/jasmine": "~2.8.8",

"@types/jasminewd2": "~2.0.3",

"codelyzer": "~4.5.0",

"jasmine-core": "~2.99.1",

"jasmine-spec-reporter": "~4.2.1",

"karma": "~4.0.0",

"karma-chrome-launcher": "~2.2.0",

"karma-coverage-istanbul-reporter": "~2.0.1",

"karma-jasmine": "~1.1.2",

"karma-jasmine-html-reporter": "^0.2.2",

"protractor": "~5.4.0",

"ts-node": "~7.0.0",

"tslint": "~5.11.0",

"typescript": "~3.2.2"

}

Angular & Ionic 4 – PayPal mobilno plaćanje

Cilj ovog blog posta je pokazati kako implementirati PayPal plaćanje unutar Ionic 4, PWA, aplikacije koristeći Smart Payment Button (Checkout).

Osim Smart Payment Buttons, PayPal omogućava sljedeće vrste plaćanja:

PayPal Smart Payment — PayPal Developer: https://developer.paypal.com/

Primjeri u ovom blog postu temelje se na dokumentaciji dostupnoj na poveznici https://developer.paypal.com/.

Iako u testnom okruženju, plaćanje kreirano na ovaj način biti će uspješno provedeno što će se moći vidjeti unutar PayPal testnog sučelja i prikazano u nastavku ovog blog posta.

Ipak, kako je vidljivo u službenoj dokumentaciji potrebno je napraviti i serverski tj. backend dio koji će služiti kao potvrda uspješnog plaćanja. Serverski dio u ovom blog postu neće biti detaljnije obrađen.

Smart Payment Buttons funkcionira na sljedeći način:

Gumb za plaćanje prikazan je na web/mobilnoj aplikaciji
Kupac klikne na gumb
Poziva se PayPal Orders API koji priprema transakciju
Prikazuje se PayPal Checkout forma za prijavu/plaćanje
Kupac odobrava plaćanje
Poziva se PayPal Orders API koji izvršava transakciju
Kupcu se prikazuje poruka o uspješnoj transakciji

PayPal Sandbox & App Name

Kako bi mogao testirati PayPal naplatu potrebni su mi: testni PayPal korisnički račun na koji će sredstva biti uplaćena, testni PayPal korisnički račun koji će izvršavati plaćanje kao i profil aplikacije putem koje će se plaćanje izvršavati.

PayPal Sandbox

S obzirom da već imam postojeći PayPal račun ne moram ga sada kreirati nego je dovoljno otići na adresu https://developer.paypal.com/developer/accounts/ kako bi kreirao Sandbox račun.

Moguće je kreirati testni račun fizičke ili pravne osobe tj. tvrtke. U ovom ću primjeru kreirati poslovni PayPal račun.

Valuta tog računa biti će u američkim dolarima (USD), a plaćanje ću kasnije izvršavati u dolarima i eurima (EUR). PayPal automatski radi konverziju valuta.

Klikom na „Create Account“ kreiram Sandbox PayPal račun fortuno@example.com.

My Apps & Credentials

Nakon toga na adresi https://developer.paypal.com/developer/applications kreiram profil aplikacije putem koje ću izvršavati plaćanje.

Klikom na „Create App“ dolazim do ekrana gdje je potrebno unijeti naziv aplikacije i odabrati Sandbox račun s kojim će ta aplikacija biti povezana.

Nakon toga dobijem Client ID koji će mi biti potreban kasnije i bez kojega ne mogu izvršiti plaćanje.

Smart Payment Buttons & Ionic 4

Sada ću kreirati novi Ionic 4 projekt. To činim naredbom:

$ ionic start Ionic4PayPal blank

1	$ ionic start Ionic4PayPal blank

Fokus će biti na početnom ekranu koji će se sastojati samo od gumba za plaćanje tako da koristim blank temu.

Detaljnije o kreiranju Ionic 4 aplikacije moguće je pronaći u blog postu pod naslovom „Ionic 4 CRUD aplikacija“.

PayPal Checkout tj. Smart Payment Buttons omogućava brzu i jednostavnu implementaciju plaćanja u bilo koju aplikaciju na siguran način.

Implementacija počinje dodavanjem sljedeće skripte unutar index.html datoteke:

<script src="https://www.paypal.com/sdk/js?client-id=CLIENTID"></script>

1	<script src="https://www.paypal.com/sdk/js?client-id=CLIENTID"></script>

Kao što se može vidjeti, ovdje mi je potreban ranije kreiran Client ID. Ako drugačije ne navedem zadana valuta biti će USD. U jednom od primjera kao valutu ću dodati EUR, parametar currency.

Popis svih dostupnih parametara moguće je vidjeti na poveznici https://developer.paypal.com/docs/checkout/reference/customize-sdk/.

index.html datoteka sada izgleda ovako:

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="utf-8" />
  <title>Ionic 4 - PayPal</title>
 
  <base href="/" />
 
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="msapplication-tap-highlight" content="no" />
 
  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
 
  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
 
  <script src="https://www.paypal.com/sdk/js?client-id=CLIENTID"></script>
  <!-- <script src="https://www.paypal.com/sdk/js?client-id=CLIENTID&currency=EUR"></script> -->
</head>
 
<body>
  <app-root></app-root>
</body>
 
</html>

<!DOCTYPE html>

<head>

<title>Ionic 4 - PayPal</title>

</head>

<body>

<app-root></app-root>

</body>

</html>

Prikaz gumba na ekranu vrši se putem ID-a.

<div id="paypal-button-container"></div>

1	<div id="paypal-button-container"></div>

Sve zajedno to sada izgleda ovako:

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>
      Ionic 4 - PayPal
    </ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content>
  <ion-row *ngIf="!placanjeUspjesno" text-center>
      <ion-col size-lg="4" offset-lg="4">
          <ion-card padding>
         <div id="paypal-button-container"></div>
          </ion-card>
      </ion-col>
  </ion-row>
  <ion-row *ngIf="placanjeUspjesno">
     <ion-col size-lg="4" offset-lg="5" text-center>
        <ion-card padding>
        <p>Thank you for your payment. Your transaction has been completed, and a receipt for your purchase has been emailed to you. Log into your PayPal account to view transaction details.</p>
      </ion-card>
      </ion-col>
  </ion-row>
</ion-content>

<ion-header>

<ion-toolbar color="primary">

<ion-title>

Ionic 4 - PayPal

</ion-title>

</ion-toolbar>

</ion-header>

<ion-content>

<ion-row *ngIf="!placanjeUspjesno" text-center>

<ion-col size-lg="4" offset-lg="4">

<ion-card padding>

</ion-card>

</ion-col>

</ion-row>

<ion-row *ngIf="placanjeUspjesno">

<ion-col size-lg="4" offset-lg="5" text-center>

<ion-card padding>

<p>Thank you for your payment. Your transaction has been completed, and a receipt for your purchase has been emailed to you. Log into your PayPal account to view transaction details.</p>

</ion-card>

</ion-col>

</ion-row>

</ion-content>

Koristim ngIf direktivu kako bi nakon uspješnog plaćanja umjesto gumba za plaćanje prikazao odgovarajuću poruku.

S obzirom da je u pitanju demo aplikacija na ekranu se neće nalaziti ništa drugo osim gumba za plaćanje na vrhu ekrana. U suprotnom bi se više moralo razmisliti o optimalnom mjestu za postavljanje gumba. Više o tome na poveznici https://developer.paypal.com/docs/checkout/best-practices/feature-paypal/#

Inicijalizacija transakcije vrši se klikom na gumb “PayPal” tj. funkcijom createOrder unutar koje ću proslijediti samo iznos koji želim na/platiti.

createOrder: function (data, actions) {
   return actions.order.create({
          purchase_units: [{
            amount: {
              value: _this.paymentAmount
            }
          }]
   });
},

createOrder: function (data, actions) {

return actions.order.create({

purchase_units: [{

amount: {

value: _this.paymentAmount

}

}]

});

Kada kupac odobri transakciju poziva se funkcija onApprove.

onApprove: function (data, actions) {
           return actions.order.capture()
             .then(function (details) {
               console.log(details);
               if(details.status == "COMPLETED"){
                // Show a success message to the buyer
               //alert('Transaction completed by ' + details.payer.name.given_name + '!');
                  _this.placanjeUspjesno = true;
               } else {
                 alert("Neuspješno plaćanje!");
               }
             })
             .catch(err => {
               console.log(err);
             })
}

onApprove: function (data, actions) {

return actions.order.capture()

.then(function (details) {

console.log(details);

if(details.status == "COMPLETED"){

// Show a success message to the buyer

//alert('Transaction completed by ' + details.payer.name.given_name + '!');

_this.placanjeUspjesno = true;

} else {

alert("Neuspješno plaćanje!");

}

})

.catch(err => {

console.log(err);

})

}

Kompletna funkcionalnost izgleda ovako:

import { Component } from '@angular/core';
 
declare var window: any;
 
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
 
  paymentAmount: string = "10";
  placanjeUspjesno: boolean = false;
 
  constructor() {
     this.paymentOptions();
  }
 
  paymentOptions(){
    let _this = this;
    setTimeout(() => {
      // Render the PayPal button into #paypal-button-container
      window.paypal.Buttons({
 
        // Set up the transaction
        createOrder: function (data, actions) {
          return actions.order.create({
            purchase_units: [{
              amount: {
                value: _this.paymentAmount
              }
            }]
          });
        },
 
        // Finalize the transaction
         onApprove: function (data, actions) {
           return actions.order.capture()
             .then(function (details) {
               console.log(details);
               if(details.status == "COMPLETED"){
                // Show a success message to the buyer
               //alert('Transaction completed by ' + details.payer.name.given_name + '!');
                  _this.placanjeUspjesno = true;
               } else {
                 alert("Neuspješno plaćanje!");
               }
             })
             .catch(err => {
               console.log(err);
             })
         }
 
      }).render('#paypal-button-container');
    }, 500)
}
 
}

import { Component } from '@angular/core';

declare var window: any;

@Component({

selector: 'app-home',

templateUrl: 'home.page.html',

styleUrls: ['home.page.scss'],

})

export class HomePage {

paymentAmount: string = "10";

placanjeUspjesno: boolean = false;

constructor() {

this.paymentOptions();

}

paymentOptions(){

let _this = this;

setTimeout(() => {

// Render the PayPal button into #paypal-button-container

window.paypal.Buttons({

// Set up the transaction

createOrder: function (data, actions) {

return actions.order.create({

purchase_units: [{

amount: {

value: _this.paymentAmount

}

}]

});

// Finalize the transaction

onApprove: function (data, actions) {

return actions.order.capture()

.then(function (details) {

console.log(details);

if(details.status == "COMPLETED"){

// Show a success message to the buyer

//alert('Transaction completed by ' + details.payer.name.given_name + '!');

_this.placanjeUspjesno = true;

} else {

alert("Neuspješno plaćanje!");

}

})

.catch(err => {

console.log(err);

})

}

}).render('#paypal-button-container');

}, 500)

}

Demo prikaz

Sada ću proći kroz čitav proces naplate i prikazati ga slikama.

Klikom na žuti gumb „PayPal“ pokrećem postupak plaćanja. Prijavljujem se pomoću PayPal Sandbox računa.

Biram na koji način želim platiti navedeni iznos. To mogu učiniti sa svojeg ukupnog balansa, kreditnom ili debitnom karticom koje su povezane s PayPal računom.

Klikom na “Pay Now” potvrđujem plaćanje. Plaćanje je uspješno izvršeno ako dobijem (Order) ID. U ovom slučaju to je "id": "99D86747XH516732E".

PayPal će mi vratiti sljedeći odgovor, u kojemu imam sve potrebno kako bi kasnije mogao raditi provjeri plaćanja, nakon što je plaćanje uspješno prošlo:

{
  "create_time": "2019-06-03T09:43:05Z",
  "update_time": "2019-06-03T09:43:05Z",
  "id": "99D86747XH516732E",
  "intent": "CAPTURE",
  "status": "COMPLETED",
  "payer": {
    "email_address": "tomislavstankovic1-buyer@gmail.com",
    "payer_id": "FW4BEH8QAPTEG",
    "address": {
      "country_code": "US"
    },
    "name": {
      "given_name": "test",
      "surname": "buyer"
    },
    "phone": {
      "phone_number": {
        "national_number": "4083320878"
      }
    }
  },
  "purchase_units": [
    {
      "reference_id": "default",
      "amount": {
        "value": "10.00",
        "currency_code": "USD"
      },
      "payee": {
        "email_address": "fortuno@example.com",
        "merchant_id": "RMF4F2P7GMT84"
      },
      "shipping": {
        "name": {
          "full_name": "test buyer"
        },
        "address": {
          "address_line_1": "1 Main St",
          "admin_area_2": "San Jose",
          "admin_area_1": "CA",
          "postal_code": "95131",
          "country_code": "US"
        }
      },
      "payments": {
        "captures": [
          {
            "status": "COMPLETED",
            "id": "9V075368A1755811N",
            "final_capture": true,
            "create_time": "2019-06-03T09:43:05Z",
            "update_time": "2019-06-03T09:43:05Z",
            "amount": {
              "value": "10.00",
              "currency_code": "USD"
            },
            "seller_protection": {
              "status": "ELIGIBLE",
              "dispute_categories": [
                "ITEM_NOT_RECEIVED",
                "UNAUTHORIZED_TRANSACTION"
              ]
            },
            "links": [
              {
                "href": "https://api.sandbox.paypal.com/v2/payments/captures/9V075368A1755811N",
                "rel": "self",
                "method": "GET",
                "title": "GET"
              },
              {
                "href": "https://api.sandbox.paypal.com/v2/payments/captures/9V075368A1755811N/refund",
                "rel": "refund",
                "method": "POST",
                "title": "POST"
              },
              {
                "href": "https://api.sandbox.paypal.com/v2/checkout/orders/99D86747XH516732E",
                "rel": "up",
                "method": "GET",
                "title": "GET"
              }
            ]
          }
        ]
      }
    }
  ],
  "links": [
    {
      "href": "https://api.sandbox.paypal.com/v2/checkout/orders/99D86747XH516732E",
      "rel": "self",
      "method": "GET",
      "title": "GET"
    }
  ]
}

{

"create_time": "2019-06-03T09:43:05Z",

"update_time": "2019-06-03T09:43:05Z",

"id": "99D86747XH516732E",

"intent": "CAPTURE",

"status": "COMPLETED",

"payer": {

"email_address": "tomislavstankovic1-buyer@gmail.com",

"payer_id": "FW4BEH8QAPTEG",

"address": {

"country_code": "US"

"name": {

"given_name": "test",

"surname": "buyer"

"phone": {

"phone_number": {

"national_number": "4083320878"

}

"purchase_units": [

{

"reference_id": "default",

"amount": {

"value": "10.00",

"currency_code": "USD"

"payee": {

"email_address": "fortuno@example.com",

"merchant_id": "RMF4F2P7GMT84"

"shipping": {

"name": {

"full_name": "test buyer"

"address": {

"address_line_1": "1 Main St",

"admin_area_2": "San Jose",

"admin_area_1": "CA",

"postal_code": "95131",

"country_code": "US"

}

"payments": {

"captures": [

{

"status": "COMPLETED",

"id": "9V075368A1755811N",

"final_capture": true,

"create_time": "2019-06-03T09:43:05Z",

"update_time": "2019-06-03T09:43:05Z",

"amount": {

"value": "10.00",

"currency_code": "USD"

"seller_protection": {

"status": "ELIGIBLE",

"dispute_categories": [

"ITEM_NOT_RECEIVED",

"UNAUTHORIZED_TRANSACTION"

]

"links": [

{

"href": "https://api.sandbox.paypal.com/v2/payments/captures/9V075368A1755811N",

"rel": "self",

"method": "GET",

"title": "GET"

{

"href": "https://api.sandbox.paypal.com/v2/payments/captures/9V075368A1755811N/refund",

"rel": "refund",

"method": "POST",

"title": "POST"

{

"href": "https://api.sandbox.paypal.com/v2/checkout/orders/99D86747XH516732E",

"rel": "up",

"method": "GET",

"title": "GET"

}

]

}

]

}

"links": [

{

"href": "https://api.sandbox.paypal.com/v2/checkout/orders/99D86747XH516732E",

"rel": "self",

"method": "GET",

"title": "GET"

}

]

}

Osim toga, potvrdu o uspješnom plaćanju mogu vidjeti ako se prijavim unutar PayPal Sandbox računa na adresi https://www.sandbox.paypal.com/ sa korisničkim imenom tomislavstankovic1-buyer@gmail.com i pripadajućom lozinkom.

Ovdje mogu vidjeti koliki mi je trenutni tj. ukupni dostupan iznos na PayPal Sandbox računu kao i popis svih transakcija.

Klikom na „Informatika Fortuno’s Test Store“ mogu vidjeti detalje navedene transakcije.

Zaključak

Što se klijentskog dijela aplikacije tiče to bi bilo sve.

Ostaje još napraviti serverski, backend, dio gdje će se vršiti provjera plaćanja. Na taj API šaljem ranije spomenuti ID "id": "99D86747XH516732E".

// 1. Set up your server to make calls to PayPal
 
// 1a. Import the SDK package
const checkoutNodeJssdk = require('@paypal/checkout-server-sdk');
 
// 1b. Import the PayPal SDK client that was created in `Set up Server-Side SDK`.
/**
 *
 * PayPal HTTP client dependency
 */
const payPalClient = require('../Common/payPalClient');
 
// 2. Set up your server to receive a call from the client
module.exports = async function handleRequest(req, res) {
 
  // 2a. Get the order ID from the request body
  const orderID = req.body.orderID;
 
  // 3. Call PayPal to get the transaction details
  let request = new checkoutNodeJssdk.orders.OrdersGetRequest(orderID);
 
  let order;
  try {
    order = await payPalClient.client().execute(request);
  } catch (err) {
 
    // 4. Handle any errors from the call
    console.error(err);
    return res.send(500);
  }
 
  // 5. Validate the transaction details are as expected
  if (order.result.purchase_units[0].amount.value !== '220.00') {
    return res.send(400);
  }
 
  // 6. Save the transaction in your database
  // await database.saveTransaction(orderID);
 
  // 7. Return a successful response to the client
  return res.send(200);
}

// 1. Set up your server to make calls to PayPal

// 1a. Import the SDK package

const checkoutNodeJssdk = require('@paypal/checkout-server-sdk');

// 1b. Import the PayPal SDK client that was created in `Set up Server-Side SDK`.

/**

* PayPal HTTP client dependency

const payPalClient = require('../Common/payPalClient');

// 2. Set up your server to receive a call from the client

module.exports = async function handleRequest(req, res) {

// 2a. Get the order ID from the request body

const orderID = req.body.orderID;

// 3. Call PayPal to get the transaction details

let request = new checkoutNodeJssdk.orders.OrdersGetRequest(orderID);

let order;

try {

order = await payPalClient.client().execute(request);

} catch (err) {

// 4. Handle any errors from the call

console.error(err);

return res.send(500);

}

// 5. Validate the transaction details are as expected

if (order.result.purchase_units[0].amount.value !== '220.00') {

return res.send(400);

}

// 6. Save the transaction in your database

// await database.saveTransaction(orderID);

// 7. Return a successful response to the client

return res.send(200);

}

Struktura projekta prema package.json:

{
  "name": "Ionic4PayPal",
  "version": "0.0.1",
  "author": "Tomislav Stanković",
  "homepage": "https://www.tomislavstankovic.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/forms": "^7.2.2",
    "@angular/http": "^7.2.2",
    "@angular/platform-browser": "^7.2.2",
    "@angular/platform-browser-dynamic": "^7.2.2",
    "@angular/router": "^7.2.2",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.1.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.13.8",
    "@angular-devkit/build-angular": "~0.13.8",
    "@angular-devkit/core": "~7.3.8",
    "@angular-devkit/schematics": "~7.3.8",
    "@angular/cli": "~7.3.8",
    "@angular/compiler": "~7.2.2",
    "@angular/compiler-cli": "~7.2.2",
    "@angular/language-service": "~7.2.2",
    "@ionic/angular-toolkit": "~1.5.1",
    "@types/node": "~12.0.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~8.1.0",
    "tslint": "~5.17.0",
    "typescript": "~3.1.6"
  },
  "description": "Ionic 4 PayPal project"
}

{

"name": "Ionic4PayPal",

"version": "0.0.1",

"author": "Tomislav Stanković",

"homepage": "https://www.tomislavstankovic.com/",

"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e"

"private": true,

"dependencies": {

"@angular/common": "^7.2.2",

"@angular/core": "^7.2.2",

"@angular/forms": "^7.2.2",

"@angular/http": "^7.2.2",

"@angular/platform-browser": "^7.2.2",

"@angular/platform-browser-dynamic": "^7.2.2",

"@angular/router": "^7.2.2",

"@ionic-native/core": "^5.0.0",

"@ionic-native/splash-screen": "^5.0.0",

"@ionic-native/status-bar": "^5.0.0",

"@ionic/angular": "^4.1.0",

"core-js": "^2.5.4",

"rxjs": "~6.5.1",

"tslib": "^1.9.0",

"zone.js": "~0.8.29"

"devDependencies": {

"@angular-devkit/architect": "~0.13.8",

"@angular-devkit/build-angular": "~0.13.8",

"@angular-devkit/core": "~7.3.8",

"@angular-devkit/schematics": "~7.3.8",

"@angular/cli": "~7.3.8",

"@angular/compiler": "~7.2.2",

"@angular/compiler-cli": "~7.2.2",

"@angular/language-service": "~7.2.2",

"@ionic/angular-toolkit": "~1.5.1",

"@types/node": "~12.0.0",

"@types/jasmine": "~2.8.8",

"@types/jasminewd2": "~2.0.3",

"codelyzer": "~4.5.0",

"jasmine-core": "~2.99.1",

"jasmine-spec-reporter": "~4.2.1",

"karma": "~4.1.0",

"karma-chrome-launcher": "~2.2.0",

"karma-coverage-istanbul-reporter": "~2.0.1",

"karma-jasmine": "~1.1.2",

"karma-jasmine-html-reporter": "^0.2.2",

"protractor": "~5.4.0",

"ts-node": "~8.1.0",

"tslint": "~5.17.0",

"typescript": "~3.1.6"

"description": "Ionic 4 PayPal project"

}

P.S. Ovaj je blog post originalno objavljen na adresi https://www.fortuno.hr/ionic-4-paypal-smart-payment-buttons/.

Tijek implementacije

Uvod

Obavezni CorvusPay parametri

Neobavezni CorvusPay parametri

Web aplikacija (Angular)

Backend API (Express.js)

Uvod

*ngFor – prikaz niza podataka

*ngFor + element index

*ngFor + trackBy

*ngFor – prvi i zadnji element niza

*ngFor – parni i neparni elementi niza

*ngFor – niz unutar niza

Zaključak

PayPal Sandbox & App Name

PayPal Sandbox

My Apps & Credentials

Smart Payment Buttons & Ionic 4

Demo prikaz

Zaključak

ngFor + element index*

ngFor + trackBy*