Beranda
Blogger
Template API

Panduan Payment Gateway Midtrans (Cloudflare Worker)

•

⚠️ Penting

Fitur Payment Gateway Midtrans pada template NStore hanya mendukung mata uang Rupiah (IDR).

Sebelum mengaktifkan fitur ini, pastikan pengaturan mata uang pada template telah diubah menjadi:

IDR (Indonesian Rupiah)

Apabila Anda menggunakan mata uang selain IDR, maka proses pembayaran melalui Midtrans tidak akan berfungsi dengan benar.

Persyaratan

Sebelum memulai, pastikan Anda telah memiliki:

  • Akun Cloudflare

  • Akun Midtrans

  • Template NStore versi terbaru

Langkah 1 — Login ke Cloudflare

  1. Buka Dashboard Cloudflare.

  2. Login menggunakan akun Cloudflare Anda.

  3. Jika belum memiliki akun, silakan daftar terlebih dahulu secara gratis.

Langkah 2 — Membuat Cloudflare Worker

  1. Pada menu sebelah kiri pilih Workers & Pages.

  2. Klik Create.

  3. Pilih Create Worker.

  4. Beri nama Worker sesuai keinginan, misalnya:

nstore-payment

  1. Klik Deploy.

Cloudflare akan membuat Worker baru secara otomatis.

Langkah 3 — Memasang Kode Worker

  1. Buka Worker yang baru saja dibuat.

  2. Klik Edit Code.

  3. Hapus seluruh kode bawaan Cloudflare.

  4. Salin file Code Worker dikolom bawah ini.

    function json(e,t=200){return new Response(JSON.stringify(e),{status:t,headers:{"Content-Type":"application/json","Access-Control-Allow-Origin":"*","Access-Control-Allow-Headers":"*","Access-Control-Allow-Methods":"GET, POST, OPTIONS"}})}export default{async fetch(e,t){if("OPTIONS"===e.method)return json({});const s=new URL(e.url);return"/"===s.pathname?json({success:!0,message:"TB Payment Gateway",version:"2.0.0"}):"/create-payment"===s.pathname?"POST"!==e.method?json({success:!1,message:"Method Not Allowed"},405):createPayment(e,t):"/check-status"===s.pathname?checkStatus(e,t):"/notification"===s.pathname?notification(e,t):json({success:!1,message:"Not Found"},404)}};async function createPayment(e,t){try{const s=await e.json();if(!s.order_id)return json({success:!1,message:"order_id required"},400);if(!Array.isArray(s.items)||0===s.items.length)return json({success:!1,message:"Cart kosong"},400);const n=s.items.reduce(function(e,t){return e+(Number(t.price)||0)*(Number(t.qty)||0)},0),a={transaction_details:{order_id:s.order_id,gross_amount:n},customer_details:{first_name:s.customer.name||s.customer.nama||"",email:s.customer.email||"",phone:s.customer.phone||""},item_details:s.items.map(function(e,t){return{id:e.id||"ITEM-"+(t+1),name:e.title,price:Number(e.price)||0,quantity:Number(e.qty)||1}})},r=t.MIDTRANS_SERVER_KEY;if(!r)return json({success:!1,message:"MIDTRANS_SERVER_KEY belum ada."},500);const o="true"===t.MIDTRANS_IS_PRODUCTION?"https://app.midtrans.com/snap/v1/transactions":"https://app.sandbox.midtrans.com/snap/v1/transactions",c=btoa(r+":"),i=await fetch(o,{method:"POST",headers:{Authorization:"Basic "+c,"Content-Type":"application/json",Accept:"application/json"},body:JSON.stringify(a)}),u=await i.text();let d;console.log("MIDTRANS STATUS:",i.status),console.log("MIDTRANS RESPONSE:",u);try{d=JSON.parse(u)}catch(e){return json({success:!1,status:i.status,raw:u},500)}if(!i.ok)return json({success:!1,status:i.status,result:d},i.status);const m=(new Date).toISOString();return await t.DB.prepare("\nINSERT INTO orders(\norder_id,\ncustomer_name,\ncustomer_email,\namount,\ncurrency,\nstatus,\npayment_type,\nsnap_token,\ntransaction_id,\ncreated_at,\nupdated_at\n)\nVALUES(?,?,?,?,?,?,?,?,?,?,?)\n").bind(s.order_id,s.customer.name||s.customer.nama||"",s.customer.email||"",n,s.currency||"IDR","pending","",d.token,"",m,m).run(),json({success:!0,token:d.token,redirect_url:d.redirect_url,order_id:s.order_id,result:d})}catch(e){return json({success:!1,message:e.message,stack:e.stack},500)}}async function checkStatus(e,t){const s=new URL(e.url).searchParams.get("order_id");if(!s)return json({success:!1,message:"order_id required"},400);const n=await t.DB.prepare("SELECT * FROM orders WHERE order_id=?").bind(s).first();return n?json({success:!0,data:n}):json({success:!1,message:"Transaction not found"},404)}async function notification(e,t){try{const s=await e.json();if(await sha512(s.order_id+s.status_code+s.gross_amount+t.MIDTRANS_SERVER_KEY)!==s.signature_key)return json({success:!1,message:"Invalid Signature"},403);const n=(new Date).toISOString();return await t.DB.prepare("\nUPDATE orders\nSET\nstatus=?,\npayment_type=?,\ntransaction_id=?,\nupdated_at=?\nWHERE order_id=?\n").bind(s.transaction_status,s.payment_type||"",s.transaction_id||"",n,s.order_id).run(),json({success:!0})}catch(e){return json({success:!1,message:e.message},500)}}async function sha512(e){const t=(new TextEncoder).encode(e),s=await crypto.subtle.digest("SHA-512",t);return[...new Uint8Array(s)].map(e=>e.toString(16).padStart(2,"0")).join("")}

  5. Tempelkan seluruh kode tersebut ke editor.

  6. Klik Deploy untuk menyimpan perubahan.

