🔌 5.2 Connect Typeform or Jotform Forms to Pappr Webhook

Use your existing form-building tools to capture donor information and pass it through to the Pappr Webhook API - no code needed, just smart configuration.

🟢 A. Typeform Integration (Step-by-Step)

Typeform is excellent for building donor-friendly flows with a conversational feel. Here’s how to connect it to the Pappr webhook:

Step 1: Create a Typeform with Essential Donor Fields

Include fields such as:

• First Name

• Email Address

• (Optional) Donation Purpose / Campaign Tag

📝 Keep your questions short and trust-building. Example: “What’s your email so we can thank you properly?”

Step 2: Add Payfast Button or Redirect Logic

Because Typeform doesn’t natively support payments:

• Use a Redirect URL at the end of the form to link to a Payfast recurring donation page or button (built on your website).

• Pre-fill the Payfast payment form with custom_str1 and custom_str2 from Typeform answers (optional via query parameters).

Example redirect:

Step 3: Set Up a Webhook in Typeform

Go to:
Typeform > Connect > Webhooks → Add Webhook

Paste your deployed Pappr Webhook endpoint:

📨 This ensures that every time the Typeform is submitted, donor data is posted to the webhook, even before payment.

Step 4: Map Typeform Fields to Webhook Payload

Typeform sends JSON data like:

{
  "first_name": "Amahle",
  "email_address": "ama@example.com"
}

In server.js, ensure you're capturing these fields as:

const { name_first, email_address } = req.body;

You can alias them as needed during preprocessing.

✅ Summary: Typeform Integration

• Capture donor details in Typeform

• Redirect to Payfast for payment

• Webhook receives identity data at form submission

• Pappr stores and tokenises the info for behavioural analysis

🟠 B. Jotform Integration (Step-by-Step)

Jotform offers more native payment options, making it ideal for fully embedded donation forms. Here’s how to use it:

Step 1: Build Your Jotform Donation Form

Create a form with:

• First Name

• Email Address

• Donation Amount (if fixed, use a dropdown or hidden field)

💡 Jotform supports rich conditional logic - tailor your form by campaign or cause.

Step 2: Add Payfast Payment Integration

• Go to Form Elements > Payments

• Search and add Payfast

• Paste in your Payfast Merchant ID and Key

• Configure recurring settings (amount, frequency, etc.)

This allows donors to pay inside the form, without needing to leave.

Step 3: Add Hidden Fields for Metadata

Use Jotform’s Hidden Field widget to embed:

• custom_str1: First name

• custom_str2: Email

• custom_str3: Campaign

These will be passed to Payfast for webhook forwarding.

🧪 These fields support advanced behavioural tagging - e.g. identifying which campaign generated the gift.

Step 4: Set up a Webhook Notification to Pappr

Go to:
Settings > Integrations > Webhooks

Paste:

Now, on successful submission, the form will:

1. Trigger Payfast’s payment flow

2. Send donor identity to your Pappr Webhook

3. Store the data in your Supabase donations table

✅ Summary: Jotform Integration

• Use built-in Payfast gateway for seamless donations

• Capture hidden metadata for donor context

• Trigger Pappr Webhook to tokenize donor info per submission

• Fully self-contained, mobile-optimised donation experience