Stripe Buy Button Fundamentals

You've likely seen the Stripe Buy button in action, but might not yet be familiar with exactly how it works, nor how it seems to magically pass along payment-related information to an application controller. In this Easy E-Commerce Using Laravel and Stripe excerpt we'll introduce the Buy button, and explain how Stripe automatically injects hidden form fields into the purchase form following successful credit card validation.

Head over to http://wedewlawns.com/products and you'll find a list of products sold through the We Dew Lawns website. Feel free to have a look at the source code and even complete a transaction (using fake credit card information). The site is of course not real and when you click on a product's Buy button you'll see a yellow Test Mode label located at the top right of the browser screen. Stripe automatically adds this label when the service is running in test mode, meaning no credit cards are actually processed.

Each Buy button is actually generated by a bit of JavaScript hosted by Stripe. Here's a snippet of the code used on the website to create these buttons:

{!! Form::open(array('url' => '/checkout')) !!}
{!! Form::hidden('product_id', $product->id) !!}
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="{{env('STRIPE_API_PUBLIC')}}"
data-name="WeDewLawns.com"
data-billingAddress=true
data-shippingAddress=true
data-label="Buy ${{ $product->price }}"
data-description="{{ $product->name }}"
data-amount="{{ $product->priceToCents() }}">
</script>
{!! Form::close() !!}

As you can see, a <script> element references https://checkout.stripe.com/checkout.js, and identifies eight additional attributes (class, data-key, data-name, etc.) which are used to tweak the behavior and appearance of the Buy button and checkout modal. Let's review the purpose of each attribute:

  • class: Setting the class attribute to stripe-button stylizes the Buy button using the default blue theming. It is possible to customize the button styling although doing so is out of the scope of this book; see the Stripe documentation for more information about customization options.
  • data-key: The data-key attribute is used to pass your publishable API key to Stripe. Refer back to the section "Adding Your API Key" in Chapter 3 for more information about making this key available to your application.
  • data-name: The data-name attribute identifies the name of your website or company. If you refer back to the Stripe checkout modal screenshot you'll see this value is used at the top of the modal.
  • data-billingAddress: When data-billingAddress is set to true, the checkout modal will require the user to supply his billing address.
  • data-shippingAddress: When data-shippingAddress is set to true, the checkout modal will require the user to supply his shipping address. Logically this is useful when the customer is purchasing a physical product.
  • data-label: The data-label field contains the text used in the Buy button.
  • data-description: The data-description field contains the text found below the company or website name in the checkout modal. Referring back to the earlier screenshot, this is set to "3.5 HP Lawnmower".
  • data-amount: The data-amount field contains the amount of money the user's credit card will be charged. This value will be displayed in the payment submission button (Pay $4.99 in the second step of the payment process as depicted in the early screenshot). It is very important for you to understand this is only used for purposes of displaying the price. You will subsequently use Cashier to identify exactly how much the customer's card will be charged. Also, notice how we use a Product model method named priceToCents() to identify this value. This is because Stripe requires the value to be provided in pennies, meaning $4.99 will need to be identified as 499.

The Product model priceToCents method used to convert the product price into a penny-based representation is very simple:

public function priceToCents()
{
    return $this->price * 100;
}

The data found in the <script> element will be submitted via Ajax, and if successful Stripe will embed several hidden elements into the form, including the aforementioned Stripe token, and various other important bits of information such as the customer's billing and shipping addresses (if you configured the form to require this information). For instance, given the above Buy button <script> element configuration, Stripe will embed the following fields into the form following a successful submission:

<input type="hidden" name="stripeToken" value="tok_15rtKuBJbKzGetVOPKP">
<input type="hidden" name="stripeTokenType" value="card">
<input type="hidden" name="stripeEmail" value="wjgilmore@example.com">
<input type="hidden" name="stripeBillingName" value="Jason Gilmore">
<input type="hidden" name="stripeBillingAddressLine1" value="12 Jump Ct.">
<input type="hidden" name="stripeBillingAddressZip" value="43016">
<input type="hidden" name="stripeBillingAddressState" value="OH">
<input type="hidden" name="stripeBillingAddressCity" value="Dublin">
<input type="hidden" name="stripeBillingAddressCountry" value="United States">
<input type="hidden" name="stripeBillingAddressCountryCode" value="US">
<input type="hidden" name="stripeShippingName" value="Jason Gilmore">
<input type="hidden" name="stripeShippingAddressLine1" value="12 Jump Ct.">
<input type="hidden" name="stripeShippingAddressZip" value="43016">
<input type="hidden" name="stripeShippingAddressState" value="OH">
<input type="hidden" name="stripeShippingAddressCity" value="Dublin">
<input type="hidden" name="stripeShippingAddressCountry" value="United States">
<input type="hidden" name="stripeShippingAddressCountryCode" value="US">

By injecting this additional information into the form, you'll be able to access it in order to complete the transaction and optionally additionally record the order details to your local database. The information will be sent to whatever endpoint you've defined in the form's action attribute, which in the case of the above example is set to the Checkout controller. We'll create this controller in just a bit, however first let's turn our attention to creating a facility for recording order information.


Written by W. Jason Gilmore on May 26, 2015

What are you waiting for? Start implementing Stripe and Laravel today!

Buy Now for $29.99

European customers: Leanpub will add VAT to the purchase price.

Stay up to date by joining the newsletter

No Spam, Unsubscribe Anytime