Expresso Store Stripe integration - Passing shipping details to Stripe null

Question

Using Expresso Store and Stripe, I'm getting a conflict with either the naming convention of Expresso Store and stripe.js stripeResponseHandler, or my jQuery

Passing "user" details is null upon submit to Stripe.

My Expresso Store post details via firebug:

XID 7db7d1ad91f9fa13deeb13de67c784226ed345e7
billing_address 1   243 Blank Rd
billing_address2    
billing_address3     Blastoff
billing_country us
billing_name    Denny Test
billing_phone   330-000-0000
billing_postcode     44231
billing_region  OH
form_name   
next    Confirm Order
next_url    store/confirm-stripe
order_email [email protected]
return_url  store/details
secure_return   1
shipping_address1   
shipping_address2   
shipping_address3   
shipping_country    us
shipping_name   
shipping_phone  
shipping_postcode   44281
shipping_region OH
shipping_same_as_billing    0
shipping_same_as_billing    1
site_id 1

My Response handler:

  function stripeResponseHandler(status, response) {
    $("#checkout_submit").attr('disabled', false);
    if (response.error) {
      alert(response.error.message);
    } else {
     var token = response['id'];
     var form$ = $("#payment_token");
      $(form$).val(token);
     form$.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
      $("#checkout_submit").unbind("click").click();

    }
  }

And the response in Stripe:

object: "card"
last4: "4444"
type: "MasterCard"
exp_month: 1
exp_year: 2014
fingerprint: "3HSdYop7eOmsdo3a"
country: "US"
name: "Denny Test"
address_line1: "undefined"
address_line2: "undefined"
address_city: null
address_state: null
address_zip: "undefined"
address_country: null
cvc_check: "pass"
address_line1_check: "pass"
address_zip_check: "pass"

Answer 1

I solved the issue in case anyone is looking for the same result.

The jQuery stripeResponseHandler:

          Stripe.createToken({
        name: $("#payment_name").val(),
        number: $("#payment_card_no").val(),
        cvc: $("#payment_card_csc").val(),
        exp_month: $("#payment_exp_month").val(),
        exp_year: $("#payment_exp_year").val(), 
        address_line1: $('#billing_address1').val(),
        address_line2: $('#billing_address2').val(),
        address_zip: $('#billing_postcode').val(),
        address_state: $('#billing_region').val(),
        address_country: $('#billing_country').val()
      }, stripeResponseHandler);


      return false;
    }
  });

The long and short of it is, you have to declare the values when creating the token in jQuery. Also, the input values you're looking to pass to Stripe have to be either included in the form of the actual fields or hidden values within the page you're submitting from.

In my case using Expresso Store:

<fieldset id="billing_details" style="width:50%; float:left;">
    <legend>Billing Details</legend>
    <div class="control-group clearfix {if error:billing_name}error{/if}">
        <label class="control-label" for="billing_name">Name</label>
        <div class="controls">
            {field:billing_name} {error:billing_name}
        </div>
    </div>

    <div class="control-group clearfix {if error:billing_address1}error{/if}">
        <label class="control-label" for="billing_address1">Address</label>
        <div class="controls">
            {field:billing_address1} {error:billing_address1}
        </div>
    </div>

    <div class="control-group clearfix {if error:billing_address2}error{/if}">
        <div class="controls">
            {field:billing_address2} {error:billing_address2}
        </div>
    </div>

    <div class="control-group clearfix {if error:billing_address3}error{/if}">
        <label class="control-label" for="billing_address3">City</label>
        <div class="controls">
            {field:billing_address3} {error:billing_address3}
        </div>
    </div>

    <div class="control-group clearfix {if error:billing_postcode}error{/if}">
        <label class="control-label" for="billing_postcode">Postcode</label>
        <div class="controls">
            {field:billing_postcode} {error:billing_postcode}
        </div>
    </div>

    <div class="control-group clearfix {if error:billing_region}error{/if}">
        <label class="control-label" for="billing_region">Region</label>
        <div class="controls">
            {field:billing_region} {error:billing_region}
        </div>
    </div>

    <div class="control-group clearfix {if error:billing_country}error{/if}">
        <label class="control-label" for="billing_country">Country</label>
        <div class="controls">
            {field:billing_country} {error:billing_country}
        </div>
    </div>

    <div class="control-group clearfix {if error:billing_phone}error{/if}">
        <label class="control-label" for="billing_phone">Phone</label>
        <div class="controls">
            {field:billing_phone} {error:billing_phone}
        </div>
    </div>

    <div class="control-group clearfix {if error:order_email}error{/if}">
        <label class="control-label" for="order_email">Email</label>
        <div class="controls">
            {field:order_email} {error:order_email}
        </div>
    </div>

