Question

我的问题是我有一个提交的表格，其中信用卡字段为空白。

我将信用卡字段与其他表格组合在一起，这就是问题所在。

所以我的问题是，我如何要求使用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>

这是订单控制器的create方法，现在有点混乱：

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

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

Answer 1

正如@Auriga所指出的那样，信用卡验证是在令牌化过程中通过条纹完成的。

但是，Stripe Element确实为您提供了一种验证字段并向前端用户提供更有意义的反馈的方法。

https://stripe.com/docs/stripe-js/reference#input-validation

Answer 2

我可以看到您正在使用https://stripe.com/docs/stripe-js模板

尝试添加window.onload = function () { var stripe = Stripe('pk_test_413253....f0B8'); .............................................. // UR CODE }

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

如何在“条纹元素”字段中要求信用卡字段？

2 个答案: