5

Does anyone have any recommendation on how to reformat the Commerce checkout workflow to be on one page? More specifically, how to pass the address/customer info before the payment info without having to redirect to another page? I've tried combining them into one form without success.

Thanks!

Adam Ladrach
  • 301
  • 1
  • 8

1 Answers1

7

You won't be able to collect all information and take payment using one form/action. The customer information is added to the cart using commerce/cart/updateCart and payment is processed using commerce/payments/pay.

To show the available shipping methods to a customer, Craft Commerce needs to know the shipping address to match against the rules you've set up. For this reason you'll need to split your checkout into separate forms.

I have built a "one-page" checkout with 'Customer Details', 'Delivery Method' and 'Payment' sections. Each section has a 'Continue' button that submits the information and updates the cart. Each section has the same redirection URL (/checkout) so the user lands back on the "one-page".

If you wanted to do away with 'Continue' buttons, you could use Javascript to submit the customer's information and receive a JSON response. This would include the available shipping methods and the cart totals which you'd use to update the page without the need for a refresh.

Luke Pearce
  • 3,863
  • 1
  • 11
  • 25
  • If we did not need to collect shipping information, or choose delivery methods, would that simplify things at all? – Adam Ladrach Sep 01 '16 at 13:28
  • You wouldn't need to worry about the JSON response and updating shipping methods - but you'd still need to use two actions as you can't add customer info to the card using commerce/payments/pay. – Luke Pearce Sep 01 '16 at 14:22
  • These guys have a one page checkout: https://www.oslodeco.no/kassen (made by vaersaagod.no) – nitech Nov 27 '19 at 11:01
  • the overall documentation concerning checkout is abysmal. barely anything – good_afternoon Dec 29 '21 at 20:30