Requirement

  • Magento Checkout

  • Swift PWA Checkout

Xendit

Xendit merupakan salah satu payment gateway yang didalamnya support beberapa payment methods yang tersedia pada Swift untuk memudahkan dalam melakukan transaksi pembayaran. Pada Xendit terdapat kategori pembayaran yang di support oleh Xendit. Di Swift kategori Xendit yang dapat digunakan adalah:

  1. Credit Card

  2. Virtual Account

  3. Retails Outlets

  4. E-Wallets

  5. Direct Debit

  6. QR - Codes


Konfigurasi Xendit

Konfigurasi Xendit dilakukan pada halaman Dashboard Xendit, ikuti langkah berikut untuk melakukan konfigurasi pada xendit:

  1. Silakan membuat akun Xendit di Daftar Xendit Dashboard. Anda juga dapat berkoordinasi terlebih dahulu

dengan Developer dalam integrasi Xendit. Pastikan Anda juga sudah dapat mendapat permission Admin atau Manage Tech.


Gambar 1: Tampilan pada halaman Xendit Dashboard > API Keys bagian menu Xendit Mode

  1. Pilih Payment Mode pada Xendit , yaitu Live Mode atau Test Mode pada bagian kiri atas.


Gambar 2: Tampilan pada halaman Xendit Dashboard > API Keys pada bagian Generate Secret Key

Test Mode: Saat akun Anda masih dalam mode uji, Anda hanya dapat menggunakan development key untuk transaksi pengujian menggunakan API dan  tidak membuat transaksi nyata di pada dashboard Xendit. Dengan kata lain Test Mode digunakan untuk tahap testing saja.

Live Mode: ketika pada Live mode maka akan menggunakan API Key Production dan pesanan akan masuk pada sistem bank.


  1. Untuk membuat Secret API Key , masuk ke Dashboard Xendit lalu pilih API Key > Generate secret key.


Gambar 3: Tampilan pada halaman Xendit Dashboard > API Keys pada bagian Generate API Key

  1. Isi dan pilih sesuai dengan kebutuhan dalam memilih pilihan permission yang diberikan.

Anda dapat melakukan konsultasi dengan Developer tentang akses yang diberikan. 

Catatan: Untuk kebutuhan integrasi dengan Swift Anda dapat memilih option Write.


Terdapat Permissions yang Anda pilih:

  • None : tidak memberikan akses API terhadap produk tersebut.

  • Read : pilihan ini adalah memberikan akses API untuk membaca data saja pada produk yang Anda tentukan.

Anda dapat memberikan akses Read ketika Anda hanya ingin, sebagai contoh, mengecek saldo akun Anda atau mengecek suatu detail pembayaran.

  • Write : Anda memberikan akses API untuk membaca dan mengubah data pada produk yang Anda tentukan.

Anda dapat memberikan akses Write ketika Anda ingin membaca dan juga melakukan suatu aksi tertentu seperti membuat Invoice, membuat Disbursement, atau mengecek VA.


Gambar 4: Tampilan popup Success Created untuk Secret API Key

  1. Anda akan mendapatkan Secret API Key dari popup yang muncul.


Gambar 5: Tampilan pada halaman API Keys bagian Public Key

  1. Selanjutnya adalah Public API Key. Masih pada halaman yang sama, scroll down halaman API Key.

Konfigurasi General Xendit di Magento


Gambar 6: Tampilan pada halaman Backoffice > Stores > Configuration > Sales > Payment Methods

  1. Silakan masuk ke halaman Backoffice/Admin

  2. Pilih menu Stores > Configuration

  3. Sales > Payment Methods

  4. Pilih menu Xendit

  5. Pilih dan isi required fields untuk konfigurasi modul Xendit


Manage Payment Gateway Connection 


Gambar 7: tampilan pada menu Sales > Payment Methods > xendit

  • Enable : pilih Yes untuk mengaktifkan modul Xendit.

  • Payment Mode : terdapat dua pilih yaitu Test dan Live. Pilih sesuai dengan kebutuhan, j

ika ingin menggunakan untuk testing Xendit pilih Test. 


Gambar 8: Tampilan pada menu Sales > Payment Methods > xendit

  • Test - Public Key : isi Public Key yang didapatkan pada Dashboard Xendit. 

  • Test - Private Key : isi Private Key yang didapatkan pada Dashboard Xendit.

Catatan: untuk Private Key dan Public Key sesuaikan dengan Payment Mode yang digunakan. Apabila Test gunakan Private dan Public Key dari mode Test dan sebaliknya. Anda dapat membaca lagi pada langkah Integrasi Xendit.


  • User ID : Anda bisa mencantumkan User ID dengan menggunakan ID sub-account Xenplatform yang sudah

dibuatkan oleh pihak Icube atau Swift.

