Salah satu bagian PENTING dalam proses integrasi webstore Anda dengan PG-1 adalah pembuatan “Pay Button PG-1″ di webstore Anda. Sebagian besar orang yang masih awam akan bertanya-tanya:
“Apa itu Pay Button PG-1?”
“Bagaimana praktek implementasi Pay Button PG-1 pada webstore saya?”
Pada artikel kali ini, saya akan coba membantu Anda secara detail (disertai contoh script) bagaimana cara membuat dan mengimplementasikan Pay Button PG-1 di webstore Anda.
Apa itu “Pay Button PG-1″?
Secara umum proses belanja secara online melalui webstore dapat dibagi menjadi 5 tahap yaitu:
- Pemilihan produk-produk yang ingin dibeli
- Pengisian data-data pribadi dan alamat pengiriman
- Konfirmasi detail pesanan yang akan dilakukan (detail invoice akan ditampilkan untuk pengecekan terakhir)
- Checkout pesanan (data invoice pesanan akan disimpan untuk pemrosesan lebih lanjut)
- Pembayaran atas belanjaan
Pada sebagian besar webstore yang masih menangani proses pembayaran secara terpisah (pembayaran secara offline, transfer antar rekening bank, dsb) proses belanja secara online akan terhenti pada tahap 4 dimana tahap 5 dilakukan secara terpisah dan nantinya akan dilakukan pencocokan pembayaran secara manual.
Dengan mengintegrasikan PG-1 dengan webstore Anda, maka ke-5 tahap belanja dapat dilakukan secara online, tanpa perlu mencocokkan lagi jumlah pembayaran dengan pesanan yang dilakukan. Hal ini dilakukan dengan cara menyediakan satu halaman tambahan diantara tahap 4 dan 5 yang berisi “Pay Button PG-1?. Pada saat customer Anda mengklik tombol tersebut, mereka akan segera dihadapkan pada form pembayaran secara online menggunakan PG-1.
Fungsi utama dari “Pay Button PG-1″ adalah mengarahkan customer pada halaman pembayaran PG-1 dimana customer dapat membayar pesanan yang dilakukan dengan jumlah yang tepat dan Anda pun sebagai merchant (pemilik toko online) tidak perlu khawatir dan repot dalam mencocokkan jumlah pembayaran dengan pesanan yang dilakukan, karena dengan integrasi PG-1 semuanya dapat dilakukan secara otomatis.
Cara membuat “Pay Button PG-1″
Pay Button PG-1 sebenarnya merupakan kode HTML sederhana yang digunakan untuk mengirimkan beberapa parameter terkait dengan pembayaran belanjaan. Berikut ini bentuk nyata kode HTML untuk sebuah “Pay Button PG-1″:
<form action="https://secure.payglobalone.com/pages/scPayment.action?" method="post">
<input type="hidden" name="merchant" value="[MerchantID]“/>
<input type=”hidden” name=”storeId” value=”[StoreID]“/>
<input type=”hidden” name=”cashUsed” value=”[CashUsed]“/>
<input type=”hidden” name=”description” value=”[Description]“/>
<input type=”hidden” name=”transId” value=”[TransID]“/>
<input type=”image” src=”[ButtonImage]” border=”0″
name=”submit” alt=”Pay Global One - The safer, easier way to pay online!”/>
</form>
Parameter-parameter yang dipergunakan dalam sebuah “Pay Button PG-1″ (pada contoh diatas yang dicetak tebal dan diberi tanda [ ]) antara lain:
- Merchant ID
Parameter ini berisi username account merchant Anda di PG-1. Parameter ini berfungsi sebagai informasi pihak yang akan menerima pembayaran dari customer. - Store ID
Parameter ini diisi dengan ID toko online yang telah didaftarkan pada account merchant Anda. Fungsinya sebagai informasi asal/sumber webstore tempat customer melakukan pembayaran. - Cash Used
Parameter ini diisi dengan nilai total belanjaan yang harus dibayar oleh customer Anda (dalam IDR). - Description
Parameter ini diisi dengan deskripsi (berupa text) untuk memberikan informasi kepada customer Anda mengenai pembayaran yang akan mereka lakukan. - Button Image
Parameter ini diisi dengan URL untuk gambar tombol yang dinginkan. Fungsinya hanya sebagai penghias, dimana bentuk, warna, dan ukuran tombol dapat disesuaikan dengan design website masing-masing. - Trans ID (Optional)
Parameter ini diisi dengan ID untuk pesanan terkait (biasanya menggunakan nomor invoice dan sifatnya unik untuk setiap webstore). Trans ID ini nantinya digunakan untuk memanfaatkan fitur notifikasi dari PG-1 atas pembayaran yang dilakukan customer, sehingga status pesanan terkait dapat diupdate secara otomatis. (Cara penggunaanya akan dijelaskan lebih lanjut).
Contoh “Pay Button PG-1″ yang telah diisi dengan parameter-parameter terkait dengan pembayaran pesanan:
<form action="https://secure.payglobalone.com/pages/scPayment.action?" method="post">
<input type="hidden" name="merchant" value="mystore“/>
<input type=”hidden” name=”storeId” value=”10001“/>
<input type=”hidden” name=”cashUsed” value=”83000“/>
<input type=”hidden” name=”description” value=”Pembayaran invoice INV/12345“/>
<input type=”hidden” name=”transId” value=”12345“/>
<input type=”image” src=”https://secure.payglobalone.com/pages/images/buy.gif” border=”0″
name=”submit” alt=”Pay Global One - The safer, easier way to pay online!”/>
</form>
Setelah kode HTML tersebut diletakkan (paste) pada halaman webstore Anda, maka akan tampil gambar Pay Button PG-1 sebagai berikut (gambar yang tampil tergantung dari parameter ButtonImage yang digunakan):
Pada contoh diatas, jika customer meng-klik tombol Pay Button tersebut, maka customer tersebut akan melakukan pembayaran sebesar Rp 83.000,- dengan informasi “Pembayaran invoice INV/12345″. Dana yang telah dibayarkan oleh customer tersebut akan menambah balance cash untuk account merchant mystore sebesar Rp 83.000,-. Pembayaran tersebut akan dianggap berasal dari webstore dengan ID 10001, sehingga notifikasi mengenai pembayaran yang telah dilakukan akan dikirimkan ke webstore tersebut.
Memaksimalkan Fitur-fitur Pembayaran PG-1
Agar mempermudah proses belajar, saya sudah menyediakan contoh script PHP webstore sederhana yang sudah terintegrasi dengan PG-1. Script tersebut dapat didownload di:
http://merchantonline.visi2030.com/wp-content/uploads/2008/11/tutorial-pg1.rar
Anda harus memiliki PHP5 terinstall di komputer Anda untuk menjalankan script tersebut. Sebelum menjalankan script tersebut, silakan eksekusi schema database yang akan dipergunakan. Query database terdapat pada file: database.sql
Konfigurasi dapat diedit pada file: config.php dengan penjelasan sebagai berikut:
- PG1_MERCHANT
Diisi dengan username merchant PG-1 pemilik toko. Username ini nantinya yang akan menerima pembayaran dari customer toko online terkait - PG1_STORE_ID
Diisi dengan ID store yang telah dibuat terlebih dahulu pada menu di member area merchant PG-1. ID ini dipergunakan untuk menentukan URL notifikasi, halaman sukses, halaman cancel, dan halaman home toko online terkait - PG1_PAYMENT_URL
Diisi dengan URL pembayaran PG-1. Defaultnya adalah:
https://secure.payglobalone.com/pages/scPayment.action - PG1_HOST
Diisi dengan IP server PG-1, yaitu: 202.78.195.236 - DB_DSN
Diisi dengan DSN untuk koneksi ke database. Untuk database MySQL dapat diisi dengan syntax:mysql:host=[database-host];dbname=[database-name]
Dimana [database-host] diisi dengan IP server database, dan [database-name] diisi dengan nama database yang akan diakses untuk script tutorial ini
- DB_USER
Diisi dengan user untuk mengakses database - DB_PASS
Diisi dengan password untuk mengakses database
Ada beberapa hal yang perlu dilakukan untuk dapat memaksimalkan fitur-fitur pembayaran PG-1 dengan webstore Anda, antara lain:
- Pembuatan Pay Button PG-1 (checkout3.php)
Cara pembuatan Pay Button PG-1 sudah dibahas diatas. Umumnya dalam sebuah webstore parameter CashUsed, Description, RewardGained, dan TransID diisi dengan suatu nilai yang sifatnya dinamis (berbeda untuk setiap pemesanan yang dilakukan oleh customer). Untuk contoh implementasi Pay Button dalam webstore dapat dilihat dari file tutorial yang diberikan. - Halaman pembayaran sukses (success.php)
Halaman ini akan diakses oleh customer Anda setelah mereka berhasil melakukan pembayaran menggunakan PG-1. Biasanya halaman ini berisikan ucapan terima kasih, sekaligus mengosongkan kembali kereta belanja customer terkait. - Halaman pembatalan pembayaran (cancel.php)
Halaman ini akan diakses oleh customer ketika ditengah proses pembayaran, mereka ingin membatalkan dan mengklik link “Cancel Payment”. Biasanya halaman ini berisikan informasi bahwa pembayaran telah dibatalkan. - Handler untuk notifikasi PG-1 (notification-handler.php)
Handler ini digunakan untuk menerima notifikasi dari PG-1 (berupa HTTP Request) pada saat terjadi event-event tertentu misalnya: Payment Confirmed, Payment Unconfirmed, Payment Approved, dan Payment Unapproved. Notifikasi ini sangat bermanfaat untuk melakukan otomasi terhadap proses-proses pemesanan yang sebelumnya dilakukan secara manual, misalnya mengupdate status pesanan, mengirimkan link download, pengiriman email notifikasi pembayaran kepada customer, pengiriman email notifikasi kepada pemilik toko agar dapat memproses pesanan, dan lain-lain.Notifikasi yang dikirimkan dari PG-1 berupa HTTP Request dengan parameter-parameter sebagai berikut:- protocol
Berisikan versi protokol yang dipergunakan oleh PG-1 - status
Berisikan kode status pembayaran diantaranya:
001 - Payment Confirmed
Notifikasi ini dikirimkan apabila customer telah berhasil melakukan pembayaran untuk transaksi yang bernilai < dari 1 jt. Untuk transaksi > dari 1jt, notifikasi “Payment Confirmed” ini baru akan dikirim setelah customer berhasil melakukan konfirmasi atas pembayaran yang dilakukan (dengan cara mengklik link konfirmasi pada email konfirmasi pembayaran yang dikirimkan oleh PG-1).011 - Payment Unconfirmed
Notifikasi ini dikirimkan apabila customer melakukan cancel (unconfirmed) atas pembayaran yang dilakukan (mungkin karena tidak merasa pernah melakukan transaksi tersebut). Notifikasi ini hanya mungkin dikirimkan untuk nilai transaksi > 1 juta, karena untuk transaksi yang < 1 juta, pembayaran langsung dianggap Confirmed.002 - Payment Approved
Notifikasi ini dikirimkan apabila pihak merchant PG-1 (pemilik toko online), sudah melakukan approval atas pembayaran yang dilakukan customer. Dengan melakukan approval, maka dana yang telah dibayarkan oleh customer akan dipinahkan ke rekening merchant PG-1 pemilik toko online.003 - Payment Unapproved
Notifikasi ini dikirimkan apabila pihak merchant PG-1 (pemilik toko online), melakukan cancel (unapproved) terhadap pembayaran yang telah dilakukan oleh customer. Cancel ini mungkin terjadi apabila pihak merchant merasa tidak dapat memenuhi pesanan yang dilakukan customer. Dengan melakukan unapprove terhadap pembayaran customer, maka dana yang sudah dibayarkan akan dikembalikan ke rekening PG-1 customer. - description
Berisikan deskripsi atas kode status pembayaran - amount
Berisikan nilai transaksi yang dilakukan - merchant
Berisikan username PG-1 merchant Anda - transId
Berisikan nomor transaksi/invoice webstore - approvalId
Berisikan ID yang menunjuk pada transaksi terkait - buyer
Berisikan username PG-1 customer Anda
Pada saat menerima notifikasi dari PG-1, handler yang dibuat terlebih dahulu harus memastikan bahwa pengirim notifikasi adalah PG-1. Validasi ini dapat dilakukan dengan cara melihat IP remote yang mengakses handler, dimana IP server PG-1 adalah “202.78.195.236″. Apabila IP sudah valid, barulah lakukan proses-proses sesuai dengan kode status yang dikirimkan oleh PG-1.
- protocol
- Setting Store di account Merchant Anda
Login menggunakan username dan password account merchant Anda di website payglobalone. Klik menu Edit Store, lalu klik link “Add New Store”. Isi field-field yang tersedia dengan nilai berikut:
Store Name: Website Toko Online Sederhana
Notification URL: http://[domain_anda]/tutorial-pg1/notification-handler.php
Successful URL: http://[domain_anda]/tutorial-pg1/success.php
Cancel URL: http://[domain_anda]/tutorial-pg1/cancel.php
Store URL: http://[domain_anda]/tutorial-pg1/
Dimana [domain_anda] diisi dengan nama domain website Anda tempat Anda menyimpan script file tutorial PG-1 ini.
Selamat Mencoba =)
