Answers.Body: <p>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 <code>commerce/cart/updateCart</code> and payment is processed using <code>commerce/payments/pay</code>.</p>
  
  <p>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.</p>
  
  <p>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 (<code>/checkout</code>) so the user lands back on the "one-page". </p>
  
  <p>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.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-09-01T13:28:51.657Z
Answers.Text: If we did not need to collect shipping information, or choose delivery methods, would that simplify things at all?
Answers.UserDisplayName: Adam Ladrach
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-09-01T14:22:04.183Z
Answers.Text: 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`.
Answers.UserDisplayName: Luke Pearce
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2019-11-27T11:01:05.580Z
Answers.Text: These guys have a one page checkout: https://www.oslodeco.no/kassen (made by vaersaagod.no)
Answers.UserDisplayName: nitech
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-12-29T20:30:39.093Z
Answers.Text: the overall documentation concerning checkout is abysmal. barely anything
Answers.UserDisplayName: Cat Named Dog
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-09-01T07:58:19.153Z
Answers.LastActivityDate: 2016-09-01T07:58:19.153Z
Answers.UserDisplayName: Luke Pearce
Body: <p>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.</p>
  
  <p>Thanks!</p>
  
Tags: <plugin-craftcommerce>
Title: One-Page Commerce Checkout
ThreadText: # One-Page Commerce Checkout
  
  (Asked by: username_0 on 2016-08-31)
  
  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!
  
  **Tags:** plugin-craftcommerce
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2016-09-01. Score: 7 | Accepted answer
  
  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.
  
  > **Comments:**
  > **username_0**: If we did not need to collect shipping information, or choose delivery methods, would that simplify things at all?  
  > **username_1**: 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`.  
  > **username_2**: These guys have a one page checkout: https://www.oslodeco.no/kassen (made by vaersaagod.no)  
  > **username_3**: the overall documentation concerning checkout is abysmal. barely anything  
  
  ---
  
  