Catatan: Xendit mempunyai fitur yaitu Xenplatfrom. Pada fitur tersebut memungkinkan dalam satu (1) akun Xendit dapat memiliki Sub-Account. Pada ICUBE, Xenplatfrom terdapat Master Account dan Sub-Account. Master Account dimiliki oleh Team ICUBE dan Sub-Account dipegang oleh client Icube. ICUBE akan membuatkan Sub-Account Xenplatfrom untuk client. Silakan kontak Team Icube untuk registrasi Sub-Account. Client cukup provide email, dan nantinya akan menerima email invitation untuk menjadi Sub-Account ICUBE. Client cukup mengikuti proses registrasi dari link invitation dari email. 

Apabila akun client terdaftar sebagai Sub-Account, maka dana dari customer tidak akan langsung masuk ke akun client, melainkan ke akun ICUBE. ICUBE akan memproses pencairan dana tersebut.  Lebih detailnya tentang xenplatform, Anda dapat melihat dokumentasi berikut: Xenplatfrom.



Gambar 9: Tampilan pada menu Sales > Payment Methods > xendit

  • Payment Success URL : isi dengan url halaman ketika berhasil dalam melakukan place order  

dengan Xendit.  (Khusus untuk PWA Checkout atau Full PWA )



Gambar 10: tampilan pada menu Sales > Payment Methods > xendit

  • Payment Failure URL : isi dengan url halaman ketika tidak berhasil dalam melakukan place order  

dengan Xendit. Akan mengarahkan user pada halaman tertentu ketika gagal melakukan pembayaran menggunakan Xendit. (Khusus untuk PWA Checkout atau Full PWA )





Gambar 11: Tampilan pada menu Sales > Payment Methods > xendit

  • Send Email Notification : digunakan untuk memberikan notifikasi dengan email ketika berhasil

melakukan place order menggunakan Bank Transfer.

Contoh Email notifikasi:


Gambar 12: Tampilan dari email notifikasi yang dikirimkan oleh Xendit


Kategori Pembayaran di Xendit

  1. Credit Card

Metode pembayaran Credit Card atau kartu kredit dengan Xendit mengakomodasi & menerima semua kartu kredit dan kartu debit dengan logo Visa, Mastercard, JCB dan Amex. Ini termasuk semua kartu yang diterbitkan oleh bank Indonesia dan asing. Pada Credit Card terdapat metode pembayaran yang dapat digunakan yaitu Credit & Debit Card.


Gambar 13: Tampilan gambar logo Credit & Debit Card

Flowchart


Gambar 14: Tampilan flowchart metode pembayaran dengan Credit Card

Konfigurasi Credit & Debit Card

Berikut merupakan konfigurasi yang harus Anda isi untuk menggunakan Credit & Debit Card di Swift. Berikut langkah untuk konfigurasi untuk payment yang masuk dalam kategori Credit & Debit Card:

  1. Silakan masuk ke halaman Backoffice/Admin

  2. Pilih menu Stores > Configuration > Sales > Payment Methods

  3. Pilih menu Xendit > Other Configuration > Credit Card


Gambar 15: tampilan pada menu Other Configuration bagian Credit & Debit Card

  • Anda dapat memilih metode pembayaran yang akan digunakan dengan pilih Yes pada bagian Enable dan

pilih No untuk disable metode pembayaran tersebut.


Gambar 16: tampilan pada menu Other Configuration bagian Credit & Debit Card

  • Description digunakan untuk menambahkan kalimat ketika salah satu metode pembayaran dipilih.


Gambar 17: tampilan pada menu Other Configuration bagian Credit & Debit Card

  • Pada konfigurasi terdapat Minimum Order Total dan Maximum Order Total.

Anda dapat menambahkan limit transaksi yang dapat menggunakan metode pembayaran yang dipilih.

Tampilan popup pembayaran di halaman Checkout:




Gambar 18: Tampilan popup pembayaran Credit & Debit Card di halaman Checkout


  1. Virtual Account

Virtual Account dengan Xendit mengakomodasi dengan menghasilkan & mengaktifkan Nomor Virtual Account lebih cepat. Setelah pembayaran dilakukan oleh pembeli, status pembayaran secara otomatis terkonfirmasi & berubah menjadi terbayar. Pembayaran dari berbagai bank dapat dikenali dan diterima secara otomatis dan mudah hanya dengan satu Virtual Account dari Xendit, tanpa harus menggunakan rekening dari berbagai bank. Pada kategori Virtual Account terdapat payment yang di support oleh Xendit yaitu BCA, BNI, BRI, Mandiri dan Permata.


 
 
 
  

Gambar 19: Tampilan gambar logo bank

Flowchart


Gambar 20: Tampilan flowchart metode pembayaran dengan Virtual Account

Konfigurasi Virtual Accounts

