hi, kali ini admin akan membagi cara membuat menu Pembayaran/Pebelian dengan menggunakan midtrans dengan menggunakan Payment Link Otomatis.
Yang jelas anda harus mendaftar terlebih dahulu untuk account midtrans dan gunakan kode berikut untuk melakukan penjualan. berhubung ini adalah pembelajaran Admin menggunakan Environtment Sandbox dan jika anda sudah siap jualan silahkan gunakan Environtent Production.
Setting
Sebelumnya anda harus mendapatkan API Keys di menu Setting dan Access Keys pilih Server Key silahkan di copy dan gantikan kode dibawah dengan server Key anda.
<style>
/*pricing table*/
.tableWrap{position:relative;width:350px;background:#fff;border-radius:16px;padding:30px;box-shadow:3px 5px 30px 5px rgba(46,56,77,.1);margin:auto}
.tableWrap .tab{height:55px;display:flex;align-items:center;border:1px solid #ccc;border-radius:30px;position:relative}
.tab label{height:100%;z-index:2;width:30%;display:flex;cursor:pointer;font-size:15px;position:relative;align-items:center;justify-content:center;transition:color 0.3s ease}
#tab-1:checked ~ .tab .tab-1,#tab-2:checked ~ .tab .tab-2,#tab-3:checked ~ .tab .tab-3{color:#fefefe}
.tab label:nth-child(2){width: 40%}
.tab .tabSlider{position:absolute;height:85%;border-radius:inherit;background:#f89000;opacity:.8;transition:all 0.3s ease}
#tab-1:checked ~ .tab .tabSlider{left: 0%;width: 90px;transform: translateX(5%)}
#tab-2:checked ~ .tab .tabSlider{left: 50%;width: 120px;transform: translateX(-50%)}
#tab-3:checked ~ .tab .tabSlider{left: 100%;width: 95px;transform: translateX(-105%)}
.tableWrap input[type='radio']{display: none}
.tableCard{overflow: hidden}
.tableCard .tableCards{display:flex;width:300%}
.tableCards .tableS{width:33.4%}
.tableCards .tableRow-1{transition: all 0.3s ease}
#tab-1:checked ~ .tableCard .tableCards .tableRow-1{margin-left: 0%}
#tab-2:checked ~ .tableCard .tableCards .tableRow-1{margin-left: -33.4%}
#tab-3:checked ~ .tableCard .tableCards .tableRow-1{margin-left: -66.8%}
.tableS .tableDetail{margin:20px 0;text-align:center;padding-bottom:25px;border-bottom:1px solid #e6e6e6}
.tableDetail .tableHarga{font-size:55px;font-weight:600;position:relative}
.tableDetail .tableHarga:before,.tableDetail .tableHarga:after{position:absolute;font-weight:400}
.tableDetail .tableHarga:before{content:'Rp';left:-30px;top:17px;font-size:20px}
.tableDetail .tableHarga:after{content:'rb';right:-27px;bottom:12px;font-size:23px;font-weight:600}
.tableDetail p{font-size:18px;margin-top:5px}
.tableS .tableContent li{display:flex;font-size:15px;list-style:none;margin-bottom:10px;align-items:center}
.tableContent li svg{flex-shrink:0;height:20px;margin-right:10px;margin-top:4px;stroke:#f89000;fill:none;}
.tableContent li span{margin-left:10px}
.tableWrap .buttonx{width:90%;border-radius:25px;border:1px #ccc solid;outline:none;height:50px;font-size:18px;color:#444;cursor:pointer;margin:20px 25px 20px 10px;background:transparent;transition:transform 0.3s ease;align-items:center}
.tableWrap .buttonx:hover{transform:scale(0.98);border:1px #f89000 solid;color:#f89000;outline:none}
/* CSS darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */
.darkMode .tableWrap{background-color:#1e1e1e;color:#fefefe}
.darkMode .tableWrap .tab,.darkMode .tableS .tableDetail,.darkMode .tableWrap .buttonx{border-color:rgba(255,255,255,.1)}
</style>
<div class='tableWrap'>
<input id='tab-1' name='tabSlider' type='radio'/>
<input checked='' id='tab-2' name='tabSlider' type='radio'/>
<input id='tab-3' name='tabSlider' type='radio'/>
<div class='tab'>
<label for='tab-1' class='tab-1'>Free</label>
<label for='tab-2' class='tab-2'>Personal</label>
<label for='tab-3' class='tab-3'>Developer</label>
<div class='tabSlider'></div>
</div>
<div class='tableCard'>
<div class='tableCards'>
<div class='tableS tableRow-1'>
<div class='tableDetail'>
<span class='tableHarga'>0</span>
<p>Pemakaian Pribadi</p>
</div>
<ul class='tableContent'>
<li>
<svg viewBox='0 0 24 24'><circle cx='12' cy='12' r='10'></circle><line x1='15' y1='9' x2='9' y2='15'></line><line x1='9' y1='9' x2='15' y2='15'></line></svg>
<span>Lisensi</span></li>
<li><svg viewBox='0 0 24 24'><circle cx='12' cy='12' r='10'></circle><line x1='15' y1='9' x2='9' y2='15'></line><line x1='9' y1='9' x2='15' y2='15'></line></svg>
<span>Support</span></li>
<li><svg viewBox='0 0 24 24'><circle cx='12' cy='12' r='10'></circle><line x1='15' y1='9' x2='9' y2='15'></line><line x1='9' y1='9' x2='15' y2='15'></line></svg>
<span>Gratis Update Versi Terbaru</span></li>
<li><svg viewBox='0 0 24 24'><circle cx='12' cy='12' r='10'></circle><line x1='15' y1='9' x2='9' y2='15'></line><line x1='9' y1='9' x2='15' y2='15'></line></svg><span>Hapus Cridit Link</span></li>
</ul>
<button onclick="createPaymentLink()" class='buttonx'>Dapatkan Sekarang</button>
</div>
<div class='tableS'>
<div class='tableDetail'>
<span class='tableHarga'>100</span>
<p>Pemakaian Pribadi</p>
</div>
<ul class='tableContent'><li>
<svg viewbox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'></path><polyline points='23 3 12 14 9 11'></polyline></svg>
<span>Max 3 Domain</span></li>
<li><svg viewbox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'></path><polyline points='23 3 12 14 9 11'></polyline></svg>
<span>Support 1 Bulan</span></li>
<li><svg viewbox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'></path><polyline points='23 3 12 14 9 11'></polyline></svg>
<span>Gratis Update Versi Terbaru</span></li>
<li><svg viewbox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'></path><polyline points='23 3 12 14 9 11'></polyline></svg>
<span>Hapus Cridit Link</span></li>
</ul>
<form id="blogPostForm" class="custom-form" onsubmit="event.preventDefault(); createPaymentLink();">
<center>
<input type="text" id="nama" name="nama" placeholder="Nama Anda" required pattern="[^<>]+" oninvalid="this.setCustomValidity('Input tidak boleh mengandung karakter HTML seperti < atau >')" oninput="this.setCustomValidity('')">
<input type="text" id="hp" name="hp" placeholder="+628.." required pattern="[^<>]+" oninvalid="this.setCustomValidity('Input tidak boleh mengandung karakter HTML seperti < atau >')" oninput="this.setCustomValidity('')">
<input type="email" id="email" name="email" placeholder="email@gmail.com" required pattern="[^<>]+" oninvalid="this.setCustomValidity('Input tidak boleh mengandung karakter HTML seperti < atau >')" oninput="this.setCustomValidity('')">
</center>
<button type="submit" class="buttonx">Dapatkan Sekarang</button>
</form>
</div>
<div class='tableS'>
<div class='tableDetail'>
<span class='tableHarga'>1.500</span>
<p>Jual Kembali</p>
</div>
<ul class='tableContent'>
<li><svg viewbox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'></path><polyline points='23 3 12 14 9 11'></polyline></svg>
<span>Unlimited Lisensi</span></li>
<li><svg viewbox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'></path><polyline points='23 3 12 14 9 11'></polyline></svg>
<span>Support 12 Bulan</span></li>
<li><svg viewbox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'></path><polyline points='23 3 12 14 9 11'></polyline></svg>
<span>Gratis Update Versi Terbaru</span></li>
<li><svg viewbox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'></path><polyline points='23 3 12 14 9 11'></polyline></svg>
<span>Hapus Cridit Link</span></li>
</ul>
<button onclick="createPaymentLink()" class='buttonx'>Dapatkan Sekarang</button>
</div>
</div>
</div>
</div>
<script>
async function createPaymentLink() {
const serverKey = 'GANTI DENGAN SERVER KEY ANDA'; // Ganti dengan Server Key Anda
const url = 'https://api.sandbox.midtrans.com/v1/payment-links'; // Gunakan URL sandbox atau production sesuai kebutuhan
// Encode Server Key to Base64
const authString = 'Basic ' + btoa(serverKey + ':');
const randomString = generateRandomString(10);
const fullName = document.getElementById('nama').value;
const email = document.getElementById('email').value;
const handphone = document.getElementById('hp').value;
// Pisahkan nama menjadi array kata
const nameParts = fullName.trim().split(' ');
const firstName = nameParts[0];
const lastName = nameParts.length > 1 ? nameParts[nameParts.length - 1] : '';
const requestBody = {
transaction_details: {
order_id: 'codeblog' + randomString,
gross_amount: 190000,
payment_link_id: 'web-codeblog' + randomString,
},
credit_card: {
secure: true
},
usage_limit: 5,
expiry: {
duration: 30,
unit: 'days'
},
item_details: [
{
id: 'tixID-' + randomString,
name: 'Exclusive Tour Concert Day 1',
price: 95000,
quantity: 2
}
],
customer_details: {
first_name: firstName,
last_name: lastName,
email: email,
phone: handphone,
notes: 'Thank you for your order. Please follow the instructions to complete payment.'
}
};
try {
const response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'Authorization': authString
},
body: JSON.stringify(requestBody)
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
console.log('Payment Link Response:', data);
redirectToPaymentUrl(data); // Mengarahkan ke halaman payment_url dengan data yang diterima
} catch (error) {
console.error('Error creating payment link:', error);
}
}
// Fungsi untuk menghasilkan string acak
function generateRandomString(length) {
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let result = '';
for (let i = 0; i < length; i++) {
result += characters.charAt(Math.floor(Math.random() * characters.length));
}
return result;
}
// Fungsi untuk mengarahkan ke halaman payment_url
function redirectToPaymentUrl(response) {
if (response && response.payment_url) {
window.location.href = response.payment_url;
} else {
console.error('Payment URL not found in the response');
}
}
</script>
silahkan lihat demo di Sandbox Midtrans
Post a Comment