Home / Examples

Examples & snippet builder

Build a button for your post, or copy a ready-made layout. Every preview on this page is live and runs in demo mode, so try them.

Snippet builder

Make your button

Where your fork is published, ending in /bkash-blogger-payment/
Price
Live preview · demo mode
Ready-made layouts

Copy a complete example

Replace YOUR-GITHUB-NAME with your GitHub username and paste into your post's HTML view.

Single product

A product card for an eBook, course or download.

Preview
<script src="https://YOUR-GITHUB-NAME.github.io/bkash-blogger-payment/blogger.js"></script>

<div style="max-width: 340px; margin: 24px auto; padding: 24px; border: 1px solid #e5e5e5; border-radius: 16px; text-align: center">
  <h3 style="margin: 0 0 4px">Premium eBook</h3>
  <p style="margin: 0 0 16px; font-size: 28px; font-weight: 700; color: #e2136e">৳500</p>
  <button data-bkash-amount="500" data-bkash-product="Premium eBook">Pay with bKash</button>
</div>

Pricing table

Several products on one page. Each button carries its own price and name.

Preview
<script src="https://YOUR-GITHUB-NAME.github.io/bkash-blogger-payment/blogger.js"></script>

<style>
  .bk-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; width: 100%; }
  .bk-plan { padding: 20px 16px; border: 1px solid #e5e5e5; border-radius: 14px; text-align: center; }
  .bk-plan h4 { margin: 0 0 2px; font-size: 17px; }
  .bk-plan p { margin: 0 0 14px; font-size: 24px; font-weight: 700; color: #e2136e; }
</style>

<div class="bk-plans">
  <div class="bk-plan">
    <h4>Basic</h4><p>৳300</p>
    <button data-bkash-amount="300" data-bkash-product="Basic Plan">Buy Basic</button>
  </div>
  <div class="bk-plan">
    <h4>Premium</h4><p>৳800</p>
    <button data-bkash-amount="800" data-bkash-product="Premium Plan">Buy Premium</button>
  </div>
  <div class="bk-plan">
    <h4>Ultimate</h4><p>৳1,500</p>
    <button data-bkash-amount="1500" data-bkash-product="Ultimate Plan">Buy Ultimate</button>
  </div>
</div>

Donation, any amount

The visitor types the amount. The input's min sets the smallest allowed donation.

Preview
<script src="https://YOUR-GITHUB-NAME.github.io/bkash-blogger-payment/blogger.js"></script>

<div style="max-width: 340px; margin: 24px auto; text-align: center">
  <h3 style="margin: 0 0 4px">Support this blog</h3>
  <p style="margin: 0 0 14px">Any amount from ৳10 helps.</p>
  <input id="donation-amount" type="number" min="10" value="100" inputmode="numeric"
    style="width: 100%; padding: 12px; margin-bottom: 12px; font-size: 18px; text-align: center; border: 1px solid #ccc; border-radius: 10px">
  <button data-bkash-amount-from="donation-amount" data-bkash-product="Donation" data-bkash-paid-text="Thank you!">Donate with bKash</button>
</div>

Reveal something after payment

Listen for bkash:success to show a thank-you note or a download link.

Preview
<script src="https://YOUR-GITHUB-NAME.github.io/bkash-blogger-payment/blogger.js"></script>

<button data-bkash-amount="250" data-bkash-product="Members Guide">Unlock the guide for ৳250</button>

<div id="paid-content" hidden>
  <h3>Thanks for your purchase!</h3>
  <p>Your transaction ID is <b id="paid-trx"></b>. We will email the guide within an hour.</p>
</div>

<script>
  document.addEventListener('bkash:success', function (event) {
    if (event.detail.product === 'Members Guide') {
      document.getElementById('paid-trx').textContent = event.detail.trxID;
      document.getElementById('paid-content').hidden = false;
    }
  });
</script>

Hidden content is still in the page source. For files worth protecting, send them by email after you've confirmed the transaction ID in your merchant portal or with /verify.

Your own style and a thank-you page

Add data-bkash-style="none" to keep your theme's look, and send buyers to a page after they pay.

Preview · redirect skipped
<script src="https://YOUR-GITHUB-NAME.github.io/bkash-blogger-payment/blogger.js"></script>

<a href="#" data-bkash-style="none" data-bkash-amount="1200" data-bkash-product="Consultation"
   data-bkash-success-url="/p/thank-you.html"
   style="display: inline-block; padding: 12px 22px; border: 2px solid #111; border-radius: 999px; color: #111; font-weight: 700; text-decoration: none">
  Book a consultation · ৳1,200 →
</a>

Blogger tips

Small things that save time.

  • Paste in HTML view and publish from there.Switching back to Compose view can reformat custom HTML.
  • Selling in many posts? Put the script in your theme once.Then each post only needs the <button> line. See the setup guide.
  • Using PRICES on the Worker? Keep product names identical.data-bkash-product="Premium eBook" must match the key "Premium eBook" exactly.
  • Home page shows several posts? That's fine.Buttons need no unique IDs, and the script only loads once.