Berikut langkah untuk konfigurasi untuk payments yang masuk dalam kategori Virtual Account:

  1. Silakan masuk ke halaman Backoffice/Admin

  2. Pilih menu Stores > Configuration > Sales > Payment Methods

  3. Pilih menu Xendit > Other Configuration > Virtual Accounts


Gambar 21: tampilan pada menu Other Configuration bagian Virtual Accounts

  • Anda dapat memilih metode pembayaran yang akan digunakan dengan pilih Yes pada bagian Enable dan

pilih No untuk disable metode pembayaran tersebut.


Gambar 22: tampilan pada menu Other Configuration bagian Virtual Accounts

  • Description digunakan untuk menambahkan kalimat ketika salah satu metode pembayaran dipilih.


Gambar 23: tampilan pada menu Other Configuration bagian Virtual Accounts

  • Pada konfigurasi terdapat Minimum Order Total dan Maximum Order Total. Anda dapat menambahkan

limit transaksi yang dapat menggunakan metode pembayaran yang dipilih.

Tampilan halaman pembayaran Xendit setelah Place Order dengan Virtual Account:


Gambar 24: Tampilan halaman pembayaran Xendit setelah Place Order dengan Virtual Account


Gambar 25: Tampilan Success Page pembayaran Xendit setelah Place Order dengan Virtual Account



  1. Retails Outlets

Memberikan kemudahan kepada pelanggan dengan melakukan pembayaran melalui Indomaret & Alfamart yang tersebar luas di Indonesia.


 
 

Gambar 26: Tampilan gambar logo Alfamart dan Indomaret

Flowchart


Gambar 27: Tampilan flowchart metode pembayaran dengan Retail Outlets

Konfigurasi Retails Outlets

Berikut langkah untuk konfigurasi untuk payments yang masuk dalam kategori Retail Outlets:

  1. Silakan masuk ke halaman Backoffice/Admin

  2. Pilih menu Stores > Configuration > Sales > Payment Methods

  3. Pilih menu Xendit > Other Configuration > Retails Outlets


Gambar 28: tampilan pada menu Other Configuration bagian Retail Outlets

  • Anda dapat memilih metode pembayaran yang akan digunakan dengan pilih Yes pada bagian Enable dan

pilih No untuk disable metode pembayaran tersebut.


Gambar 29: tampilan pada menu Other Configuration bagian Retail Outlets

  • Description digunakan untuk menambahkan kalimat ketika salah satu metode pembayaran dipilih.


Gambar 30: tampilan pada menu Other Configuration bagian Retail Outlets

  • Pada konfigurasi terdapat Minimum Order Total dan Maximum Order Total. Anda dapat menambahkan

limit transaksi yang dapat menggunakan metode pembayaran yang dipilih.

Tampilan halaman pembayaran Xendit setelah Place Order dengan Retails Outlets:


Gambar 31: Tampilan halaman pembayaran Xendit setelah Place Order dengan Retails Outlets


Gambar 32: Tampilan Success Page pembayaran Xendit setelah Place Order dengan Retails Outlets

  1. E-Wallets

Jenis pembayaran yang mengakomodasi dengan menggunakan pembayaran non-tunai melalui Dana, OVO & Linkaja dapat menjadi alat pembayaran untuk user atau customers. 


Gambar 33: Tampilan gambar logo E-Wallets yang dapat digunakan di Swift

Flowchart


Gambar 34: Tampilan flowchart metode pembayaran dengan E-Wallets

Konfigurasi E-Wallets

Berikut langkah untuk konfigurasi untuk payments yang masuk dalam kategori E-Wallets:

  1. Silakan masuk ke halaman Backoffice/Admin

  2. Pilih menu Stores > Configuration > Sales > Payment Methods

  3. Pilih menu Xendit > Other Configuration > E-Wallets


Gambar 35: tampilan pada menu Other Configuration bagian E-Wallets

  • Anda dapat memilih metode pembayaran yang akan digunakan dengan pilih Yes pada bagian Enable dan

pilih No untuk disable metode pembayaran tersebut.


Gambar 36: tampilan pada menu Other Configuration bagian E-Wallets

  • Description digunakan untuk menambahkan kalimat ketika salah satu metode pembayaran dipilih.


Gambar 37: tampilan pada menu Other Configuration bagian E-Wallets

  • Pada konfigurasi terdapat Minimum Order Total dan Maximum Order Total. Anda dapat menambahkan

limit transaksi yang dapat menggunakan metode pembayaran yang dipilih.

Tampilan halaman pembayaran Xendit setelah Place Order dengan E-Wallets:


Gambar 38: Tampilan halaman pembayaran Xendit setelah Place Order dengan E-Wallets


Gambar39: Tampilan Success Page pembayaran Xendit setelah Place Order dengan E-Wallets


  1. Direct Debit

