diff --git a/app/views/split_checkout/_form.html.haml b/app/views/split_checkout/_form.html.haml
index 7c8ebf418d..f60493a1c1 100644
--- a/app/views/split_checkout/_form.html.haml
+++ b/app/views/split_checkout/_form.html.haml
@@ -6,5 +6,7 @@
= form_with url: update_checkout_path, model: @order, method: :put do |f|
%div.checkout-step.medium-6
- - if true ## test step
- = render "split_checkout/your_details", f: f
+ - if current_page?(checkout_your_details_path)
+ = render 'split_checkout/your_details', f: f
+ - elsif current_page?(checkout_payment_method_path)
+ = render "split_checkout/payment_method", f: f
diff --git a/app/views/split_checkout/_payment_method.html.haml b/app/views/split_checkout/_payment_method.html.haml
new file mode 100644
index 0000000000..4a5308ba8e
--- /dev/null
+++ b/app/views/split_checkout/_payment_method.html.haml
@@ -0,0 +1,22 @@
+%div.checkout-substep{"data": {"controller": "paymentmethod"}}
+ %div.checkout-title
+ = t("split_checkout.step2.payment_method.title")
+ - available_payment_methods.each do |payment_method|
+ %div.checkout-input
+ = f.radio_button :payment_method_id, payment_method.id,
+ id: "payment_method_#{payment_method.id}",
+ "data-action": "paymentmethod#selectPaymentMethod",
+ "data-paymentmethod-description": "#{payment_method.description}"
+ = f.label payment_method.id, "#{payment_method.name} (#{payment_method_price(payment_method, @order)})", {for: "payment_method_" + payment_method.id.to_s }
+
+ %div
+ .panel{"data-paymentmethod-target": "panel", style: "display: none"}
+
+
+%div.checkout-substep
+ = t("split_checkout.step2.explaination")
+
+%div.checkout-submit
+ = f.submit t("split_checkout.step2.submit"), class: "button primary", disabled: @terms_and_conditions_accepted == false || @platform_tos_accepted == false
+ %a.button.cancel{href: main_app.checkout_your_details_path}
+ = t("split_checkout.step2.cancel")
diff --git a/app/webpacker/controllers/paymentmethod_controller.js b/app/webpacker/controllers/paymentmethod_controller.js
new file mode 100644
index 0000000000..ac1c9dff60
--- /dev/null
+++ b/app/webpacker/controllers/paymentmethod_controller.js
@@ -0,0 +1,9 @@
+import { Controller } from "stimulus";
+export default class extends Controller {
+ static targets = ["panel"];
+
+ selectPaymentMethod(event) {
+ this.panelTarget.innerHTML = `${event.target.dataset.paymentmethodDescription}`;
+ this.panelTarget.style.display = "block";
+ }
+}
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 77abd79bcb..3112ac9da4 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1661,6 +1661,12 @@ en:
title: Delivery address
submit: Next - Payment method
cancel: Back to Edit basket
+ step2:
+ payment_method:
+ title: Payment method
+ explaination: You can review and confirm your order in the next step which includes the final costs.
+ submit: Next - Order summary
+ cancel: Back to Your details
errors:
required: Field cannot be blank
invalid_number: "Please enter a valid phone number"