8000 Add option to display Express Checkout after selecting a carrier and pickup point · Issue #10807 · Automattic/woocommerce-payments · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Add option to display Express Checkout after selecting a carrier and pickup point #10807

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
AlkoKod opened this issue May 27, 2025 · 1 comment
Open

Add option to display Express Checkout after selecting a carrier and pickup point #10807

AlkoKod opened this issue May 27, 2025 · 1 comment
Assignees
@frosso
Labels
type: enhancement The issue is a request for an enhancement.

Comments

@AlkoKod
Copy link
AlkoKod commented May 27, 2025

Description

Add an option to conditionally display WooPayments Express Checkout buttons (Apple Pay, Google Pay, etc.) only after shipping method has been selected AND any required pickup point/delivery location has been chosen on the checkout page.

Currently, express checkout buttons appear immediately, which creates incomplete orders in European markets where many shipping methods require a two-step process: first selecting the shipping carrier, then choosing a specific pickup point, parcel locker, or delivery location.

When customers use express checkout before completing both shipping selection steps, they complete payment but haven't provided essential delivery information needed for successful order fulfillment.

Acceptance criteria

  • Add a new setting in WooPayments configuration to enable/disable conditional express checkout display
  • Express checkout buttons should be hidden by default when the setting is enabled
  • Express checkout buttons should appear only after shipping method is selected AND any required pickup point/delivery location is chosen
  • The feature should detect when shipping methods require additional location selection (pickup points, parcel lockers, etc.)
  • Should work with AJAX-powered checkout updates and dynamic content loading
  • Express checkout buttons should hide again if shipping method is changed or pickup point selection is cleared
  • The setting should include clear documentation explaining the two-step shipping selection use case
  • Feature should work generically with major European shipping plugins without plugin-specific code
  • Should maintain existing functionality when the setting is disabled (default behavior)

Designs

Current behavior (problematic):

┌─────────────────────────────┐
│ 🍎 Apple Pay               │
│ 🟢 Google Pay              │  ← Visible immediately
│ 💳 PayPal Express          │
├─────────────────────────────┤
│ Shipping Methods:           │
│ ○ Standard shipping         │  
│ ○ Zásilkovna ČR (pickup)   │  ← Not selected yet
│ ○ PPL parcel locker        │
└─────────────────────────────┘

After shipping method selection (still problematic):

┌─────────────────────────────┐
│ 🍎 Apple Pay               │  ← Still visible but order incomplete
│ 🟢 Google Pay              │  
│ 💳 PayPal Express          │
├─────────────────────────────┤
│ Shipping Methods:           │
│ ● Zásilkovna ČR (pickup)   │  ← Selected
│ ┌─────────────────────────┐ │
│ │ 📍 Vyberte místo        │ │  ← Pickup point NOT chosen yet
│ │    vyzvednutí           │ │
│ └─────────────────────────┘ │
└─────────────────────────────┘

Desired behavior (complete shipping info):

┌─────────────────────────────┐
│ Shipping Methods:           │
│ ● Zásilkovna ČR (pickup)   │  ← Selected
│ ┌─────────────────────────┐ │
│ │ ✅ Praha - Wenceslas    │ │  ← Pickup point chosen
│ │    Square (Z-Point)     │ │
│ └─────────────────────────┘ │
├─────────────────────────────┤
│ 🍎 Apple Pay               │
│ 🟢 Google Pay              │  ← Appears after COMPLETE shipping selection
│ 💳 PayPal Express          │
└─────────────────────────────┘

Testing instructions

  1. Install WooPayments with express checkout enabled
  2. Install a European shipping plugin that requires pickup point selection (Packeta, PPL, DPD, or similar)
  3. Go to WooPayments settings and enable "Show express checkout only after complete shipping selection"
  4. Add a product to cart and go to checkout
  5. Observe that express checkout buttons are hidden initially
  6. Select a shipping method that requires pickup point selection (e.g., "Zásilkovna ČR")
  7. Observe that express checkout buttons are still hidden (pickup point not yet selected)
  8. Click the pickup point selection button and choose a specific location
  9. Observe that express checkout buttons now appear after pickup point is confirmed
  10. Change shipping method or clear pickup point selection
  11. Observe that express checkout buttons are hidden again
  12. Test with standard shipping methods (no pickup required) - buttons should appear immediately after method selection
  13. Test with AJAX checkout updates to ensure functionality persists
  14. Verify that standard checkout flow still works normally in all scenarios

Dev notes

Implementation suggestions:

  • Add JavaScript event listeners for shipping method changes
  • Hook into WooCommerce's updated_checkout event for AJAX compatibility
  • Use CSS display properties or DOM manipulation to show/hide express checkout elements
  • Consider using WooCommerce's built-in checkout field validation hooks
  • May need to integrate with woocommerce_checkout_fields filter for shipping validation
  • Should respect existing express checkout positioning settings

Technical considerations:

  • European shipping plugins often use custom field types and AJAX workflows
  • Some shipping plugins load pickup point selectors dynamically after shipping method selection
  • Need to handle both traditional form selects and custom UI components (buttons, widgets)
  • Consider performance impact of DOM monitoring for shipping changes
  • Many plugins use hidden fields to store pickup point data after selection

Shipping method detection patterns:

// 1. Shipping method selection
input[name^="shipping_method"][checked]
input[name="shipping_method[0]"][value*="pickup"]

// 2. Pickup point selection indicators
.packeta-widget-selected-address:not(:empty)
.pickup-point-selected
input[name*="pickup_point"][value!=""]
.delivery-location-info:not(:empty)

// 3. Generic pickup point completion
[class*="selected-pickup"]:not(:empty)
[class*="pickup-address"]:not(:empty)
[data-pickup-selected="true"]

Example detection logic:

// Check if shipping method requiring pickup is selected AND pickup point is chosen
function isShippingCompleteForExpressCheckout() {
    const shippingMethod = document.querySelector('input[name^="shipping_method"]:checked');
    
    if (!shippingMethod) return false;
    
    // If shipping method contains pickup/point keywords, verify pickup point is selected
    const requiresPickup = shippingMethod.value.match(/<
8000
/span>(pickup|point|locker|packeta|ppl|dpd)/i);
    
    if (requiresPickup) {
        // Check common pickup point selection indicators
        const pickupSelected = document.querySelector('.packeta-widget-selected-address:not(:empty)') ||
                              document.querySelector('[class*="pickup-selected"]:not(:empty)') ||
                              document.querySelector('input[name*="pickup_point"][value!=""]');
        return !!pickupSelected;
    }
    
    // For standard shipping methods, just having method selected is enough
    return true;
}

Additional context

This feature request addresses a significant UX issue in European e-commerce where shipping integration is more complex than in other markets. European customers are accustomed to selecting specific pickup points, parcel lockers, or delivery time slots as part of the checkout process.

Common European shipping scenarios:

  • Packeta: Requires selecting pickup point from 10,000+ locations across EU
  • PPL: Parcel lockers and pickup points with specific opening hours
  • DPD: Pickup shops and parcel lockers with capacity limits
  • GLS: ParcelShops with weekend/evening availability
  • InPost: Automated parcel lockers requiring location selection

Current workaround:
Many European merchants currently disable express checkout entirely, losing conversion benefits, or implement custom JavaScript solutions that may break with plugin updates.

Related plugins affected:

  • Packeta (Official Packeta plugin)
  • PPL CZ+SK official plugin
  • DPD pickup points
  • GLS ParcelShop integration
  • InPost parcel lockers
  • Zásilkovna (Czech/Slovak market leader)

Business impact:

  • Improved conversion rates by maintaining express checkout availability
  • Reduced customer service inquiries about missing delivery information
  • Better integration with European logistics infrastructure
  • Compliance with carrier requirements for delivery completion
@AlkoKod AlkoKod changed the title Add option to display after selecting a carrier Add option to display Express Checkout after selecting a carrier May 27, 2025
@AlkoKod AlkoKod changed the title Add option to display Express Checkout after selecting a carrier Add option to display Express Checkout after selecting a carrier and pickup point May 27, 2025
@frosso frosso added the type: enhancement The issue is a request for an enhancement. label May 28, 2025
@frosso
Copy link
Contributor
frosso commented May 28, 2025

Hi @AlkoKod 👋 Thank you for taking the time to share your use case and for the detailed and thoughtful feature request! We really appreciate it.

You're right that this is a significant UX challenge, especially for shipping methods that require multi-step interactions, such as selecting a pickup point or parcel locker. Your use case is not something we had previously considered.

That said, we feel that hiding express checkout buttons based on shipping method and pickup point selection (while helpful for this particular scenario) isn’t the most scalable or extensible solution. It could become tightly coupled to shipping logic and wouldn't easily support other checkout flows, such as custom fields or additional validation steps.

The underlying issue isn’t unique to WooPayments. Any payment gateway that displays express buttons early in the checkout flow could encounter similar issues. Addressing this only within WooPayments wouldn't fully resolve the broader ecosystem problem.

Instead, we're exploring a more flexible approach that integrates more deeply with both WooCommerce and WooPayments. Here’s what we’re planning.

  • Google Pay and Apple Pay will be available as standard payment methods in the WooCommerce payment methods list
  • Customers will complete their billing/shipping details (including any required custom fields) within the WooCommerce form, and click the "Place order" button, which will be replaced with the appropriate Google Pay/Apple Pay button
  • Merchants will have control via WooPayments settings to decide whether these buttons appear at the top of the checkout page (as they do now), or within the payment methods section

Here’s an early POC screenshot where Google Pay appears in the payment methods list (note: we've since updated the design so the button replaces the "Place order" button):
Image

Clicking on the Google Pay/Apple Pay button will display a payment sheet where the customer can only choose the payment method (instead of also choosing the shipping address and shipping methods, as it currently stands).
Image

I believe this solution addresses the concerns you raised while ensuring compatibility with a wide range of custom checkout fields, shipping plugins, and third-party integrations.

Does this new direction work for your use case? I'd love to hear your thoughts.

Thank you again for taking the time!

@frosso frosso self-assigned this May 28, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@frosso frosso

Labels
type: enhancement The issue is a request for an enhancement.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@frosso @AlkoKod
0