ساخت یک سیستم پرداخت ساده با web3.js و csc api

,
1

با سلام خدمت جامعه توسعه دهندگان بلاکچین و قرار داد های هوشمند
من 0xlive هستم و در این تاپیک همونطور که در تاپیک قبلی گفتیم یک سیستم پرداخت ساده مبتنی بر وب رو با web3.js و coinex.net api پیاده سازی کنیم

نصب و اضافه کردن web3.js

برای نصب کردن این کتابخونه با استفاده از پکیج منیجر npm به این شکل عمل میکنیم:

npm install web3

و اگر از yarn استفاده میکنید به این شکل:

yarn add web3

و یا اگر میخواید از فایل پکیج شده استفاده کنید کافیه این تگ رو به بخش head اضافه کنید:

<script src="https://cdnjs.cloudflare.com/ajax/libs/web3/1.7.3/web3.min.js" integrity="sha512-Ws+qbaGHSFw2Zc1e7XRpvW+kySrhmPLFYTyQ95mxAkss0sshj6ObdNP3HDWcwTs8zBJ60KpynKZywk0R8tG1GA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

خیلی خب حالا میریم یک فایل html با نام payment.html میسازیم و و این کد رو درونش قرار میدیم:

<!DOCTYPE html>
<html>
<head>
<title>Payment Gateway</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/web3/1.7.3/web3.min.js" integrity="sha512-Ws+qbaGHSFw2Zc1e7XRpvW+kySrhmPLFYTyQ95mxAkss0sshj6ObdNP3HDWcwTs8zBJ60KpynKZywk0R8tG1GA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<<link rel="stylesheet" href="style.css">
</head>

<body>

     <section id="payment" class="payment">
<form class="credit-card">
  <div class="form-header">
    <h4 class="title">Payment</h4>
  </div>
  <div class="form-body">
    <input class="card-number" id="Amount" type="number" placeholder="Amount">
    <div class="date-field">
      </div>
    <button class="pay-button" type="submit"> <a href="#">Buy</a></button>
        <div id="status"></div>
  </div>
</form>
</section>

</body>
</html>

در کد بالا من یک سکشن ایجاد کردم و توی اون یک فرمی برای پرداخت ایجاد کردم
حالا میخوام با جاوا اسکریپت کاری کنم که کاربر مقداری که میخواد رو وارد کنه و بعد از زدن دکمه buy از متامسک اجازه اتصال بگیره و پرداخت رو انجام بده.

دسترسی کیف پول
از اونجایی که متامسک خودشو توی هر صفحه اینجکت میکنه ازش میخوایم که دسترسی اکانت به ما بده :


    window.addEventListener('load', async () => {
      if (window.ethereum) {
        window.web3 = new Web3(ethereum);
        try {
          await ethereum.eth_requestAccounts;
          initPayButton()
        } catch (err) {
          $('#status').html('User denied account access', err)
        }
      } else if (window.web3) {
        window.web3 = new Web3(web3.currentProvider)
        initPayButton()
      } else {
        $('#status').html('No Metamask (or other Web3 Provider) installed')
      }
    })

تو کد بالا ما اول درخواست اتصال کیف پول رو میدیم اگر کاربر دسترسی رو قطع کنه پیغام ندادن دسترسی چاپ بشه و اگر متامسک نصب نبود میگیم که متامسک نصب نیست

پرداخت

در بخش بعدی کد ما با DOM مقداری رو از ورودی میگیریم و به ادرسی که در payment address هست میریزیم
اگر که تراکنش موفقیت امیز بود میگه موفق بود و هش اون رو نمایش میده و برای احراز به pay.php میفرسته اگر نه میگه تراکنش با شکست مواجه شد

    const initPayButton = () => {
      $('.pay-button').click(() => {
        const paymentAddress = 'YOUR ADDRESS'
        const amountEth = document.getElementById("Amount").value;

        web3.eth.sendTransaction({
          to: paymentAddress,
          value: web3.toWei(amountEth, 'ether')
        }, function(err, transactionHash) {
    if (err) { 
        console.log('Payment failed', err)
            $('#status').html('Payment failed')
    } else {

 document.getElementById("status").innerHTML = transactionHash;
            $('#status').html('Payment successful')
 var httpc = new XMLHttpRequest(); 
    var url = "pay.php";
    httpc.open("POST", url, true);

    httpc.onreadystatechange = function() {.
        if(httpc.readyState == 4 && httpc.status == 200) {
            alert(httpc.responseText);
        }
    };
    httpc.send(transactionHash);
      }})

تقریبا کارمون با بخش کلاینت تموم شد میریم سراغ بک اند و pay.php

کار با api

ما برای کار کردن با api coinex.net نیاز به یک کلید داریم که نحوه گرفتنش رو در این تاپیک شرح دادم:

حالا نیاز داریم که pay.php رو پیکربندی کنیم:




<?php

$tx= $_POST['Amount'];

$curl = curl_init();
curl_setopt_array($curl, [
	CURLOPT_URL => "https://www.coinex.net/api/v1/transactions/".$tx,
	CURLOPT_RETURNTRANSFER => true,
	CURLOPT_FOLLOWLOCATION => true,
	CURLOPT_ENCODING => "",
	CURLOPT_MAXREDIRS => 10,
	CURLOPT_TIMEOUT => 30,
	CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
	CURLOPT_CUSTOMREQUEST => "GET",
	CURLOPT_HTTPHEADER => [
		"apikey: YOUR KEY",
	],
]);

$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
$data = json_decode($response, true);


if ($err) {
	echo "cURL Error #:" . $err;
} else {
	if  (strlen($data["data"]["error"]) == 0) {
            echo "successful";
    else{
        echo"a mistake was made";
}}}
?>

توی کد بالا ما هش تراکنش رو میگیریم و به api url الصاق میکنیم و با یک ریکوئست با متود GET و کلید خودمون دیتا رو دریافت میکنیم
اون رو دیکود میکنیم
اگر اتصال ناموفق بود پیغام خطا و خطا رو به کاربر نشون میدیم و اگر موفق بود طول ایتم error رو بررسی میکنیم اگر برابر صفر بود یعنی تراکنش با موفقیت انجام شده و اگر مقدار داشت تراکنش با موفقیت با شکست مواجه شده :smiley:

تبریک میگم ما یک سیستم پرداخت ساده ساختیم که تراکنشی که کاربر با متامسک اون رو انجام داده رو احراز میکنه :partying_face:

1 پسندیده