Update Checkout Summary after changes to PaymentInformation pane

Created on 10 December 2021, over 2 years ago
Updated 20 June 2023, about 1 year ago

Problem/Motivation

When taxes and fees are enabled the order total may change when the payment information or billing information is set/changed. The order summary view in the checkout should be updated if AJAX is enabled.

This is similar to how Commerce Shipping triggers a re-calculation and AJAX update of the total when the shipping method is selected. #2849756: Auto-recalculate shipping when the address changes

Steps to reproduce

Do not have Commerce Shipping enabled.

  • Enable Commerce Tax
  • Add UK VAT Tax Type
  • Set Default Store address to UK and set tax registration to UK

On checkout change between UK and US billing address (without payment enabled), or two saved payment methods with UK and US address.

Proposed resolution

Changes will be needed in both the Checkout and Payment modules, most sites have Payment enabled but we need to account for those that don't

Commerce Checkout

Create commerce_checkout/js/billing_checkout.js based on commerce_shipping/js/shipping_checkout.es6.js

Update \Drupal\commerce_checkout\Plugin\Commerce\CheckoutPane\BillingInformation::buildPaneForm() to include JS file
and hidden button trigure AJAX submit on selection of address from address book, or/and entering a new valid address. This can follow the example of \Drupal\commerce_shipping\Plugin\Commerce\CheckoutPane\ShippingInformation::buildPaneForm().

Create \Drupal\commerce_checkout\Plugin\Commerce\CheckoutPane\BillingInformation::validatePaneForm() to trigure order refresh and form rebuild if address has changed.

Commerce Payment

Create commerce_payment/js/payment_checkout.js based on commerce_shipping/js/shipping_checkout.es6.js

Update \Drupal\commerce_payment\Plugin\Commerce\CheckoutPane\PaymentInformation::buildPaneForm() to trigure recalculation on selection of payment method, or/and entering a new valid address when creating a new payment method.

Update \Drupal\commerce_payment\Plugin\Commerce\CheckoutPane\PaymentInformation::validatePaneForm() to trigure order refresh and form rebuild if payment information has changed.

Remaining tasks

  • BillingInformation Checkout Pane
  • PaymentInformation Checkout Pane

User interface changes

None, the recalculation should happen if AJAX is enabled and the browser has JS enabled; if not the total will be updated when the user proceeds to the Order Confirmation page of the checkout.

Notes

These changes will have implications for Allow a store to always collect a billing address before payment method selection Needs work which also implements a commerce_payment/js/payment_checkout.js file and they will need to be merged

Feature request
Status

Needs work

Version

3.0

Component

Checkout

Created by

🇬🇧United Kingdom dwkitchen

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇬🇷Greece perarg

    I am interested in this issue too.

  • 🇩🇪Germany dercheffe Sersheim, Germany

    Is there a workaround to solve this issue?

  • 🇩🇪Germany dercheffe Sersheim, Germany

    Trying to figure out if an ajax callback would be an option too. But no idea where to hook in and alter existing structures. commerce (sub)module has something similar functionality, when applying a coupon, then the order summary gets updated (and the order recalculated). See \Drupal\commerce_promotion\Plugin\views\area\CouponRedemption::ajaxRefreshSummary.

    Is there a more generic solution than manipulate the billing information form? For example if you're using different forms depending on payment method (in my case commerce_stripe module). But I'm not sure how commerce_stripe gathers address information 🙈

  • 🇮🇱Israel jsacksick

    We have somebody from our team looking into this, the patch will be posted here in the upcoming days.

  • 🇺🇦Ukraine tBKoT

    Here is the patch that should fix this issue. However, it needs to be adequately checked, maybe I've missed some cases. Let us know if you have any issues with this patch.

  • 🇩🇪Germany dercheffe Sersheim, Germany

    Thank you so much for the patch 🙏.

    I tested it on my site installation. The default billing country is Germany (order summary is shown with VAT 19%).
    I provide at my site two payment methods for the customer. Both payment methods are checked to collect billing information.
    My payment methods provided:

    • stripe (see Module page ) for credit card payments
    • "Buy on invoice", a manual payment plugin, which does actually nothing, aside collect billing information for generating an invoice later via commerce_invoice module . The user can pay later, sending the money manually via bank transfer.

    I have following results after applying the patch:

    Let's say the user is from Austria (VAT 20%) instead Germany. The user is a first time customer, no customer profile yet.

    Test with Stripe

    After filling out billing information and click on "continue to review" the order summary gets refreshed with 20% VAT. Works fine.
    From a UX point of view it would IMO be nicer, the summary gets refreshed immediately as soon as the billing country in the address widget is changed. AFAIK the address field does a AJAX update of itself too when country is changed?

    Test with "manual" plugin

    After filling out billing information and click on "continue to review" the order summary doesn't get refreshed. Here the patch doesn't work. The order gets only refreshed after waiting for refresh interval.

  • Status changed to Needs work about 1 year ago
  • 🇺🇸United States rszrama

    I'm seeing some unexpected behavior in testing this patch myself. For my own testing, I just added a promotion that would appear when the billing country is UK. I could see this get applied once, but changing address selections triggered some sort of Ajax refresh that not only removed the adjustment when I went back to a US address but also overwrote the address associated with my prior payment method ... so a payment method with a UK address was changed to be associated with a US address.

    I'm guessing this means we're attempting an update with partial or improper data in the wrong context due to the Ajax behavior. At first glance, I'm not sure where / how that may be, but I'm going to move this to "needs work" rather than "active" to show at least it has a starting patch.

  • First commit to issue fork.
Production build 0.69.0 2024