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

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *