Scripts Overview in Bold Cashier

 Caution

This article requires significant knowledge of JavaScript. If you are not comfortable with JavaScript, we strongly suggest contacting your developer before proceeding.

Overview

With Bold Cashier, you can use custom tracking scripts to customize the information that gets sent to Google Analytics and Facebook Pixel. You can also integrate with other analytics and tracking services, that are not directly integrated with Cashier, to track successful purchases.

Note: Visit Integration Hub for Bold Cashier for more information on how to link your tracking accounts to Cashier.

If you need some help in creating a script to add to Bold Cashier, you can reach out to Shopify Experts through StoreTasker.

To set up custom tracking scripts in Cashier, please follow these steps:

Cashier Tracking Scripts

While in the Bold Cashier app, navigate to Settings > Analytics. 

 

Setup

While in the Analytics setting, scroll down to "Custom Script" and enable to toggle beside "Enable custom script". After this has been enabled, enter in your custom script(s) and then select Save

 

Limitations

There are a few limitations when it comes to custom tracking scripts.

  • The custom scripts cannot include <script> tags. This includes script tags that call external javascript.
  • Liquid code cannot be used for variables, because the correct values will not be populated. You will need to use Bold Variables.
  • There are certain types of script that won't work in the custom scripts section of Bold Cashier.
    • Any script that adds anything to the checkout. Such as an image, a popup, a link, an input field.
    • Any service that does heat mapping to track how your customer interacts with the checkout.
    • Anything that requires Google Tag Manager, or anything that requires code being added in the <head> of the checkout.
  • The custom tracking scripts only run on the Thank You Page, to track successful purchases.
 Pro-Tip

Cashier has an integration with Google Tag Manager to allow you more control over your analytics.

 

Variables

These are some of the order parameters you can use to create your custom scripts:

  • BOLD.order.id: The ID number of the customer's order, in Cashier.
  • BOLD.order.currency: The currency the order was purchased in.
  • BOLD.order.customer.email: The customer's email address.
  • BOLD.order.billing_address.province_code: The province or state ID code (Manitoba = MB).
  • BOLD.order.billing_address.country_code: The customer's country ID code (Canada = CA).
  • BOLD.order.line_items.sku: The item's SKU number.
  • BOLD.order.line_items.title: The product title (product name).
  • BOLD.order.line_items.price: The price of the item in the lowest denomination ($39.95 = 3995).
  • BOLD.order.line_items.quantity: The quantity of a purchased product.
  • BOLD.order.line_items.platform_variant_id: The item's Shopify variant ID.
  • BOLD.order.line_items.platform_product_id: The item's Shopify product ID.
  • BOLD.order.subtotal: The order's subtotal in the lowest denomination ($39.95 = 3995).
  • BOLD.order.total_shipping: The total cost of shipping.
  • BOLD.order.total_tax: The total amount of taxes on the order.
  • BOLD.order.total: The complete order total cost (including tax and shipping).

Our Analytics Documentation has more information about what's available in the order object.

 

Troubleshooting

When it comes to loading in an external script, it is usually done by using script tags.

Example:

<script src="https://www.domain.com/script.js"></script>

However, Cashier doesn't allow you to add script tags into the custom tracking scripts. You can use the following code to load an external script.

var script = document.createElement("script");  // create a script DOM node
script.src = url; // set its src to the provided URL

document.head.appendChild(script); // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead)

Cashier Scripts

 Caution

This feature is currently in a beta access state. Please contact our Merchant Success team to get access.

Cashier Scripts is a plugin for Bold Cashier that allows you to further customize your checkout. There are many different functionalities that can be included in your checkout with Cashier Script. With Cashier Scripts, you're able to:

  • Discount your customer's order
  • Add order fees
  • Include additional products
  • Place different types of widgets in the checkout
  • Offer automatic discounts
  • Add site trust badges
  • Create a pop-up for your return policy, and so much more.

To set-up Cashier Scripts in Bold Cashier, please follow these steps:

 

Enable Cashier Scripts

In order for the scripts to load correctly in the Bold Cashier checkout, the Cashier Scripts plugin will need to be installed in Bold Cashier. The plugin can be installed through these steps: 

  1. From within Bold Cashier, select Marketplace.
  2. Select Enable next to Cashier Scripts.
  3. Select Go to Admin.
  4. Enter your Shopify URL and select Install or Login.
  5. Select Install unlisted app.

 

Set-up Cashier Scripts

Once the Cashier Scripts plugin has been installed, you can start adding in scripts into the plugin. 

Custom Scripts can be added into Cashier Scripts by selecting Create Script at the top of the page in the Cashier Scripts plugin. The plugin can be found in your list of Apps in your Shopify admin. 

After selecting Create Script, the app will display a pop-up window with 3 different types of scripts:

  • Initialize: This is where most of your script coding will be. You can only have one initialize script. This script runs when Cashier's checkout loads (on the "initialize checkout" event).
  • Shipping: This is where you can define custom shipping rates. You can also write multiple shipping scripts.
  • Widget: You're able to write custom widget scripts in this section. These scripts will need to include CSS and HTML coding to set the styling and content of your widget (if it's a modal or an iframe). You can also have multiple widget scripts.

Please visit Scripts Code Library in Bold Cashier for example scripts that can be used in Cashier Scripts.

 

Limitations

  • You cannot use a widget to trigger other actions in the checkout. All of your scripts will be run when Cashier's checkout loads. If you want to trigger an event, or action, through a widget please visit our developers portal, then contact our Partners team to get started.
  • Only the information that is provided in the Cashier order can be expanded upon.
  • You cannot integrate other third-party apps using Cashier Scripts. If you want to integrate another third-party app with Cashier, please take a look at our developers portal, then contact our Partners team to get started. 

 

Customizations

You can find several lists of JavaScript objects, variables, and functions that can be used to write your Bold Cashier scripts below:

Note: Only the data available in the Cashier order object can be used in your scripts.

Cart Object

Method Return Type Description
.attributes Object Returns an object containing the Shopify cart attributes.
.customer Object Returns a customer object.
.item_count Integer Returns the number of items in the cart.
.language_iso String

Returns the language that the checkout is currently set to. Examples:

  • en
  • fr
  • es
.line_items LineItem[] Returns an array of line items for the cart.
.shop String Returns the shop name.
.total_weight Integer Returns the total weight of the cart in grams.

Customer Object

Method Return Type Description

.core_info

CoreInfo

Returns an object containing Shopify specific information about the customer.

.shipping

ShippingAddress

Returns an object containing the customer's current shipping address.

.billing

BillingAddress

Returns an object containing the customer's current billing address.

CoreInfo

Method Return Type Description

.first_name

String

Returns the first name of the customer that is logged in.

.last_name

String

Returns the last name of the customer that is logged in.

.tags

String

Returns the tags for the customer that is logged in.

.customer_id

Integer Returns the platform customer ID that is logged in.

.email

String Returns the email for the customer that is logged in.

.accepts_marketing

Boolean Returns if the logged in customer has accepted marketing.

ShippingAddress

Method Return Type Description
.first_name String Returns the first name of the customer entered in checkout.
.last_name String Returns the last name of the customer entered in checkout.
.company String  Returns the company the customer entered in checkout.
.address String  Returns the address the customer entered in checkout.
.address2 String  Returns the second address the customer entered in checkout.
.city String  Returns the city the customer entered in checkout.
.country String  Returns the country the customer selected.
.country_code String Returns the country code that corresponds to the country selected.
.province String  Returns the province or state the customer selected.
.province_code String  Returns the province or state code that corresponds to the one selected.
.postal_code String  Returns the postal/zip code the customer entered in checkout.
.phone String  Returns the phone number the customer entered in checkout.

BillingAddress

Method Return Type Description
.first_name String Returns the first name of the customer entered in checkout.
.last_name String Returns the last name of the customer entered in checkout.
.company String  Returns the company the customer entered in checkout.
.address String  Returns the address the customer entered in checkout.
.address2 String  Returns the second address the customer entered in checkout.
.city String  Returns the city the customer entered in checkout.
.country String  Returns the country the customer selected.
.country_code String Returns the country code that corresponds to the country selected.
.province String  Returns the province/state the customer selected.
.province_code String  Returns the province code that corresponds to the province selected.
.postal_code String  Returns the postal/zip code the customer entered in checkout.
.phone String  Returns the phone number the customer entered in checkout.

LineItem

Method Return Type Description
.title String Returns the title of the line item. This is a combination of the product and variant title.
.product_title String Returns the product title.
.variant_title String Returns the variant title.
.properties Object Returns an object containing all of the line item properties on the line item.
.quantity Integer Returns the quantity for the line item.
.price Integer Returns the line price of the line item.
.visible Boolean Returns if the line item is visible.
.taxable Boolean Returns if the line item is taxable.
.line_item_key String Returns the unique line item key.
.weight Integer Returns the weight of the line item.
.weight_unit String Returns the weight unit for the line item.
.id String Returns the line item id.
.platform_variant PlatformVariant Returns a platform variant object.

PlatformVariant

Method Return Type Description
.id Integer Returns the Shopify variant id.
.barcode String Returns the Shopify barcode for the variant.
.compare_at_price Integer Returns the compare at price for the variant.
.fulfillment_service String Returns the fulfillment service.
.grams Integer Returns the weight in grams for the variant.
.inventory_management String Returns the inventory management for the variant.
.inventory_policy String Returns the inventory policy for the variant.
.option1 String Returns the Shopify option1 title.
.option2 String Returns the Shopify option2 title.
.option3 String Returns the Shopify option3 title.
.position Integer Returns the index of the variant that is found in the order.
.price Integer Returns the price of the variant.
.product_id Integer Returns the Shopify product id associated to this variant.
.requires_shipping Boolean Returns if the variant requires shipping.
.sku String Returns the Shopify variant sku.
.taxable Boolean Returns if the variant is taxable.
.title String Returns the Shopify variant title.
.inventory_quantity Integer Returns the Shopify inventory quantity.
.product Product Returns a product object.

Product

Method Return Type Description
.id Integer Returns the Shopify product id.
.handle String  Returns the Shopify product handle.
.product_type String  Returns the Shopify product type.
.title String Returns the title of the product.
.vendor String Returns the Shopify product vendor.
.tags String

Returns a comma separated list of tags associated to the product in Shopify.

LineItem

Method Description
.changeLinePrice(price) Changes the price of the specific line item to the price that is passed. Price must be in cents.
.addLineProperty(property) Adds a line item property to the specific line item. Property must be an object with a key and value property.

Global

Method Description
addFee(id, test, type, value, taxable)

Adds a fee to the order.

  • id - A Unique Identifier for this fee.
  • text - A short description (e.g. “Gift wrapping”).
  • type - Percentage or fixed.
  • value - Amount or percent to be charged.
    • taxable - Sets if Cashier should tax this fee or not.
addLineItem(line_item)

Adds a variant to the order. An object must be passed to this method with the following properties:

  • platform_variant_id - Shopify’s variant ID.
  • line_item_key - Unique identifier of this line item (optional).
  • quantity - The quantity of the line item (optional).
  • properties - Line item properties associated to the line item (optional).
  • price - Will override the price of the product with this value in cents (optional).
discountCartByPercent(percent, message)

Discounts the order by a percentage

  • percent - The percentage to discount the order by.
  • message - The message that displays beside the discount.
addIframeWidget(name, options)

Adds an iframe widget to Cashier.

  • name - The name of the widget.
  • options:
    • position - Sets the position where the widget should appear in Cashier.
    • source - If no url is provided, Cashier Scripts will use the name argument to find a widget of the same name in your "Apps" section (optional).
    • frame_origin - Is only needed if you are providing a source. This needs to be the domain that is used in the source (optional).
addModalWidget(name, options)

Adds a modal widget to Cashier.

  • name - The name of the widget.
  • options:
    • position - Sets the position where the widget should appear in Cashier.
    • text - Text to appear in the widget.
    • icon - Image url for icon that should show in the widget.
    • click_url - If no url is provided, Cashier Scripts will use the name argument to find a widget of the same name in your "Apps" section (optional).
    • frame_origin - Is only needed if you are providing a source. This needs to be the domain that is used in the source (optional).
addExternalLinkWidget (name, options)

Adds external link widget to Cashier.

  • name - The name of the widget.
  • options
    • position - Sets the position where the widget should appear in Cashier.
    • text - Text to appear in the widget.
    • icon - Image url for an icon that should show in widget.
    • url - Where the widget should link to when a customer clicks the widget.
addShippingOverride(name)

Adds a shipping override to the script. Shipping overrides live within a separate script and you can conditional include as many shipping overrides as you want.

  • name - The name of the shipping override script to include.

Widget Scripts

Method Description

Widget.close();

Removes the widget from the current Cashier instance.

Widget.receiveOrder(callback);

Event listener for when you request the order. The callback will then return an order object for the current Cashier instance.

Widget.requestOrder();

Tells Cashier to send order information to your widget. You will need to be listening with the Widget.receiveOrder method before you call this function.

Widget.setHeight(height)

This must be called using a script tag in a widget (on page load) in order for Cashier to set the height of the widget.

Widget Positions

Method Description
billing Appears in the billing address section underneath the phone number input.
billing_address_after Appears after the billing address section.
main_content_beginning Appears at the top of the .Main__Content element.
main_content_end Appears at the bottom of the .Main__Content element.
customer_info Appears near the customer email input.
discount Appears below the discount code input.
discount_top Appears above the discount code input.
header Appears near the store logo.
line_items Appears below the line items.
payment_gateway Appears near the payment section.
payments Appears below the payments section within the order summary.
payments_top Appears above the payments section within the order summary.
price_summary Appears below the price summary (Subtotal) section within the order summary.
price_summary_top Appears above the price summary (Subtotal) section within the order summary.
shipping_address_before Appears right before the shipping address section.
shipping Appears in the shipping address section, at the end under the phone number input.
shipping_lines Appears near the shipping methods.
summary_above_header Appears above the order summary section.
summary_top Appears at the top of the order summary section, below the Summary header.
total Appears below the total section within the order summary.
total_top Appears above the total section within the order summary.
thank_you Appears on the order confirmation page.
Was this article helpful?
0 out of 0 found this helpful