Setup guide

Before you start

You will set up three small pieces. Only one of them ever sees your bKash credentials.

1. Fork and publish the checkout

1. Fork the repositoryOpen amirulsizan/bkash-blogger-payment and press Fork. Keep the name bkash-blogger-payment.
2. Turn on GitHub PagesIn your fork go to Settings → Pages. Under Build and deployment choose Deploy from a branch, branch main, folder / (root), then Save.
3. Check it worksAfter a minute, open the checkout with a test amount. You should see the pink checkout with a Demo badge.

   https://YOUR-GITHUB-NAME.github.io/bkash-blogger-payment/popup.html?amount=10

2. Get your bKash credentials

You need a bKash merchant account with Payment Gateway (Tokenized Checkout) access. bKash issues two sets of the same four values: sandbox for testing and live once your account is approved.

• username and password
• app_key and app_secret

Request them through the bKash developer portal or your bKash account manager. Sandbox access also comes with test wallet numbers and their OTP and PIN.

3. Deploy the Worker

The Worker is one file, worker/src/index.js. Cloudflare's free plan (100,000 requests a day) is far more than a blog needs. Pick either option.

Option A: Cloudflare dashboard (no terminal)

1. Create the WorkerSign in at dash.cloudflare.com, open Workers & Pages → Create → Create Worker, name it bkash-blogger and press Deploy.
2. Paste the codePress Edit code, replace everything with the contents of worker/src/index.js and press Deploy.
3. Add secrets and settingsGo to Settings → Variables and Secrets and add these. Use type Secret for the four bKash values.

   Name	Type	Value
   BKASH_USERNAME	Secret	From bKash
   BKASH_PASSWORD	Secret	From bKash
   BKASH_APP_KEY	Secret	From bKash
   BKASH_APP_SECRET	Secret	From bKash
   POPUP_URL	Text	https://YOUR-GITHUB-NAME.github.io/bkash-blogger-payment/popup.html
   BKASH_MODE	Text	sandbox (later live)

4. Check itOpen your Worker's URL, for example https://bkash-blogger.YOUR-NAME.workers.dev. You should see "configured": true. If not, missing lists what's left.

Option B: Wrangler CLI

Edit POPUP_URL in worker/wrangler.toml, then:

cd worker
npx wrangler login
npx wrangler secret put BKASH_USERNAME
npx wrangler secret put BKASH_PASSWORD
npx wrangler secret put BKASH_APP_KEY
npx wrangler secret put BKASH_APP_SECRET
npx wrangler deploy

Optional settings such as PRICES (server-enforced prices) and ALLOWED_ORIGINS are described in the reference.

4. Connect the checkout to your Worker

In your fork on GitHub, open config.js, press the pencil icon and set your Worker URL and shop name:

window.BKASH_CONFIG = {
  apiBase: 'https://bkash-blogger.YOUR-NAME.workers.dev',
  merchantName: 'Your Shop Name',
};

Commit the change. After GitHub Pages redeploys (about a minute), the checkout loses its Demo badge and sends customers to bKash.

5. Add the button to Blogger

Build your snippet with the snippet builder, or start from this:

<script src="https://YOUR-GITHUB-NAME.github.io/bkash-blogger-payment/blogger.js"></script>
<button data-bkash-amount="500" data-bkash-product="Premium eBook">Pay with bKash</button>

In a post or page

1. Open HTML viewIn the post editor, click the pencil icon at the top left and choose HTML view.
2. Paste and publishPaste the snippet where the button should appear and publish. Stay in HTML view until you publish, because switching back to Compose view can reformat custom HTML.

In a sidebar gadget

Layout → Add a Gadget → HTML/JavaScript, paste the snippet and save. This works well for a “Support this blog” donation button.

Once for the whole blog (theme)

Load the script once in Theme → Edit HTML, just before </body>. After that, posts only need the <button> line.

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

6. Test in the sandbox

1. Open your published postClick the button. The checkout popup opens with your shop name and the price.
2. Pay with a test walletPress Pay. On bKash's sandbox page, use a sandbox wallet number with the OTP and PIN bKash gave you.
3. See the resultThe popup shows the transaction ID, and your post shows “Payment successful”.
4. Double-check on the serverAsk the Worker for the authoritative status:

   curl "https://bkash-blogger.YOUR-NAME.workers.dev/verify?paymentID=TR0011..."

Something off? Cloudflare's Workers → bkash-blogger → Logs shows every request, and the troubleshooting table covers the usual suspects.

7. Go live

• Replace the four secrets with your live credentials and set BKASH_MODE to live.
• Set PRICES on the Worker so nobody can pay ৳1 for a ৳500 product by editing your page.
• Make a small real payment and confirm it appears in your bKash merchant portal.
• Before delivering anything valuable, confirm the transaction ID in the merchant portal or with /verify. Events on your blog are for a smooth experience, not proof of payment.

Troubleshooting

Still stuck? Open an issue with what you tried and what the browser console says.