openfoodnetwork/app/views/checkout/_payment.html.haml

- content_for :injection_data do
  - if Stripe.publishable_key
    :javascript
      angular.module('Darkswarm').value("stripeObject", Stripe("#{Stripe.publishable_key}"))

%fieldset#payment
  %ng-form{"ng-controller" => "PaymentCtrl", name: "payment"}

    %h5{"ng-class" => "{valid: payment.$valid, dirty: payment.$dirty || submitted}"}
      %span.right
        %label.label.round.alert.right
          %i.ofn-i_009-close
        %label.label.round.success.right
          %i.ofn-i_051-check-big
      = t :checkout_payment

    %accordion-group{"is-open" => "accordion.payment",
      "ng-class" => "{valid: payment.$valid, open: accordion.payment}"}
      = render 'checkout/accordion_heading'

      -# TODO render this in Angular instead of server-side
      -# The problem being how to render the partials
      .row
        .small-12.medium-12.large-6.columns
          - available_payment_methods.each do |method|
            .row
              .small-12.columns
                %label
                  = radio_button_tag "order[payments_attributes][][payment_method_id]", method.id, false,
                    required: true,
                    name: "order.payment_method_id",
                    "ng-model" => "order.payment_method_id"
                  = method.name
                  = "(#{payment_method_price(method, @order)})"

                %small.error.medium.input-text{"ng-show" => "!fieldValid('order.payment_method_id')"}
                  = "{{ fieldErrors('order.payment_method_id') }}"

            .row{"ng-if" => "order.payment_method_id == #{method.id}"}
              .small-12.columns
                = render partial: "spree/checkout/payment/#{method.method_type}", :locals => { :payment_method => method }
        .small-12.medium-12.large-6.columns
          #distributor_address.panel{"ng-show" => "Checkout.paymentMethod().description"}
            %span.pre-wrap {{ Checkout.paymentMethod().description }}