I am experiencing a strange issue in my multi step form implementation using multiform module. Initially I had two steps and third confirmation steps. That worked perfectly including validation on both steps. Later on I was required to integrate Stripe payment form on 3rd step. So, I created additional step 3 for Stripe payment integration. Please note that on this field I am just adding literal fields as I do not want to store them in anywhere and needed to add 'data' attribute(data-stripe) for each form fields for stripe.js to work.
function getFields(){
Requirements::javascript('https://js.stripe.com/v2/');
$fields = new Fieldlist();
$fields->push(new LiteralField('card','<input type="text" data-stripe="number">'));
$fields->push(new LiteralField('cvc','<input type="text" data-stripe="cvc">'));
$fields->push(new LiteralField('month','<input type="text" data-stripe="exp-month">'));
$fields->push(new LiteralField('year','<input type="text" data-stripe="exp-year">'));
retrun $fields;
}
and on template side I have added little javascript to intercept submit, create token using Stripe.js library and submit form using JavaScript .submit(). as given below
<script>
// This identifies your website in the createToken call below
Stripe.setPublishableKey('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
jQuery(function($) {
$('#FORM_ID').submit(function(event) {
var $form = $(this);
Stripe.card.createToken($form, stripeResponseHandler);
// Prevent the form from submitting with the default action
return false;
});
});
function stripeResponseHandler(status, response) {
var $form = $('#FORM_ID');
if (response.error) {
// Show the errors on the form
$form.find('.payment-errors').text(response.error.message);
} else {
// response contains id and card, which contains additional card details
var token = response.id;
// Insert the token into the form so it gets submitted to the server
$form.append($('<input type="hidden" name="stripeToken" />').val(token));
// and submit
$form.get(0).submit();
}
};
</script>
Strangely form goes step back to step 2 instead of going to last confirm step. But, if I comment out //return false; i.e. I let the form submit normally it goes to last confirm step. But in this case I could not receive stripe token as form does not wait for it to return.
Can some one please tell me if I am doing something wrong? I need help. Thanks.
