fab-manager/app/assets/templates/stripe/payment_modal.html.erb

<div xmlns:stripe="http://www.w3.org/1999/xhtml">
  <div class="modal-header">
    <img ng-src="{{logoBlack.custom_asset_file_attributes.attachment_url}}" alt="{{logo.custom_asset_file_attributes.attachment}}" class="modal-logo"/>
    <h1 translate>{{ 'app.shared.stripe.online_payment' }}</h1>
  </div>
  <div class="modal-body">
    <uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert>

    <div class="panel panel-default bg-light m-n">
      <form name="stripeForm" stripe:form cart-items="cartItems" on-payment-success="onPaymentSuccess" class="form-horizontal">
        <div class="panel-body">

          <h3 class="m-t-xs" ng-if="walletAmount" ng-bind-html="'app.shared.wallet.you_have_amount_in_wallet' | translate:{ amount: numberFilter(walletAmount, 2), currency: currencySymbol }"></h3>
          <p ng-if="walletAmount > 0 && amount !== 0" class="text-italic" ng-bind-html="'app.shared.stripe.credit_amount_for_pay_reservation' | translate:{ amount: numberFilter(amount, 2), currency: currencySymbol }"></p>

          <div id="card-element"></div>
          <div id="card-errors" role="alert"></div>

          <div class="form-group" ng-class="{'has-error': stripeForm.acceptCondition.$dirty && stripeForm.acceptCondition.$invalid}" ng-show="cgv">
            <div class="col-sm-12 text-sm checkbox-group">
              <input type="checkbox" name="acceptCondition" id="acceptCondition" ng-model="acceptCondition" value="true" ng-required="cgv != null"/>
              <label for="acceptCondition">{{ 'app.shared.stripe.i_have_read_and_accept_' | translate }}
                <a href="{{cgv.custom_asset_file_attributes.attachment_url}}" target="_blank" translate>{{ 'app.shared.stripe._the_general_terms_and_conditions' }}</a>
              </label>
            </div>
              <div ng-if="!cgv">
                  <input type="hidden" name="acceptCondition" ng-model="acceptCondition" value="true">
              </div>
          </div>

        </div>
        <div class="panel-footer no-padder">
           <button type="submit" class="btn btn-valid btn-info btn-block p-l btn-lg text-u-c r-b text-base" ng-disabled="stripeForm.$invalid || attempting" translate translate-values="{AMOUNT:(amount | currency)}">{{ 'app.shared.stripe.confirm_payment_of_'}}</button>
        </div>
      </form>

    </div>

  </div>

  <div class="modal-footer text-center">
    <i class="fa fa-lock fa-2x m-r-sm pos-rlt" style="top:7px; color:#9edd78;"></i>
    <%= image_tag("powered_by_stripe.png", class: 'm-r-sm') %>
    <%= image_tag("mastercard.png", class: 'm-r-sm') %>
    <%= image_tag("visa.png", class: 'm-r-sm') %>
  </div>


</div>