Skip to main content

Implementation

In addition to the prerequisites above, the following steps will get Checkout Plus up and running on your store.

Supply your store domain(s) to be added to the API allow list​

To prevent Checkout Plus from inadvertently being placed on the wrong store, the “Origin” header is examined on any requests to ensure a match with the storefrontId. Any number of domains can be added to support testing across different environments, etc., but the domains should all be associated with the store that the GSP app is installed to.

Note that a referrer of “localhost” is always allowed, which will allow the widget to function normally if you are developing locally.

Copy The Script From Corso​

Navigate to Corso Admin > Settings > Checkout Plus.

In the Checkout Plus Script section, you will see a clipboard icon. Click this button to copy the Checkout Plus script.

Place the Corso <script> tag​

To integrate Checkout Plus, paste the copied script on any page where Checkout Plus should appear. The script should generally be placed inside of the <head> element. The script can safely be placed globally, as the display of the widget is controlled in the next step.

The script will look something like this:

<script
  async
  src="https://cdn.corso.com/js/corso-checkout-plus.js?shop=[yourstore].myshopify.com&sfToken=[YourStorefrontToken]"
></script>

Note that all attributes on this element are required.

Configure Checkout Plus with specific selectors from your theme​

There are 3 assets needed for Checkout Plus which require specific HTML element selectors to place them properly.

  1. Checkout Button
  2. Pricing Info & Info Modal
  3. Opt-button

If there is a specific element ID or class associated with your checkout buttons, then that is usually enough to place all 3 elements. However, you can add specific <div> elements to your theme where you would want the elements to be placed.

By default, these are the respective div elements you could add to your theme to place the Checkout Plus assets.

Pricing Info

<div id="corso-checkout-plus-info"></div>

Opt Out Button

<div id="corso-checkout-plus-button"></div>

For the Checkout button, by default we will look for any <button> that has an attribute of name="checkout" but we can configure the checkout button with any specific ID or class that is associated to the checkout button as well.

Typically the pricing info is placed just above the checkout button or below the subtotal. The opt out button is placed right below the checkout button

Style the widget​

For styling, we copy your checkout button so those styles should stay the same. For the pricing info and opt-out button, we support custom CSS or we have CSS variables that can be applied. Refer to this document for styling Checkout Plus.

At this point, GSP should be fully implemented and ready to go for your customers!