How to Create a Donation Calculator with Dynamic Pricing and Stripe Checkout

by

This step-by-step tutorial guides you through creating a donation calculator with dynamic pricing, integrated with Stripe for seamless payments. Ideal for NGOs, small businesses, or anyone looking to collect payments efficiently, this guide is based on a practical demonstration by Cesar from Chatwith. Follow these steps to set up a user-friendly calculator and checkout system in under five minutes.

Prerequisites

  • A Stripe account (for payment processing). If you do not have one, do not worry, we can do it in the same onboarding process.
  • Access to a platform like Chatwith that supports widget creation and Stripe integration.
  • Basic understanding of your donation or pricing structure.

Step 1: Link Your Stripe Account

To process payments, connect your Stripe account to the platform.

  1. Navigate to Payments: In your platform’s dashboard, go to the “Payments” section.
  2. Link Stripe: Select the option to connect your Stripe account. Follow the prompts to authorize the connection. This is typically straightforward and secure.
    • Note: Refer to the platform’s documentation or a linked video tutorial (as mentioned by Cesar) for specific instructions if needed.
  3. Verify Connection: Ensure Stripe is activated and ready to process payments.

Step 2: Create a Product with Dynamic Pricing

Dynamic pricing allows the calculator to adjust the payment amount based on user input.

  1. Access Product Settings: In your platform, go to the area where you can create or manage products.
  2. Create a New Product:
    • Name the product (e.g., “Donation for [Your NGO Name]”).
    • Enable dynamic pricing to allow flexible amounts based on user selections.
  3. Set Payment Percentage (Optional):
    • Choose whether to charge 100% of the calculated amount or a partial amount (e.g., 20% for order confirmation).
    • Example: For a $100 donation, setting 20% means the user pays $20 upfront.
  4. Configure Additional Details:
    • Select the currency (e.g., USD, EUR).
    • Add a description (e.g., “Support our NGO’s mission”).
    • Include a thank-you message for post-payment confirmation.
  5. Specify Required Fields: Choose which user details to collect at checkout (e.g., name, phone number).

Step 3: Build the Donation Calculator Widget

The widget is the front-end interface where users input their donation details.

  1. Go to Widgets: Navigate to the widget creation section in your platform.
  2. Create a Calculator Widget:
    • Select the “Calculator” option to start building.
  3. Add User Information Fields:
    • Include fields like “Name” and “Phone Number” for donor details.
  4. Set Donation Options:
    • Create a dropdown or button-based selector for donation amounts (e.g., $10, $20, $50, $100).
    • Name the options creatively (e.g., “Basic: $10,” “Pro: $20,” “Top: $50”) or keep them simple.
    • Enable the “Show Price” option to display amounts clearly in the widget.
  5. Enable Multiplication (Optional):
    • Allow users to multiply the donation amount (e.g., selecting $20 three times for a $60 donation).
    • Add a help text like, “Enter a number to multiply your donation (e.g., 3 for $60).”
  6. Add Additional Options (Optional):
    • Include extras like a “T-shirt for $100” checkbox or a mandatory fee (e.g., $20 donation processing fee).
    • For fixed fees, ensure users cannot skip them (e.g., a cleaning fee for apartment bookings).
  7. Save the Widget: Review and save your widget configuration.

Step 4: Link the Widget to the Checkout

Connect the calculator widget to the Stripe checkout for seamless payment processing.

  1. Select the Checkout Action:
    • In the widget settings, choose the option to “Send User to Pay.”
    • From the dropdown, select the dynamic pricing checkout created in Step 2 (e.g., “Donation for [Your NGO Name]”).
  2. Customize the Payment Button:
    • Add a button text like “Confirm Donation” or “Go to Payment.”
    • Enable the “Show Total” option to display the calculated amount in the widget.
  3. Test the Flow:
    • Fill out the widget (e.g., select $50, multiply by 4 for $200).
    • Click the payment button to ensure it redirects to the Stripe checkout with the correct total.

Step 5: Integrate with CRM for Follow-UpsTrack donors and manage pending payments using the platform’s CRM features.

  1. Access CRM Data:
    • After a user submits the widget, their details (name, phone number, donation amount) are stored in the CRM.
    • Each entry is labeled (e.g., “Pending Payment”) by default.
  2. Follow Up on Pending Payments:
    • Identify users who haven’t completed payment.
    • Use the provided checkout link to send a reminder message (e.g., “Thank you for your interest in our NGO. Please confirm your payment here: [Link]”).
  3. Track Donations:
    • Monitor total amounts and donor statuses in the CRM to stay organized.

Step 6: Test and Deploy

Ensure everything works smoothly before going live.

  1. Test the Widget:
    • Input various donation amounts and combinations (e.g., $50 x 4, add a $100 T-shirt).
    • Verify the total calculates correctly and the checkout reflects the dynamic amount.
  2. Test the Payment Flow:
    • Complete a test transaction using Stripe’s test mode to ensure payments process correctly.
  3. Embed the Widget:
    • Add the calculator to your website or share it via a link.
    • Ensure it’s user-friendly and visually appealing (e.g., use buttons instead of dropdowns for a modern look).

Tips for Success

  • Keep It Simple: Start with basic options (e.g., $10, $20, $50) and a multiplier for flexibility.
  • Be Transparent: Display prices clearly and include help text for custom donations.
  • Leverage Flexibility: Use dynamic pricing for services beyond donations (e.g., custom website design, nail services with add-ons).
  • Follow Up Promptly: Use CRM data to recover pending payments with personalized messages.
  • Customize for Your Brand: Name donation tiers creatively (e.g., “Supporter,” “Champion”) to engage users.

Why Use This System?

This approach eliminates the complexity of traditional e-commerce setups. You don’t need to manage stock, fulfillment, or SKUs. With dynamic pricing, a calculator widget, and Stripe integration, you can:

  • Create a professional checkout in under five minutes.
  • Collect payments for donations, services, or bookings.
  • Track leads and recover pending payments via CRM.
  • Scale to various use cases (NGOs, services, appointments).

By following these steps, you’ll have a fully functional donation calculator with dynamic pricing and Stripe checkout, ready to streamline payments for your NGO or business. If you need further assistance, feel free to explore the linked resources or contact your platform’s support team. Happy fundraising!

Leave a comment