I am integrating stripe connect payment form. In the form I have a defined form action with the next page's id as get page link for url for next page. Now I have assigned a template page for page.
Also my permalink is working on plain Wordpress template page assigned to page, and on form submission, action is provided to next page not working. It shows the error: page not found
.
If permalink is set to be custom by adding /index.php/%postname%
then page view works for all but form action like: https://siteurl/index.php/post-name not found after form submission. if I re-enter url then sucess page runs properly.
<?php /*Template Name:Stripe*/get_header();?>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
//set your publishable key
Stripe.setPublishableKey('pk_test_uFOdE1YPIXhbssFt1FwH9RGQ');
//callback to handle the response from stripe
function stripeResponseHandler(status, response) {
if (response.error) {
//enable the submit button
$('#payBtn').removeAttr("disabled");
//display the errors on the form
$(".payment-errors").html(response.error.message);
} else {
var form$ = $("#paymentFrm");
//get token id
var token = response['id'];
//insert the token into the form
form$.append("<input type='hidden' name='stripeToken' value='" + token + "' />");
//submit form to the server
form$.get(0).submit();
}
}
$(document).ready(function() {
//on form submit
$("#paymentFrm").submit(function(event) {
//disable the submit button to prevent repeated clicks
$('#payBtn').attr("disabled", "disabled");
//create single-use token to charge the user
Stripe.createToken({
number: $('.card-number').val(),
cvc: $('.card-cvc').val(),
exp_month: $('.card-expiry-month').val(),
exp_year: $('.card-expiry-year').val()
}, stripeResponseHandler);
//submit from callback
return false;
});
});
paymentRequest.on('token', function(ev) {
// Send the token to your server to charge it!
fetch('/charges', {
method: 'POST',
body: JSON.stringify({token: ev.token.id}),
headers: {'content-type': 'application/json'},
})
.then(function(response) {
if (response.ok) {
// Report to the browser that the payment was successful, prompting
// it to close the browser payment interface.
ev.complete('success');
} else {
// Report to the browser that the payment failed, prompting it to
// re-show the payment interface, or show an error message and close
// the payment interface.
ev.complete('fail');
}
});
});
</script>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<h1></h1>
<!-- display errors returned by createToken -->
<span class="payment-errors"></span>
<!-- stripe payment form -->
<form action="<?php echo esc_url( get_permalink(376) ); ?>" method="POST" id="paymentFrm">
<p>
<label>Name</label>
<input type="text" name="name" size="50" />
</p>
<p>
<label>Email</label>
<input type="text" name="email" size="50" />
</p>
<p>
<label>Card Number</label>
<input type="text" name="card_num" size="20" autocomplete="off" class="card-number" />
</p>
<p>
<label>CVC</label>
<input type="text" name="cvc" size="4" autocomplete="off" class="card-cvc" />
</p>
<p>
<label>Expiration (MM/YYYY)</label>
<input type="text" name="exp_month" size="2" class="card-expiry-month"/>
<span> / </span>
<input type="text" name="exp_year" size="4" class="card-expiry-year"/>
</p>
<button type="submit" id="payBtn">Submit Payment</button>
</form>
</div>
<div class="col-md-3"></div>
</div>
</div>
<?php get_footer();?>