🚀 Setup Guide

Follow these simple steps to integrate bKash payments into your Blogger website.

Prerequisites

Step 1: Get bKash Credentials

  1. Visit the bKash Developer Portal
  2. Sign in or create a new account
  3. Navigate to your dashboard and obtain:
    • Merchant Number
    • App Key
    • App Secret
    • Username
    • Password
  4. Start with sandbox credentials for testing

Step 2: Download Files

  1. Clone or download this repository from GitHub
  2. You need these files:
    • bkash-payment.js - Main payment script
    • blogger.js - Blogger helper functions
    • popup.html - Payment popup interface
    • popup.css - Popup styling

Step 3: Host Files

You have two options for hosting the files:

Option A: Use GitHub Pages (Recommended)

  1. Fork this repository on GitHub
  2. Enable GitHub Pages in repository settings
  3. Your files will be available at: https://yourusername.github.io/bkash-blogger-payment/

Option B: Use a File Hosting Service

Step 4: Configure Credentials

Edit bkash-payment.js and update your credentials:

window.bkashCreds = {
  merchantNumber: 'YOUR_MERCHANT_ID',
  username: 'YOUR_USERNAME',
  password: 'YOUR_PASSWORD',
  appKey: 'YOUR_APP_KEY',
  appSecret: 'YOUR_APP_SECRET'
};

⚠️ Warning: Never share or commit your production credentials to public repositories!

Step 5: Add to Blogger

You have two options for Blogger integration:

Option A: Direct Post Integration (Recommended)

  1. Go to your Blogger post editor
  2. Click the HTML view button (⚙️ icon → HTML)
  3. Paste this complete code where you want the payment button:
<!-- bKash Payment Button for Blogger -->
<div style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); padding: 30px; border-radius: 12px; text-align: center; max-width: 400px; margin: 20px auto;">
  
  <div style="background: white; padding: 25px; border-radius: 12px;">
    <h3 style="color: #2c3e50; margin-bottom: 10px;">Your Product Name</h3>
    <p id="product-price" data-price="500" style="font-size: 28px; color: #e2136e; font-weight: bold; margin: 15px 0;">৳500</p>
    <button id="pay-now-btn" style="background: linear-gradient(135deg, #e2136e 0%, #c5115d 100%); color: white; border: none; padding: 14px 30px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; width: 100%;">
      Pay with bKash
    </button>
  </div>
  
</div>

<script>
(function() {
  const btn = document.getElementById('pay-now-btn');
  const priceEl = document.getElementById('product-price');
  
  if (btn && priceEl) {
    btn.addEventListener('click', function() {
      const amount = priceEl.dataset.price;
      const merchant = 'YOUR_MERCHANT_NUMBER'; // Replace with your merchant number
      const invoice = 'INV-' + Date.now();
      
      // Replace with your GitHub Pages URL
      const popupUrl = 'https://yourusername.github.io/bkash-blogger-payment/popup.html?amount=' + amount + '&merchant=' + merchant + '&invoice=' + invoice;
      
      const popup = window.open(popupUrl, 'bkashPayment', 'width=450,height=700,scrollbars=yes,resizable=yes');
      
      if (!popup) {
        alert('Please allow popups for this site');
      }
    });
  }
})();
</script>

⚠️ Important: Replace these values:

Option B: Theme-Wide Integration

  1. Go to your Blogger dashboard
  2. Navigate to Theme → Edit HTML
  3. Find where you want to add the payment button (usually in a post or page)
  4. Insert the following code:
<!-- Payment Form -->
<div class="bkash-payment-container">
  <label for="amount">Amount (BDT):</label>
  <input id="amount" type="number" placeholder="Enter amount" min="1" />
  
  <button id="payBtn" class="bkash-pay-button">
    Pay with bKash
  </button>
</div>

<!-- Include Scripts -->
<script src="https://yourusername.github.io/bkash-blogger-payment/bkash-payment.js"></script>
<script src="https://yourusername.github.io/bkash-blogger-payment/blogger.js"></script>

<!-- Initialize Payment Button -->
<script>
  bkashBlogger.initButton('payBtn', 'amount');
</script>

Note: Replace https://yourusername.github.io/... with your actual hosted file URLs.

Step 6: Test the Integration

  1. Save your changes and preview the page
  2. Enter a test amount and click "Pay with bKash"
  3. A popup should open with the bKash payment interface
  4. Use sandbox credentials to test payments
  5. Verify that payments are processed correctly

Customization

Styling

You can customize the button appearance with CSS:

.bkash-pay-button {
  background-color: #e2136e;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.bkash-pay-button:hover {
  background-color: #c5115d;
}

Going Live

  1. Replace sandbox credentials with production credentials
  2. Test thoroughly with small amounts
  3. Ensure your website uses HTTPS
  4. Monitor transactions in your bKash merchant dashboard

🔧 Troubleshooting

Payment button not working?

Popup blocked?

Payment fails?

Need Help?