✅ Issue 5 Addressed: WooCommerce Form Builder Created comprehensive FAQ document explaining: 1. Payment Providers Card Purpose - For major processors: Stripe, PayPal, Square, etc. - Local gateways go to '3rd Party Payment Methods' - How to add gateways to providers list 2. Form Builder Integration (ALREADY WORKING!) - Backend reads: gateway->get_form_fields() - Auto-categorizes: basic/api/advanced - Frontend renders all standard field types - Example: TriPay fields will render automatically 3. Supported Field Types - text, password, checkbox, select, textarea, number, email, url - Unsupported types show WooCommerce link 4. Duplicate Names Fix - Now using method_title for unique names - TriPay channels show distinct names 5. Customization Options - GenericGatewayForm for 95% of gateways - Custom UI components for special cases (Phase 2) 📋 Key Insight: The system ALREADY listens to WooCommerce form builder! No additional work needed - it's working as designed. All user feedback issues (1-5) are now addressed! 🎉
167 lines
4.3 KiB
Markdown
167 lines
4.3 KiB
Markdown
# 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:
|
||
```php
|
||
$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):**
|
||
```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:
|
||
|
||
```tsx
|
||
// 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`:
|
||
```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! 🎉
|