Javascript 如何在条带元素字段中要求信用卡字段？

我的问题是，我提交的表单中信用卡字段为空

我将信用卡字段与另一个表单相结合，这就是问题所在

所以我的问题是，如何使用JS或Ruby要求信用卡字段

以下是表单和javascript：

<%= form_for([@listing, @order], html: {id: "Orders"}) do |form| %>
  <div class="form-group">
    <%= form.label :name, "Who's the Order for?" %>
    <%= form.text_field :name, class: "form-control", required: true  %>
  </div>

  <script
    src="https://js.stripe.com/v3/">
  </script>

    <div class="form-row">
      <label for="card-element">
        Credit or debit card
      </label>
      <div id="card-element" class="form-control">
      </div>

      <div id="card-errors" role="alert"></div>
    </div>
      <br>
      <div class="form-group">

    <%= form.submit "asdf", class:"ripple-effect", id:"button-element" %>
    <!-- <button id="button-element" class="ripple-effect">Submit Payment for </button> EITHER OF THESE BUTTONS WORK WITH THE FORM-->
  </div>
  <span class="token"></span>
  </form>
  <% end %>

<script>
  var stripe = Stripe('pk_test_413253....f0B8');

  var elements = stripe.elements();

  var style = {
    base: {
      color: '#32325d',
      lineHeight: '24px',
      fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
      fontSmoothing: 'antialiased',
      fontSize: '16px',
      '::placeholder': {
        color: '#aab7c4'
      }
    },
    invalid: {
      color: '#fa755a',
      iconColor: '#fa755a'
    }
  };

  var card = elements.create('card', {style: style});

  card.mount('#card-element');

  card.addEventListener('change', function(event) {
    var displayError = document.getElementById('card-errors');
    if (event.error) {
      displayError.textContent = event.error.message;
    } else {
      displayError.textContent = '';
    }
  });

  var form = document.getElementById('payment_form');
  form.addEventListener('submit', function(event) {
    event.preventDefault();

    stripe.createToken(card).then(function(result) {
      if (result.error) {
        // Inform the user if there was an error
        var errorElement = document.getElementById('card-errors');
        errorElement.textContent = result.error.message;
      } else {
        // Send the token to your server
        stripeTokenHandler(result.token);
      }
    });

    });

    function stripeTokenHandler(token) {

      var form = document.getElementById('payment_form');
      var hiddenInput = document.createElement('input');
      hiddenInput.setAttribute('type', 'hidden');
      hiddenInput.setAttribute('name', 'stripeToken');
      hiddenInput.setAttribute('value', token.id);
      form.appendChild(hiddenInput);


      ["brand", "exp_month", "exp_year", "last4"].forEach(function(field) {
         addFieldToForm(form, token, field);

    });

      // Submit the form
      form.submit();

    }
</script>

---

当我按submit时，订单被创建，API请求成功。如何要求使用ruby或javascript验证信用卡字段？

我可以看出您正在使用模板

尝试添加

window.onload=function（）{
变量条带=条带（'pk_测试_413253…f0B8'）；
您的代码
}

---

您可以在docs示例中看到，如果用户提交一张空白卡，它应该发出警报。您无法在后端验证它，因为前端的stripe.js会创建一个信用卡令牌供您用作安全性。

正如@Auriga所指出的，信用卡验证是在令牌化过程中由stripe完成的

然而，Stripe元素确实为您提供了一种验证字段的方法，并为您的前端用户提供更有意义的反馈

---

window.onload=function（）{….}没有执行此操作。。。当我没有将它嵌入@orders表单_中时，它会单独工作。。。这就是（当我将条带代码添加到订单控制器中时）问题开始发生的时间。所有这些都可以正常工作。。令牌被发送到stripe并创建订单。理想情况下，我只希望在stripe付款成功的情况下创建订单，但首先，我需要弄清楚，如果信用卡字段没有填写，为什么我还要向stripe发送代币付款我认为主要是在controller或类似的问题上。因为在条纹方面，它是有效的。。。但是我不需要填写信用卡信息来输入订单。。即使我使用“”作为输入

def create
    @order = Order.new(order_params)
    @listing = Listing.find(params[:listing_id])
    @seller = @listing.user

    @order.listing_id = @listing.id
    @order.buyer_id = current_user.id
    @order.seller_id = @seller.id

    if @order.valid?
      begin
        @amount = 500
        token = params[:stripeToken]
        payment_form = params[:payment_form]

        charge = Stripe::Charge.create({
          :source  => 'tok_visa',
          :amount      => @amount,
          :description => 'Rails Stripe customer',
          :currency    => 'usd'
        })

      rescue Stripe::CardError => e
        flash[:error] = e.message
        redirect_to new_charge_path
      end
    end

    respond_to do |format|
      if @order.save
        if user_signed_in?
          @user = current_user
          OrderMailer.order_email(@user, @order).deliver
          format.html { redirect_to @order, notice: 'Order was successfully created.' }
          format.json { render :show, status: :created, location: @order }
          else
            format.html { render :new }
            format.json { render json: @order.errors, status: :unprocessable_entity }
          end
          if buyer_signed_in?
            @user = current_buyer
            OrderMailer.order_email(@user, @order).deliver
            format.html { redirect_to @listing, notice: 'Order was successfully created.' }
            format.json { render :show, status: :created, location: @order }
          else
            format.html { render :new }
            format.json { render json: @order.errors, status: :unprocessable_entity }
          end
        end
      end
    end


  def update
    respond_to do |format|
      if @order.update(order_params)
        if user_signed_in?
          format.html { redirect_to @order, notice: 'Order was successfully uploaded.' }
          format.json { render :show, status: :ok, location: @order }
        else
          format.html { render :edit }
          format.json { render json: @order.errors, status: :unprocessable_entity }
        end
        if buyer_signed_in?
          format.html { redirect_to @order, notice: 'Order was successfully updated.' }
          format.json { render :show, status: :ok, location: @order }
        else
          format.html { render :edit }
          format.json { render json: @order.errors, status: :unprocessable_entity }
        end
      end
    end
  end

  def destroy
    @order.destroy
    respond_to do |format|
      format.html { redirect_to orders_url, notice: 'Order was successfully destroyed.' }
      format.json { head :no_content }
    end
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_order
      @order = Order.find(params[:id])
    end

    def order_params
      params.require(:order).permit(:name, :address, :city, :state, :image, :video, :description, :order_status)
    end

    def deny_to_visitors
      redirect_to root_path unless user_signed_in? or buyer_signed_in?
    end

    def user_orders
      @order.buyer_id = current_buyer.id or current_user
    end

end