Easy Tutorial
❮ Verilog2 Integrated Design While Explain Programmer Alive ❯

Website Donation Button Creation

Category Programming Technology

This article introduces how to add a donation button to your website, supporting Alipay and WeChat.

The following functional code implementation is based on jQuery.

Remember to replace the payment QR code in the code with your own.

Image assets download: Image Assets

Complete HTML download: dashang.html.zip

You can preview the effect first:

Donate

HTML Code

<div class="content">
<p><a href="javascript:void(0)" onclick="dashangToggle()" class="dashang" title="Donate, support me">Donate</a></p>
<div class="hide_box"></div>
<div class="shang_box">
    <a class="shang_close" href="javascript:void(0)" onclick="dashangToggle()" title="Close"><img decoding="async" src="https://static.tutorialpro.org/images/dashang/close.jpg" alt="Cancel" /></a>

    <div class="shang_tit">
        <p>Thank you for your support, I will keep going!</p>
    </div>
    <div class="shang_payimg">
        <img decoding="async" src="https://static.tutorialpro.org/images/dashang/alipayimg.png" alt="Scan to support" title="Scan" />
    </div>
        <div class="pay_explain">Scan to donate, you decide the amount</div>
    <div class="shang_payselect">
        <div class="pay_item checked" data-id="alipay">
            <span class="radiobox"></span>
            <span class="pay_logo"><img decoding="async" src="https://static.tutorialpro.org/images/dashang/alipay.jpg" alt="Alipay" /></span>
        </div>
        <div class="pay_item" data-id="weipay">
            <span class="radiobox"></span>
            <span class="pay_logo"><img decoding="async" src="https://static.tutorialpro.org/images/dashang/wechat.jpg" alt="WeChat" /></span>
        </div>
    </div>
    <div class="shang_info">
        <p>Open <span id="shang_pay_txt">Alipay</span> to scan, and you can start donating</p>
        <p>Powered by <a href="http://www.tutorialpro.org" target="_blank" title="tutorialpro.org">tutorialpro.org</a>, learning is not just about technology, it's about dreams too!</p>
    </div>
</div>
</div>

CSS Code

.content{width:80%;margin:10px auto;}
.hide_box{z-index:999;filter:alpha(opacity=50);background:#666;opacity: 0.5;-moz-opacity: 0.5;left:0;top:0;height:99%;width:100%;position:fixed;display:none;}
.shang_box{width:540px;height:540px;padding:10px;background-color:#fff;border-radius:10px;position:fixed;z-index:1000;left:50%;top:50%;margin-left:-280px;margin-top:-280px;border:1px dotted #dedede;display:none;}
.shang_box img{border:none;border-width:0;}
.dashang{display:block;width:100px;margin:5px auto;height:25px;line-height:25px;padding:10px;background-color:#E74851;color:#fff;text-align:center;text-decoration:none;border-radius:10px;font-weight:bold;font-size:16px;transition: all 0.3s;}
.dashang:hover{opacity:0.8;padding:15px;font-size:18px;}
.shang_close{float:right;display:inline-block;}
        .shang_logo{display:block;text-align:center;margin:20px auto;}
.shang_tit{width: 100%;height: 75px;text-align: center;line-height: 66px;color: #a3a3a3;font-size: 16px;background: url('/dsimg/cy-reward-title-bg.jpg');font-family: 'Microsoft YaHei';margin-top: 7px;margin-right:2px;}
.shang_tit p{color:#a3a3a3;text-align:center;font-size:16px;}
.shang_payimg{width:140px;padding:10px;border:6px solid #EA5F00;margin:0 auto;border-radius:3px;height:140px;}
.shang_payimg img{display:block;text-align:center;width:140px;height:140px; }
.pay_explain{text-align:center;margin:10px auto;font-size:12px;color:#545454;}
.radiobox{width: 16px;height: 16px;background: url('https://static.tutorialpro.org/images/dashang/radio2.jpg');display: block;float: left;margin-top: 5px;margin-right: 14px;}
.checked .radiobox{background:url('https://static.tutorialpro.org/images/dashang/radio1.jpg');}
.shang_payselect{text-align:center;margin:0 auto;margin-top:40px;cursor:pointer;height:60px;width:280px;}
.shang_payselect .pay_item{display:inline-block;margin-right:10px;float:left;}
.shang_info{clear:both;}
.shang_info p,.shang_info a{color:#C3C3C3;text-align:center;font-size:12px;text-decoration:none;line-height:2em;}

JavaScript Code

$(function(){
    $(".pay_item").click(function(){
        $(this).addClass('checked').siblings('.pay_item').removeClass('checked');
        var dataid=$(this).attr('data-id');
        $(".shang_payimg img").attr("src","https://static.tutorialpro.org/images/dashang/"+dataid+"img.png");
        $("#shang_pay_txt").text(dataid=="alipay"?"Alipay":"WeChat");
    });
});
function dashangToggle(){
    $(".hide_box").fadeToggle();
    $(".shang_box").fadeToggle();
}
❮ Verilog2 Integrated Design While Explain Programmer Alive ❯