I am using the authorize.net payment gateway in the Ionic framework.
I am using this acceptjs-angular-wrapper
Here is my code:
home.page.html
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Payment
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-button
class="AcceptUI payButton"
id="AcceptUI"
data-billingAddressOptions='{"show":true, "required":true}'
[attr.data-apiLoginID]="apiLoginID" [attr.data-clientKey]="clientKey"
data-acceptUIFormHeaderTxt="Card Information"
data-acceptUIFormBtnTxt="Submit"
data-paymentOptions='{"showCreditCard": true, "showBankAccount": true}'
data-responseHandler="responseHandler"
>
Pay ${{ amount }}
</ion-button>
<ion-button (click)="loadIframe()">Load</ion-button>
</ion-content>
home.page.ts
import { Component } from '@angular/core';
import { NavController } from '@ionic/angular';
import { WebService } from './../web.service';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
public apiLoginID = 'xxxxx';
public clientKey = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
public transactionKey = 'xxxxxxxxxxxxxxxx';
public amount = '5';
constructor(
private webService: WebService,
private navCrtl: NavController
) { }
ionViewWillEnter() {
setTimeout(() => {
const s = document.createElement('script');
s.type = 'text/javascript';
s.innerHTML = 'console.log(\'done\');'; // inline script
s.src = 'https://jstest.authorize.net/v3/AcceptUI.js';
s.charset = 'utf-8';
document.querySelector('head').appendChild(s);
}, 1000);
document.removeEventListener('notification', () => { console.log('Removed!!'); });
const buttonElement = document.getElementById('AcceptUI');
buttonElement.addEventListener('notification', (response: any) => {
event.stopPropagation();
event.preventDefault();
// Call your api here and pass the opaque data in backend
this.paymentHandler(response.detail.opaqueData);
document.removeEventListener('notification', () => { console.log('Removed!!'); });
}, false);
}
paymentHandler(payData: any) {
console.log(payData);
// Put you api here to capture the payment data
const data = {
createTransactionRequest: {
merchantAuthentication: {
name: this.apiLoginID,
transactionKey: this.transactionKey
},
transactionRequest: {
transactionType: 'authCaptureTransaction',
amount: this.amount,
payment: {
opaqueData: payData
}
}
}
};
this.webService.paymentHandler(data).then((response) => {
console.log('API', response);
alert(JSON.stringify(response));
}).catch((error) => {
console.log(error);
})
}
}
// To handle response form authorize.net api
window['responseHandler'] = function responseHandler(response) {
console.log('ok');
console.log('responseHandler', response);
if (response.messages.resultCode === 'Ok') {
const event = new CustomEvent('notification', { detail: response });
const buttonElement = document.getElementById('AcceptUI');
buttonElement.dispatchEvent(event);
}
if (response.messages.resultCode === 'Error') {
let i = 0;
while (i < response.messages.message.length) {
console.log(
response.messages.message[i].code + ': ' +
response.messages.message[i].text
);
i = i + 1;
}
};
};
web.service.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class WebService {
constructor(private http: HttpClient) {
console.log('Hello WebServiceProvider Provider');
}
paymentHandler(data) {
return new Promise((resolve, reject) => {
this.http.post('https://apitest.authorize.net/xml/v1/request.api', data)
.subscribe(resp => {
console.log(resp);
resolve(resp);
}, (err) => {
reject(err);
})
});
}
}
I want to show recent cards like this:
I want to load the payment method like the above image.