Tutorial Ionic : Integrasi Dengan Payment Gateway Midtrans

Instalasi Midtrans

Download midtrans disini, ekstrak kedalam folder c:/xampp/htdocs

Buat Rest-Api untuk token

Buat sebuah file dengan nama token.php, untuk kodenya bisa copy dari bawah ini :

<?php
namespace Midtrans;
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Credentials: true");
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
header("Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With");
header("Content-Type: application/json; charset=utf-8");
$post = json_decode(file_get_contents('php://input'), true);//menangkap input dari ionic
require_once(dirname(__FILE__) . '/Midtrans.php');
Config::$serverKey = "SERVERKEY KAMU";
if (strpos(Config::$serverKey,'your ') != false ) {
  echo "<code>";
  echo "<h4>Please set your server key from sandbox</h4>";
  echo "In file: " . __FILE__;
  echo "<br>";
  echo "<br>";
  echo htmlspecialchars('Config::$serverKey = \'<your server key>\';');
  die();
}
// Uncomment for production environment
// Config::$isProduction = true;

// Uncomment to enable sanitization
// Config::$isSanitized = true;

$transaction_details = array(
  'order_id'    => time(),
  'gross_amount'  => $post['gross_amount']
);
// Fill transaction details
$transaction = array(
  'transaction_details' => $transaction_details
);
try {
  $snapToken = Snap::getSnapToken($transaction);
  echo json_encode($response);
} catch (Exception $e) {
  echo $e->getMessage();
  die();
}


Buat Project Ionic

Buatlah sebuah project dengan nama midtrans, dengan menggunakan syntax command promt seperti di bawah ini :

$ ionic start midtrans blank --type=ionic-angular

Tambahkan Platform android

Tambahkan platform android di project kamu agar menggenerate file index.html dengan syntax command prompt seperti di bawah ini :

$ ionic corodova platform add android

Tambahkan Client Key Midtrans

Tambahkan client-key dari midtrans ke file index.html diantara tag <head> seperti contoh di bawah ini :

<script src="https://app.sandbox.midtrans.com/snap/snap.js" data-client-key="KLIEN-KEY"></script>

EDIT Home.html

Ubahlah skrip home html kamu menjadi seperti di bawah ini :

<ion-header>
  <ion-navbar>
    <ion-title text-center>Snap Midtrans</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card>
    <ion-card-header>
      <h2 text-center>200,000</h2>
    </ion-card-header>
    <ion-card-content>
      <img src="../../assets/tas.jpg"> 
      <p text-center>Tas Wanita</p> 
      <input type="hidden" value="200000" [(ngModel)]="gross_amount">
      <button ion-button block (click)="bayar()">Beli</button>
    </ion-card-content>
  </ion-card>
  
  <pre><div id="result-json">Hasil Respon :<br></div></pre> 
</ion-content>

Buat Provider Untuk Rest-API PHP

Buat lah sebuah folder baru di dalam folder src dengan nama providers, lalu buat sebuah file didalamnya dengan nama post-provider.ts yang syntaxnya seperti dibawah ini :

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class PostProvider {
  server: string = 'http://localhost/midtrans/';
  constructor(public http : Http) {}
  postData(body, file) 
  { 
      let type = "application/json; charset=UTF-8";
      let headers = new Headers({ 'Content-Type': type});
      let options = new RequestOptions({ headers: headers });
      return this.http.post(this.server + file, JSON.stringify(body), options).map(res => res.json());
  }  
}

Daftarkan Provider API ke app.module.ts

Tambahkan HttpModule dan PostProvider di app.module.ts sehingga kodingnya menjadi seperti di bawah ini :

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { PostProvider } from '../providers/post-provider';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { HttpModule } from '@angular/http';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    HttpModule, //----------------------ini ditambah
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    PostProvider,//-------------ini ditambah
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Ubah skrip home.ts

Ubahlah skrip home.ts menjadi seperti di bawah ini :

import { Component } from '@angular/core';
import { NavController , NavParams, LoadingController} from 'ionic-angular';
import { PostProvider } from '../../providers/post-provider';
declare var snap:any;
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  gross_amount:any;
  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    private postPvdr : PostProvider,
    private lctr : LoadingController) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SnapPage');
  }

  bayar(){
    this.loading();
    let body={
      gross_amount:this.gross_amount
    }
    this.postPvdr.postData(body, 'checkout.php').subscribe((data:any) => {
      console.log(data);
      
      snap.pay(data.token,{
          // Optional
          onSuccess: function(result){
            document.getElementById('result-json').innerHTML += JSON.stringify(result, null, 2);
        },
        // Optional
        onPending: function(result){
            document.getElementById('result-json').innerHTML += JSON.stringify(result, null, 2);
        },
        // Optional
        onError: function(result){
            document.getElementById('result-json').innerHTML += JSON.stringify(result, null, 2);
        }
      });
    });
  }

  loading(){
    let tunggu = this.lctr.create({
      content: 'Please wait...'
    });
    tunggu.present();
    setTimeout(() => {
      tunggu.dismiss();
    }, 1000);
  }
}

Jalankan Aplikasi

Sekarang run aplikasi dengan command prompt :

$ ionic serve

Nah demikianlah tutorial sederhana mengintegraskan ionic dengan payment gateway midtrans, jika masih ada kendala, jangan sungkan untuk bertanya lewat kolom komentar ya

Baca Juga :   Membuat Laporan Excel Dengan PHP

Leave a Reply

Your email address will not be published. Required fields are marked *