177 lines (151 loc) · 4.87 KB

title	date
Payment Button	2020-04-05 18:33:00 UTC

Payment Button

Add a button on your website to your payment page.

Share your page

Payment Button, Share your payment page

Payment buttons allow you to redirect your visitors to your payment page.

        <div class="col-md-12">
            <div class="pl-md-5">

Add the below HTML code to your website (WIX,WordPress,..)

<style> .bubble-number { display: block; width: 50px; height: 50px; background: url(https://chatlio.com/img/bg-bubble-number.svg) no-repeat center; background-size: 50px; line-height: 50px; color: #fff; font-size: 1.25rem; font-weight: 700; text-align: center; position: absolute; top: -20px; right: 0; } .img-wrap { max-height: 220px; max-width: 360px; margin-left: auto; margin-right: auto; margin-bottom: 30px; border-radius: 10px; position: relative; } .img-wrap img { background: #f5f9fc; border-radius: 10px; max-width: 100%; height: auto; box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1); height: 160px; width: 400px; } </style> <style> .section-content .image-container { height: 400px; } .section-content .image-container .img-comments { z-index: 3; left: -100px; top: -40px; } .section-content .image-container img { position: absolute; width: 100%; max-width: 380px; } [class*=shadow] { transition: all .15s ease; } .section-content .image-container .img-blog { z-index: 4; left: 100px; top: 20px; } .profile-page .card-profile .card-profile-image img, .shadow { box-shadow: 0 15px 35px rgba(50,50,93,.1),0 5px 15px rgba(0,0,0,.07)!important; } rounded { border-radius: .25rem!important; } </style>

<script async src="//jsfiddle.net/payrequest/5o972wne/8/embed/html,result/dark/"></script> <script async="" src="https://static.codepen.io/assets/embed/ei.js"></script>

{% include payment-dashboard-block.html %}