Langkah 4 — Menambahkan Server Key Midtrans

Selanjutnya tambahkan Server Key dari akun Midtrans.

  1. Masuk ke menu Settings.

  2. Pilih Variables & Secrets.

  3. Klik Add Secret.

  4. Isi data berikut:

Nama Secret

MIDTRANS_SERVER_KEY

Value

Masukkan Server Key Midtrans Anda

  1. Klik Save.

Gunakan Sandbox Server Key untuk pengujian dan Production Server Key ketika website sudah siap menerima pembayaran dari pelanggan.

Langkah 5 — Menyalin URL Worker

Setelah Worker berhasil di-deploy, Cloudflare akan memberikan URL seperti berikut:

https://nstore-payment.namaanda.workers.dev

Salin URL tersebut karena akan digunakan pada pengaturan template NStore.

Langkah 6 — Mengatur Payment Gateway di Template

Masuk ke halaman pengaturan Template NStore, kemudian isi data berikut:

  • Aktifkan Midtrans

  • Masukkan Client Key Midtrans

  • Tempelkan URL Cloudflare Worker

  • Aktifkan Sandbox Mode (untuk pengujian)

Simpan seluruh pengaturan.

Langkah 7 — Uji Coba Pembayaran

Lakukan pengujian dengan langkah berikut:

  1. Buka toko online Anda.

  2. Tambahkan produk ke keranjang.

  3. Klik Checkout.

  4. Pilih metode pembayaran Midtrans.

  5. Klik Bayar Sekarang.

Apabila konfigurasi sudah benar, halaman pembayaran Midtrans akan muncul secara otomatis.

Langkah 8 — Mengaktifkan Mode Production

Setelah seluruh pengujian berhasil, lakukan perubahan berikut:

  • Nonaktifkan Sandbox Mode

  • Ganti Sandbox Client Key menjadi Production Client Key

  • Ganti Sandbox Server Key menjadi Production Server Key

Simpan kembali seluruh pengaturan.

Payment Gateway kini siap menerima pembayaran dari pelanggan.

Mengatasi Masalah

Halaman pembayaran tidak muncul

  • Pastikan Client Key benar.

  • Pastikan URL Cloudflare Worker sudah benar.

  • Pastikan Worker telah berhasil di-Deploy.

Invalid Token

Periksa kembali Server Key Midtrans yang digunakan.

Unauthorized

Pastikan Server Key sesuai dengan mode yang digunakan (Sandbox atau Production).

Gagal Terhubung ke Worker

Pastikan Cloudflare Worker masih aktif dan URL Worker telah dimasukkan dengan benar pada pengaturan template.

Selesai 🎉

Sekarang Payment Gateway Midtrans pada template NStore telah berhasil dikonfigurasi menggunakan Cloudflare Worker tanpa memerlukan VPS maupun layanan hosting tambahan.

Posting Komentar