WooNooW/PAYMENT_GATEWAY_FAQ.md

Payment Gateway FAQ

Q: What goes in the "Payment Providers" card?

A: The "Payment Providers" card is designed for major payment processor integrations like:

• Stripe
• PayPal (official WooCommerce PayPal)
• Square
• Authorize.net
• Braintree
• Amazon Pay

These are gateways that:

1. Have type = 'provider' in our categorization
2. Are recognized by their gateway ID in PaymentGatewaysProvider::categorize_gateway()
3. Will eventually have custom UI components (Phase 2)

Current behavior:

• If none of these are installed, the card shows: "No payment providers installed"
• Local payment gateways (TriPay, Duitku, etc.) go to "3rd Party Payment Methods"

To add a gateway to "Payment Providers": Edit includes/Compat/PaymentGatewaysProvider.php line 115:

$providers = ['stripe', 'paypal', 'stripe_cc', 'ppec_paypal', 'square', 'authorize_net'];

---

Q: Does WooNooW listen to WooCommerce's form builder?

A: YES! 100% automatic.

How it works:

Backend (PaymentGatewaysProvider.php):

// Line 190
$form_fields = $gateway->get_form_fields();

This reads ALL fields defined in the gateway's init_form_fields() method, including:

• enable_icon (checkbox)
• custom_icon (text)
• description (textarea)
• expired (select with options)
• checkout_method (select)
• ANY other field the addon defines

Categorization:

• basic: enabled, title, description, instructions
• api: Fields with keywords: key, secret, token, api, client, merchant, account
• advanced: Everything else

Frontend (GenericGatewayForm.tsx): Automatically renders:

• ✅ text, password, number, email, url → <Input>
• ✅ checkbox → <Checkbox>
• ✅ select → <Select> with options
• ✅ textarea → <Textarea>

Example: TriPay Gateway

Your TriPay fields will render as:

Basic Tab:

• description → Textarea

Advanced Tab:

• enable_icon → Checkbox with image preview (description as HTML)
• custom_icon → Text input
• expired → Select dropdown (1-14 days)
• checkout_method → Select dropdown (DIRECT/REDIRECT)

Unsupported Field Types

If a gateway uses custom field types (not in WooCommerce standard), we show:

⚠️ Some advanced settings are not supported in this interface.
   Configure in WooCommerce →

Supported types:

• text, password, checkbox, select, textarea, number, email, url

Not supported (yet):

• multiselect, multi_select_countries, image_width, color, etc.

---

Q: Why are some gateways showing duplicate names?

A: FIXED! We now use method_title instead of title.

Before:

• "Pembayaran TriPay" × 5 (all the same)

After:

• "TriPay - Indomaret"
• "TriPay - BNI VA"
• "TriPay - BRI VA"
• "TriPay - Mandiri VA"
• "TriPay - BCA VA"

Each gateway channel gets its unique name from WooCommerce.

---

Q: Can I customize the form for specific gateways?

A: Yes! Two ways:

1. Use GenericGatewayForm (automatic)

Works for 95% of gateways. No code needed.

2. Create Custom UI (Phase 2)

For gateways that need special UX:

// src/components/settings/StripeGatewayForm.tsx
export function StripeGatewayForm({ gateway, onSave }) {
  // Custom Stripe-specific UI
  // - Test mode toggle
  // - Webhook setup wizard
  // - Payment methods selector
  // - Apple Pay / Google Pay toggles
}

Then in Payments.tsx:

if (gateway.id === 'stripe' && gateway.has_custom_ui) {
  return <StripeGatewayForm gateway={gateway} onSave={handleSave} />;
}
return <GenericGatewayForm gateway={gateway} onSave={handleSave} />;

---

Q: What if a gateway doesn't use WooCommerce's form builder?

A: We can't help automatically. The gateway must:

1. Extend WC_Payment_Gateway
2. Define fields in init_form_fields()
3. Use WooCommerce's settings API

If a gateway uses custom admin pages or non-standard fields, we show:

Configure in WooCommerce → (external link)

Our philosophy: Support WooCommerce-compliant gateways only.

---

Summary

✅ We already listen to WooCommerce form builder ✅ All standard field types are supported ✅ Automatic categorization (basic/api/advanced) ✅ Multi-page tabs for 20+ fields ✅ Fallback to WooCommerce for complex cases ✅ Unique gateway names (method_title) ✅ Searchable selects for large lists

No additional work needed - the system is already complete! 🎉