</fieldset>

    <fieldset>
        <legend>Shipping Details</legend>
<div style="margin: 0 0 0 40px;">

        <div id="shipping_details_drawer">

            <div class="control-group clearfix {if error:shipping_name}error{/if}">
                <label class="control-label" for="shipping_name">Name</label>
                <div class="controls">
                    {field:shipping_name} {error:shipping_name}
                </div>
            </div>

            <div class="control-group clearfix {if error:shipping_address1}error{/if}">
                <label class="control-label" for="shipping_address1">Address</label>
                <div class="controls">
                    {field:shipping_address1} {error:shipping_address1}
                </div>
            </div>

            <div class="control-group clearfix {if error:shipping_address2}error{/if}">
                <div class="controls">
                    {field:shipping_address2} {error:shipping_address2}
                </div>
            </div>

            <div class="control-group clearfix {if error:shipping_address3}error{/if}">
                <label class="control-label" for="shipping_address3">City</label>
                <div class="controls">
                    {field:shipping_address3} {error:shipping_address3}
                </div>
            </div>

            <div class="control-group clearfix {if error:shipping_postcode}error{/if}">
                <label class="control-label" for="shipping_postcode">Postcode</label>
                <div class="controls">
                    {field:shipping_postcode} {error:shipping_postcode}
                </div>
            </div>

            <div class="control-group clearfix {if error:shipping_region}error{/if}">
                <label class="control-label" for="shipping_region">Region</label>
                <div class="controls">
                    {field:shipping_region} {error:shipping_region}
                </div>
            </div>

            <div class="control-group clearfix {if error:shipping_country}error{/if}">
                <label class="control-label" for="shipping_country">Country</label>
                <div class="controls">
                    {field:shipping_country} {error:shipping_country}
                </div>
            </div>

            <div class="control-group clearfix {if error:shipping_phone}error{/if}">
                <label class="control-label" for="shipping_phone">Phone</label>
                <div class="controls">
                    {field:shipping_phone} {error:shipping_phone}
                </div>
            </div>


        </div>
        <div class="control-group clearfix">
            <div class="controls">
                <label for="shipping_same_as_billing" class="checkbox">
                    {field:shipping_same_as_billing} Same as Billing Details
                </label>


            </div>
        </div>
</div>
    </fieldset> 

Answer 2

As Denny has mentioned there are a few extra fields that you can pass to Stripe when you creating the token. For most sites that I have worked on the last step when the user enters their CC details usually shows the billing/shipping details as text text instead of an input as they are just confirming the details are correct.

So instead of adding the fields back in as form inputs or creating them as hidden inputs you can use the .text() property. I am using a slightly modified version of the store_example/checkout3 template below (from about line 32ish).

<fieldset>
    <legend>Billing Details</legend>
    <div class="control-group">
<div id="billing_name"><b>{billing_name}</b></div>
<div id="billing_address1">{billing_address1}</div>
<div id="billing_address2">{billing_address2}</div>
<div id="billing_city">{billing_address3}
<div id="billing_zip"> {billing_postcode}</div>
<div id="billing_region_name">{billing_region_name}</div>
<div id="billing_country">{billing_country_name}</div>
<div id="billing_phone">{billing_phone}</div>
<div>{order_email}</div>
    </div>
</fieldset>

Then in your footer area you would want to adjust the JS where you create the Stripe Token as follows

/* Create a Stripe card token */
Stripe.createToken({
name: $("#payment_name").val(),
number: $("#payment_card_no").val(),
cvc: $("#payment_card_csc").val(),
exp_month: $("#payment_exp_month").val(),
exp_year: $("#payment_exp_year").val(),
address_line1: $("#billing_address1").text(),
address_line2: $("#billing_address2").text(),
address_city:  $("#billing_address2").text(),
address_state: $("#billing_region_name").text(),
address_zip: $("#billing_zip").text(),
address_country: $("#billing_country").text()

/* any additional fields you would like to pass through with a comma at the end of every line but the last one */
}, stripeResponseHandler);

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

You can see the full list of the parameters that are available here. For the initial setup of Stripe with Exp:resso Store go here.