顧客の配送情報とカードの詳細を含むフォームがあります。検証にはhttp://bassistance.de/jquery-plugins/jquery-plugin-validation/を使用しています。現在、すべてのフォーム フィールドは、ストライプ カードの検証を含め、フォームの送信時に検証されます。問題は、顧客が自分のカード情報を正しく入力し、フォームの他の領域が検証されていない場合でも、請求が行われることです。ストライプ検証を実行する前に、1 つの送信ボタンで請求情報を検証することはできますか? 2 段階のプロセスに分割する必要はありませんか? 以下のコードを参照してください。ありがとう！
<div class="stripe-errors"><span class="payment-errors"></span></div>
<form action="charge.php" method="POST" id="payment-form" class="form" >
<div class="pleft">
<label for="firstname">First Name</label>
<input type="text" size="20" value="<?php echo $_SESSION['sfirst'] ?>" name="fname" class="required" placeholder="First"/>
</label>
<label for="lastname">Last Name</label>
<input type="text" size="20" value="<?php echo $_SESSION['slast'] ?>" name="lname" class="required" placeholder="Last"/>
<label for="email">Email</label>
<input type="text" size="20" value="<?php echo $_SESSION['semail'] ?>" name="email" class="required email" placeholder="email@address.com"/>
<label>Shipping Address</label>
<input type="text" size="20" value="<?php echo $_SESSION['saddress'] ?>" name="address" class="required" placeholder="Address"/>
</div>
<div class="pmiddle">
<label>City</label>
<input type="text" size="20" value="<?php echo $_SESSION['scity'] ?>" name="city" class="required" placeholder="City"/>
<label>State</label>
<select id="state" value="<?php echo $_SESSION['sstate'] ?>" name="state" class="required" >
<option value="">Select State</option>
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="AZ">Arizona</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DC">District of Columbia</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="IA">Iowa</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MA">Massachusetts</option>
<option value="MD">Maryland</option>
<option value="ME">Maine</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MO">Missouri</option>
<option value="MS">Mississippi</option>
<option value="MT">Montana</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="NE">Nebraska</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NV">Nevada</option>
<option value="NY">New York</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="PR">Puerto Rico</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VA">Virginia</option>
<option value="VT">Vermont</option>
<option value="WA">Washington</option>
<option value="WI">Wisconsin</option>
<option value="WV">West Virginia</option>
<option value="WY">Wyoming</option>
</select>
<label>Zip Code</label>
<input type="text" size="20" name="zip" value="<?php echo $_SESSION['szip'] ?>" class="required" minlength="5" placeholder="Zip Code"/>
<label>Product Quantity</label>
<select id="orderquantity" name="orderquantity" >
<option value="1">1 Bottle (30 Day Supply)</option>
<option value="2">2 Bottles (60 Day Supply)</option>
<option value="3">3 Bottles (90 Day Supply)</option>
<option value="4">4 Bottles (120 Day Supply)</option>
<option value="5">5 Bottles (150 Day Supply)</option>
<option value="6">6 Bottles (180 Day Supply)</option>
<option value="7">7 Bottles (210 Day Supply)</option>
<option value="8">8 Bottles (240 Day Supply)</option>
</select>
</div>
<div class="pright">
<label>Card Number</label>
<input type="text" size="20" autocomplete="off" class="card-number" />
<label>CVC Security Code </label>
<input type="text" size="4" autocomplete="off" class="card-cvc"/><a class="small-link" data-toggle="modal" href="#cvcs"/>What's this?</a>
<label>Card Expiration (ex. 01/2015)</label>
<select class="card-expiry-month required ">
<option value="">Month</option>
<option value="01">01 January</option>
<option value="02">02 February</option>
<option value="03">03 March</option>
<option value="04">04 April</option>
<option value="05">05 May</option>
<option value="06">06 June</option>
<option value="07">07 July</option>
<option value="08">08 August</option>
<option value="09">09 September</option>
<option value="10">10 October</option>
<option value="11">11 November</option>
<option value="12">12 December</option>
</select>
<select class="card-expiry-year required">
<option value="">Year</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
</div>
<div class="checkbox">
<input type="checkbox" style="visibility:hidden;" value="checked" checked="yes" name="agree" class="required">
</div>
<div class="purchasebutton">
<button type="submit" class="submit-button button green" onclick="return loadSubmit();">Purchase</button>
</div>
<div class="cards">
<img src="/images/trial/cards.png">
</div>
</form>
</div>
フォーム js の検証は次のとおりです。
<script src="/js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript" src="https://js.stripe.com/v1/"></script>
<script type="text/javascript" src="/js/modal.js"></script>
<script type="text/javascript">
//this validates customer information form fields
$(document).ready(function() {
$("#payment-form").validate();
});
</script>
<script type="text/javascript">
// this identifies your website in the createToken call below
Stripe.setPublishableKey('<?PHP echo $publishable_api_key ?>');
function stripeResponseHandler(status, response) {
if (response.error) {
// re-enable the submit button
$('.submit-button').removeAttr("disabled");
// show the errors on the form
$(".payment-errors").html(response.error.message);
document.getElementById("processing").style.visibility = "hidden";
} else {
var form$ = $("#payment-form");
// token contains id, last4, and card type
var token = response['id'];
// insert the token into the form so it gets submitted to the server
form$.append("<input type='hidden' name='stripeToken' value='" + token + "' />");
// and submit
form$.get(0).submit();
}
}
$(document).ready(function() {
$("#payment-form").submit(function(event) {
if (!$("input[name=agree]").is(":checked")) {document.getElementById("processing").style.visibility = "hidden";
return false;
} else {
$('.submit-button').attr("disabled", "disabled");
// createToken returns immediately - the supplied callback submits the form if there are no errors
Stripe.createToken({
number: $('.card-number').val(),
cvc: $('.card-cvc').val(),
exp_month: $('.card-expiry-month').val(),
exp_year: $('.card-expiry-year').val()
}, stripeResponseHandler);
return false;
}
});
if (window.location.protocol === 'file:') {
alert("stripe.js does not work when included in pages served over file:// URLs. Try serving this page over a webserver. Contact support@stripe.com if you need assistance.");
}
});
</script>