Capturing Data With The Stripe Widget

Overview

When users go through the checkout process via the Stripe widget, LSVT allows you to send the data that’s collected in each step of the process to other applications like a CRM or marketing automation platform like Mailchimp. This data can be helpful for several reasons, especially if you’re wanting to retarget potential clients that abandon the checkout process. In this article we’ll take a look at the steps involved with getting the widget setup to send data somewhere.

First, you’ll need to set up the Stripe integration for your VT system. If you haven’t done this yet, head on over to our other support article that will take you through the process. https://support.lightspeedvt.com/knowledge-base/stripe/

Next, you’ll need to set up a Zapier account to receive the data and then send it somewhere else. Here is a link to Zapier’s site where you can register. https://zapier.com/

Once you’ve set up an account with Zapier and logged in, you’ll want to create a zap by clicking the “Make A Zap” button. For the trigger, you’ll want to choose “Webhooks by Zapier”

For the Trigger Event, you’ll choose the “Catch hook” option, then click continue

Zapier will provide you with a “Custom Webhook URL” that you will need to copy and then paste into the webhook section of your VT system.

After you’ve copied the webhook url, you’ll need to head on over to your VT system and add it to the list of webhook enpoints. If you’re not sure where this section is, just follow the click path below

Super User Dashboard -> Integration Management [105] -> Webhook Settings -> Choose your system.

Once you’ve arrived, scroll down the the Details section and check the box to “Send Webhooks”, if it’s not already checked. This will enable data to be sent to the webhook endpoints that you specify below.

Next, click the “Add URL” button and give it a detailed name, paste in the webhook endpoint that you copied from Zapier, and check the boxes for “Stripe Checkoutform Fill Step1, 2 and 3”. Once you’ve done that, click the “Submit” button at the bottom then click the “Save and Continue” button.

If you scroll to the top, you will see “Webhook Testing” section that you can use to send test data to the webhook endpoints that you’ve added. The drop down menu on the left, will display all of the events that you can test and the drop down menu on the right will list all of the endpoints that you’ve added.

When using this testing tool, you’ll be able to see the payload that is sent to Zapier. You’ll also get a response (“success” or “fail”) back from Zapier.

Note: Although the widget only has one field for the customer’s name, the name provided is actually split up into first and last name in the data that is sent. If only one name is provided, then the default for the last name will be “None”

And VOILA!! You’re now able to receive the data collected from each step of the widget. Next, you’ll need to set up the action step of the zap. Whatever you choose for the action step is where the data from the widget will be sent to. This can be a CRM, marketing software like MailChimp or just a plain old google sheet. In an abandon cart scenario, you may want to add a user to an “Abandoned Cart” list when they fill out the first step of the widget and then remove them from that list if they hit the third step of the widget because by then, you’ll know that their payment was processed successfully. You may also want to add a customer to a “Newsletter” list after they purchase and hit the third step of the widget.

Using Tracking Code

The Stripe widget has a dedicated section for you to drop in custom javascript and pixel tracking code. To add tracking code to the widget, follow the click path below

Super User Dashboard -> [101] API Management -> Stripe Integration dropdown -> “Stripe Account”.

From there you’ll be brought to the setup section, you’ll have two option, Individual purchase settings which is for the B2C checkout widget, and Location purchase settings which is for the B2B checkout widget.

Click the dropdown arrow for the option you wish to add tracking code to. Towards the bottom, you’ll see a Custom JS and a Pixel Code section.

The Custom JS area is for any type of Javascript tracking code and the Pixel Code area is for all non-Javascript tracking.

In each area, you’ll be presented with a section to drop in code for each step of the checkout process.

Passing Dynamic Values

If you’re using Facebook Pixels, Google Analytics or another tracking software to track and measure conversions with the Stripe checkout widget, then we have a treat for you.

LSVT makes it easy for you to use these tracking tools with accuracy by allowing you to pass dynamic values, here are some of the values that can be used. 

KeyValue
sf.locationLocation that the user is placed in
sf.product.nameName of the product
sf.product.price_in_centsPrice of the product in cents
sf.product.setupFee_in_centsPrice of the setup fee in cents
sf.product.priceIdThe Stripe product’s price id
sf.user.fnameThe first name that the user entered
sf.user.lnameThe last name that the user entered
sf.user.emailThe email that the user entered
sf.user.phone2The phone number that the user entered
sf.user.loginThe username that the user entered
sf.couponThe coupon code used at checkout
sf.campaignIdThe campaign ID set in the widget settings

Using Facebook pixel, as an example:

fbq(‘track’, ‘Purchase’, {
     value: sf.product.price_in_cents,

     coupon: {sf.coupon},
     contents: [{
           id: sf.product.priceId
},
          quantity: 1
     }],
     content_type: 'product'

});

If using Custom JS, do not use the opening and closing script tags to wrap your code (<script></script>)

If using the Pixel code version, you will also need to wrap dynamic parameters with curly brackets as in this example: {sf.coupon}

Custom Meta Tags

In addition to being able to specify custom meta tags to be constant with a product and sent to Stripe, you also have the ability to send in more “dynamic” custom meta tags via URL parameters.

You will need to append the URL with a parameter of mt and pass its value in this format: sub,sub_key,sub_value;cus,cus_key,cus_value

  • sub – This assigns the metatag to the subscription details
  • sub_key – Name of the meta tag that will be added to the subscription record
  • sub_value – Value for the meta tag that will be added to the subscription record
  • cus – This assigns the metatag to the subscription details
  • cus_key – Name of the meta tag that will be added to the subscription record
  • cus_value – Value for the meta tag that will be added to the subscription record

Example of how it would look, if you wanted to track a referrer and a campaign:

https://www.yourwebsite.com/stripeform_snippet.html?mt=sub,affiliate,John_smith;cus,campaign,facebook

This would be added to Stripe and presented as below:

For questions or assistance, please contact LSVT Support at [email protected]

Updated on August 12, 2022

Related Articles

Need Support?
Can't find the answer you're looking for?
Contact Support