Stripe Payment Gateway return error

Question

I'm trying to process a payment with Stripe, but am getting an error after the form submits and reloads. The error is

"Sorry, there was an unexpected error communicating with the payment gateway."

I did a little digging and dumped out the exception being throw inside OrdersService.php file. The exception message says "The number parameter is required"

Any thoughts what the issue may be?

Thanks!

UPDATE: Here is the code

Checkout Page: https://gist.github.com/bryantAXS/6989698

JS: https://gist.github.com/bryantAXS/6989724 (Token created at line 315)

I can confirm the token is being created and added to the payment[token] field correctly before the page has submitted.

UPDATE 2: I've written a new answer below that is a temporary fix until more clarification or the source is updated.

Answer 1

I've somewhat pinpointed the issue, but I'm not too sure where to start fixing it.

Essentially, the token generated on the client side which is being set to an input with the name payment[token] is not being recognized inside the payment processing.

Inside the file Omnipay/Stripe/Message/AuthorizeRequest.php file there is a if/else conditional looking for the token, however that token wasn't being found.

inside the getToken() method being called to retrieve it (line 153 of Common/Message/AbstractRequest.php) , there was the line

return $this->getParameter('token');

I replaced that with

return $_POST["payment"]["token"] And the checkout processed correctly.

Naming the form payment[token] is how the documentation says to set it, but there seems to be a bug somewhere there.

Answer 2

Store 2.x use the new Stripe.js which requires that you use data-stripe="" on your form elements oppose to id="" and name=""for all of your payment specific fields. Here is a stripped down version of your template:

<h4>Payment Information</h4>

<label>Name</label>
<input data-stripe="name" type="text" placeholder="">

<label>Credit Card Number</label>
<input data-stripe="number" type="text" placeholder="">

<label>Expiration Month</label>
<div class="select-wrapper">
<span class="select-text">January</span>
<span class="ss-dropdown"></span>
<select data-stripe="exp-month" id="payment_exp_month" class="hidden-dropdown">
  <option value="01" data-text="January">January</option>
  <option value="02" data-text="February">February</option>
  <option value="03" data-text="March">March</option>
  <option value="04" data-text="April">April</option>
  <option value="05" data-text="May">May</option>
  <option value="06" data-text="June">June</option>
  <option value="07" data-text="July">July</option>
  <option value="08" data-text="August">August</option>
  <option value="09" data-text="September">September</option>
  <option value="10" data-text="October">October</option>
  <option value="11" data-text="November">November</option>
  <option value="12" data-text="December">December</option>
</select>
</div>

<label>Expiration Year</label>
<div class="select-wrapper">
<span class="select-text">2013</span>
<span class="ss-dropdown"></span>
<select data-stripe="exp-year" id="payment_exp_year" class="hidden-dropdown">
  <option value="2013" data-text="2013">2013</option>
  <option value="2014" data-text="2014">2014</option>
  <option value="2015" data-text="2015">2015</option>
  <option value="2016" data-text="2016">2016</option>
  <option value="2017" data-text="2017">2017</option>
  <option value="2018" data-text="2018">2018</option>
  <option value="2019" data-text="2019">2019</option>
  <option value="2020" data-text="2020">2020</option>
</select>
</div>

<label>Card Verification Number</label>
<input data-stripe="cvc" type="text" placeholder="">

<input type="hidden" id="payment_token" name="payment[token]" value="" />
<input type="hidden" name="payment_method" value="stripe">

Once you do that you will need to update your JS to use the new store.js. In its most basic form you will need the following:

$(function() {
    $.getScript('https://js.stripe.com/v2/', function() {
        Stripe.setPublishableKey('YOUR_PUBLISHABLE_KEY_HERE');
    });

    /* Ensure your checkout submit button has id="checkout_submit" */
    $checkout_submit = $("#checkout_submit").click(function() {

        /* Only handle requests for Stripe gateway */
        if (this.form.elements["payment_method"].value == "stripe") {

            /* Temporarily disable the checkout submit button */
            $checkout_submit.attr('disabled', true);

            /* Create a Stripe card token */
            Stripe.card.createToken($(this.form), stripeResponseHandler);

            /* We don't want to submit the form yet */
            return false;
        }
    });

    /* This function is triggered once Stripe has generated the token */
    function stripeResponseHandler(status, response) {
        /* Re-enable the checkout submit button */
        $checkout_submit.attr('disabled', false);

        /* Check whether we have a valid credit card */
        if (response.error) {
            alert(response.error.message);
        } else {
            /* Set the card token and submit the checkout form */
            $("#payment_token").val(response.id);
            $checkout_submit.off("click").click();
        }
    }
});

Once you have that working you can use the Stripe docs to add any additional functionality that you want.

• Adjusted Checkout Template

Answer 3

This has been fixed in Store 2.0.4:

Fixed an error with Stripe gateway where card token was not submitted correctly

Per Bryant's answer, in Store 2.0.3 the card token was not being correctly passed through to Stripe which meant the payment was unsuccessful.