Dengan Direct Debit, memungkinkan untuk menerima pembayaran perbankan online yang dilakukan melalui Aplikasi Bank. Untuk saat ini Xendit hanya mendukung Direct Debit BRI.


Gambar 40: Tampilan logo Bank BRI

Flowchart


Gambar 41: Tampilan flowchart metode pembayaran dengan Direct Debit


Konfigurasi Direct Debit

Berikut langkah untuk konfigurasi untuk payments yang masuk dalam kategori Direct Debit:

  1. Silakan masuk ke halaman Backoffice/Admin

  2. Pilih menu Stores > Configuration > Sales > Payment Methods

  3. Pilih menu Xendit > Other Configuration > Direct Debit


Gambar 42: tampilan pada menu Other Configuration bagian Direct Debit

  • Anda dapat memilih metode pembayaran yang akan digunakan dengan pilih Yes pada bagian Enable dan

pilih No untuk disable metode pembayaran tersebut.


Gambar 43: tampilan pada menu Other Configuration bagian Direct Debit

  • Description digunakan untuk menambahkan kalimat ketika salah satu metode pembayaran dipilih.


Gambar 44: tampilan pada menu Other Configuration bagian Direct Debit

  • Pada konfigurasi terdapat Minimum Order Total dan Maximum Order Total. Anda dapat menambahkan

limit transaksi yang dapat menggunakan metode pembayaran yang dipilih.

Tampilan popup pembayaran Xendit setelah Place Order dengan Direct Debits:


Gambar 45: Tampilan popup pembayaran Xendit menggunakan Direct Debit di halaman Checkout


  1. QR - Codes

QR Codes memungkinkan user atau customers untuk menerima pembayaran melalui QR- Codes. Pada Xendit dengan QR Codes dapat membantu Anda menerima pembayaran melalui beragam aplikasi eWallet seperti OVO, GoPay, DANA, dan LinkAja dan aplikasi mobile banking seperti BCA. 

Flowchart


Gambar 46: Tampilan flowchart metode pembayaran dengan QR Codes


Konfigurasi QR - Codes

Berikut langkah untuk konfigurasi untuk payments yang masuk dalam kategori QR - Codes:

  1. Silakan masuk ke halaman Backoffice/Admin

  2. Pilih menu Stores > Configuration > Sales > Payment Methods

  3. Pilih menu Xendit > Other Configuration > QR Codes


Gambar 47: tampilan pada menu Other Configuration bagian QR Codes

  • Anda dapat memilih metode pembayaran yang akan digunakan dengan pilih Yes pada bagian Enable dan

pilih No untuk disable metode pembayaran tersebut.


Gambar 48: tampilan pada menu Other Configuration bagian QR Codes

  • Description digunakan untuk menambahkan kalimat ketika salah satu metode pembayaran dipilih.


Gambar 49: tampilan pada menu Other Configuration bagian QR Codes

  • Pada konfigurasi terdapat Minimum Order Total dan Maximum Order Total. Anda dapat menambahkan

limit transaksi yang dapat menggunakan metode pembayaran yang dipilih.


Gambar 50: tampilan pada menu Other Configuration bagian QR Codes

  • Tambahan untuk QR Codes terdapat pengaturan QR Code Image Width dan QR Code Image Height

yang digunakan untuk mengatur ukuran dari QR Code yang ditampilkan pada Frontend ketika melakukan transaksi pemesanan.

Tampilan popup pembayaran Xendit setelah Place Order dengan Direct Debits:



Gambar 51: Tampilan popup QR Codes pada frontend setelah Place Order di halaman Checkout


Gambar 52: Tampilan QR Codes pada frontend di halaman Thankyou Page

Konfigurasi Checkout


Gambar 53: Tampilan pada halaman Backoffice > Stores > Configuration > Sales > Checkout

  1. Silakan masuk ke halaman Backoffice/Admin

  2. Pilih menu Stores > Configuration

  3. Sales > Checkout

  4. Pada bagian Payment Grouping tambahkan tambahkan kode payment dari Xendit yang dapat Anda

lihat di Payment dan Shipment Grouping.


Gambar 54: Tampilan pada menu Sales > Checkout

Masukan teks sesuai dengan group pembayaran yang dibutuhkan pada bagian form Payment Grouping.

Contoh :

{"pg-others":"cc,alfamart,bcava,bniva,briva,mandiriva,permatava,dana,indomaret,linkaja,ovo,qr_codes”}


Catatan: Anda harus memastikan pada bagian Konfigurasi Payments Methods sudah Enable ketika ingin memunculkan payments yang di inginkan di Payment Grouping.


  1. Klik Save Config

Catatan: Untuk informasi Payment Grouping lebih lengkapnya bisa dilihat di Payment dan Shipment Grouping.