WEB APP

Integrare XPay HostedFields in un app compatibile con iOS, Android e Windows Mobile

28 Agosto 2017
Ionic si avvale di tecnologie come AngularJS e Apache Cordova permettendoci di realizzare la nostra APP scrivendo il codice in maniera simile a quanto facciamo per il web, in JS, HTML e Sass, utilizzando delle strutture predefinite per creare le varie pagine che poi verranno compilate per essere eseguite sulla piattaforma specifica.

Un modo semplice, efficace e gratuito per sviluppare APP utile ai professionisti ma anche a sviluppatori alle prime armi.
Il progetto che andremo ad implementare in questo tutorial prevede un server di backend realizzato in PHP che si occupa di alimentare l’APP con l’elenco dei prodotti e di effettuare i pagamenti verso i server di CartaSi. L’APP a sua volta mostrerà i prodotti, raccoglierà i dati della carta del cliente e innescherà la prima fase del pagamento, raccolta del NONCE che poi verrà portata a termine dal server di backend tramite una chiamata server to server.
Per l’installazione dell’ambiente Ionic seguite le indicazioni del sito ufficiale http://ionicframework.com.

Una volta che tutto sarà pronto, iniziamo a realizzare la nostra prima applicazione ECommerce.
In questo articolo creeremo una semplice APP che dal carrello della spesa ci permetterà di effettuare il checkout verso il gateway XPay utilizzando la tecnologia Hosted Fields e un piccolo server realizzato in PHP come backend del nostro progetto.
Dalla linea di comando iniziamo il nostro progetto digitando:

ionic start X-Pay tabs --v2

Dopo alcuni minuti di elaborazione avremo un risultato simile a questo:
Creating an Ionic 2.x app in C:\ionicproject\X-Pay based on the tabs template.

Downloading: https://github.com/driftyco/ionic2-app-base/archive/master.zip
Downloading: https://github.com/driftyco/ionic2-starter-tabs/archive/master.zip
Installing npm packages (may take a minute or two)...

♬ ♫ ♬ ♫ Your Ionic app is ready to go! ♬ ♫ ♬ ♫
Some helpful tips:
Run your app in the browser (great for initial development):
ionic serve
Run on a device or simulator:
ionic run ios[android,browser]
Share your app with testers, and test on device easily with the Ionic View companion app:
http://view.ionic.io

Andiamo ora a personalizzare il nostro progetto. Creeremo una app single page che mostra in alto i prodotti inseriti nel carrello, il relativo totale, e il form per l’inserimento dei dati carta.
Come mostrato nell’immagine:



Modifichiamo la struttura della pagina principale per ottenere una singola view con le due sezioni e il bottone che ci permetterà di effettuare il checkout.

I files X-Pay/src/pages/tabs/tabs.html e X-Pay/src/pages/tabs/tabs.ts insieme  contengono rispettivamente presentation e logica per creare la struttura dell’applicazione.
I files X-Pay/src/app/app.module.ts e X-Pay/src/app/app.components.ts includono tutte le librerie e riferimenti a componenti necessari al funzionamento del framework.

La personalizzazione della grafica avviene tramite la modifica dei file Pay/src/app/app.scss:
e Pay/src/them/variables.scss in formato SASS, un preprocessore CSS che serve a definire fogli di stile con una forma più semplice, completa e potente rispetto ai CSS tradizionali.

A questo punto prepariamo la nostra pagina di cassa, che sostanzialmente sarà un html con dei tag specifici della piattaforma Ionic, che verranno poi interpretati per effettuare il render specifico per le diverse piattaforme.
Analizziamo alcuni frammenti di codice del file pages/home/home.html
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>

Per chi conosce html, il formato è immediatamente famigliare e il nome dei tag autoesplicativo. Risulterà evidente che <ion-title> è il tag che identifica il titolo della nostra pagina secondo lo standard Ionic.
Vediamo ora l’integrazione con gli HostedFields di XPay. La stessa pagina ad un certo punto conterrà un form che presenterà gli attributi “data-xpay-order” propri del servizio HostedFields tramite il quale costruiremo il nostro form con i dati per il pagamento.
<form id="payment-form">
<input type="hidden" data-xpay-order="importo" name="importo" id="importo" value="{{totale_number}}" />
………….
</form>
</ion-list>
</ion-content>

Ora la nostra struttura è pronta e dobbiamo inserire la logica che intercetti il click sul bottone PAGA che si occupi di effettuare la connessione al gateway XPay.
Modifichiamo quindi il file src/pages/home/home.ts nel quale inseriamo la logica per il calcolo del MAC e gli handler per gestire le chiamate al nostro backend e verso CartaSi.

Nel nostro esempio, il server di backend è costituito da un singolo file php che si occupa di ricevere la chiamata dall’app con il NONCE e di effettuare a sua volta la chiamata verso XPay per il pagamento. In un progetto reale questo server dovrebbe occuparsi di alimentare l’APP con prodotti, importi e gestire le transazioni e relativi esiti. Lo scopo di questo articolo è di mostrare come è semplice l’integrazione XPay HostedFields con il mondo Ionic e mobile in genere.

Per rendere funzionale l’applicazione andranno sostituiti alias e chiave di mac e l’indirizzo del server sul quale è installata l’applicazione di backend. I dati per i test possono esser reperiti tramite la sezione del portale CartaSi “area di test”.
A questo punto vi invito a scaricare l’esempio ed utilizzarlo come spunto per progettare il vostro negozio mobile.