How We Integrated Stripe Support on This Blog 🔧

For readers who are curious about the technical side, here’s a behind-the-scenes look at how we added a smooth, secure Stripe support feature to this Blogger blog.

1. $2 / $5 / $10 Support Buttons

We created three support levels using Stripe payment links: $2, $5, and $10. Each link is set up directly in Stripe as a “donate” type link, making it easy for readers to contribute without creating an account.

Example:

• $2 Support
• $5 Support
• $10 Support

2. Showing Buttons Only on Single Blog Posts

We wanted the support buttons to appear only on single post pages, not on the homepage or archive pages. Blogger provides a built-in way to detect the page type using the <b:if cond='data:blog.pageType == "item"'> condition.

Here’s the exact snippet we used:

<b:if cond='data:blog.pageType == "item"'>
  <!-- Support Buttons -->
  <div id="support-block" style="text-align:center; margin:20px 0;">
    <a href="YOUR_STRIPE_LINK_2" class="support-button" data-amount="2" target="_blank">$2</a>
    <a href="YOUR_STRIPE_LINK_5" class="support-button" data-amount="5" target="_blank">$5</a>
    <a href="YOUR_STRIPE_LINK_10" class="support-button" data-amount="10" target="_blank">$10</a>
  </div>

  <!-- Button Styles -->
  <style>
    .support-button {
      margin: 5px;
      padding: 10px 20px;
      background-color: #2E8B57;
      color: white;
      text-decoration: none;
      border-radius: 5px;
      font-weight: bold;
      transition: background 0.3s;
    }
    .support-button:hover {
      background-color: #246b45;
    }
  </style>

  <!-- GA Tracking -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const buttons = document.querySelectorAll('.support-button');
      buttons.forEach(btn => {
        btn.addEventListener('click', function() {
          const amount = btn.getAttribute('data-amount');
          if (typeof gtag === 'function') {
            gtag('event', 'support_click', {
              'event_category': 'Stripe Support',
              'event_label': '$' + amount,
              'value': amount
            });
          }
        });
      });
    });
  </script>
</b:if>
  

3. Tracking Clicks with Google Analytics

Each button click triggers a GA event with:

• Category: Stripe Support
• Action: support_click
• Label: $2, $5, or $10
• Value: 2, 5, or 10

This helps us understand which support options are most popular.

4. Stripe Payment Link Setup

Each payment link in Stripe is configured as a “donate” type, one-time payment, with a redirect to our custom Thank You page after the payment is completed. This ensures every supporter feels appreciated immediately.

5. Thank You Page

After payment, readers land on a heartfelt Thank You page. It’s simple, warm, and expresses our gratitude for their support.

6. How It All Works Together

1. Reader opens a single blog post.
2. The support buttons appear at the bottom of the post (thanks to <b:if cond='data:blog.pageType == "item"'>).
3. Reader clicks a $2/$5/$10 button.
4. GA records which button was clicked.
5. Stripe opens the payment page.
6. Once payment is done, Stripe redirects to our Thank You page.

All of this is done with HTML, CSS, and a small JavaScript snippet, keeping it lightweight, responsive, and secure.

We’re thrilled with how smoothly it works and grateful for the amazing support from our readers. Check out the buttons at the bottom of each post!

— Errong

❤️ Support This Blog

---

If this post helped you, you can support my writing with a small donation. Thank you for reading.

---

Coffee ☕ Thanks 🙏 Extra Support ❤️