Install the Instant BigCommerce app

1. Search for “Instant Checkout” on the BigCommerce app store and click Install.

   

2. You will be prompted to confirm and install the Instant Checkout app.

   

3. You will be prompted to finalise your integration. Ensure “Is this a staging website?” is ticked if the site you are installing Instant on is a staging/sandbox site.

1. Once the integration is finalised, you should see “Integration registered successfully”. You are now ready to add the Instant buttons to your store.

   

❓

If you see an error message at any time, such as the one pictured below, please uninstall and reinstall the Instant Checkout app. If error messages continually reappear, please reach out to Instant for assistance.

Adding the Instant Buttons to your store

• Adding Instant to the Product Page:

  1. Locate your theme’s product page template file. Please reach out to Instant for support if you are unable to locate your theme’s product page template. The locations specified below are suggested locations from common BigCommerce themes.
     • Proceed to templates > components > products > add-to-cart.html and use CTRL/command+F to find “{{#or customer (if theme_settings.restrict_to_login '!==' true)}}”. Above this line, copy the HTML code in 2).
     • Proceed to templates > components > products > single-details.html and use CTRL/command+F to find the line “{{#if product.can_purchase}}”. Below this line, copy the HTML code in 2).

  2. Copy and paste Instant Product page button code, ensuring it is positioned above the Add to Cart button.

     <!------ INSTANT CHECKOUT BUTTON START ----------->
     <div class="instant-wrapper">
     	<div class="instant-or">OR</div>
     		<button id="ic-pdp-btn" type="button">Instant Checkout</button>
     	</div>
     <style>
     #ic-pdp-btn {
     	background: black;
     	width: 100%;
     	height: 50px;
     	border-radius: 6px;
     	color: white;
     	font-size: 16px;
     }
     .instant-wrapper {
     	padding-bottom: 20px;
     	margin-bottom: 20px;
     }
     .instant-or {
     	position: relative;
     	top: 80px;
     	background: white;
     	width: 40px;
     	text-align: center;
     	margin-left: auto;
     	margin-right: auto;
     	color: #757575;
     }
     @media only screen and (max-width: 767px) {
     	.instant-wrapper {
     		border-bottom: 1px solid #dfdfdf;
     		border-radius: none;
     		padding-right: 1%;
     		padding-left: 1%;
     	}
     }
     @media only screen and (min-width: 768px) {
     	.instant-wrapper {
     		border: 1px solid #dfdfdf;
     		border-radius: 5px;
     		padding-right: 20%;
     		padding-left: 20%;
     	}
     }
     </style>
     <!------ INSTANT CHECKOUT BUTTON END -----------> 

• Adding Instant to the Minicart:

  1. Locate your theme’s minicart template file. Please reach out to Instant for support if you are unable to locate your theme’s minicart template. The locations specified below are suggested locations from common BigCommerce themes.
     • Proceed to templates > components > common > cart-preview.html and use CTRL/command+F to find “{{#if cart.show_primary_checkout_button}}”. Above this line, copy the HTML code in 2).
     • Proceed to templates > components > cart > quick-cart-totals.html and use CTRL/command+F to find the line “<div class="quick-cart-totals">”. Below this line, copy the HTML code in 2).

  2. Copy and paste Instant minicart page button code, ensuring it is positioned above the Proceed to Checkout button (or similar).

     <!------ INSTANT CHECKOUT BUTTON START ----------->
     <div class="instant-mini-cart-wrapper">
     	<div class="instant-mini-cart-or">OR</div>
     	<button id="ic-mc-btn" type="button" cart_id="{{cart_id}}">Instant Checkout</button>
     </div>
     <style>
     	#ic-mc-btn { 
     		background: black;
     		width: 100%;
     		height: 50px;
     		border-radius: 6px;
     		color: white;
     		font-size: 16px;
     	}
     	.instant-mini-cart-wrapper {
     		clear: both;
     		margin-bottom: 20px;
     		border-bottom: 1px solid #c1c1c1;
     		padding-bottom: 20px;
     		margin-left: 20px;
     		margin-right: 20px;
     	}
     	.instant-mini-cart-or {
     		position: relative;
     		top: 83px;
     		background: white;
     		width: 40px;
     		text-align: center;
     		margin-left: auto;
     		margin-right: auto;
     		color: #757575;
     	}
     	</style>
     <!------ INSTANT CHECKOUT BUTTON END ----------->

• Adding Instant to the Cart Preview:

  1. Locate your theme’s cart preview page template file. Please reach out to Instant for support if you are unable to locate your theme’s cart preview template. The locations specified below are suggested locations from common BigCommerce themes.
     • Proceed to templates > components > cart > preview.html and use CTRL/command+F to find “{{#if cart.show_primary_checkout_button}}”. Below this line, copy the HTML code in 2).

  2. Copy and paste Instant cart preview page button code, ensuring it is positioned above the Proceed to Checkout button (or similar)

     <!------ INSTANT CHECKOUT BUTTON START ----------->
     <div class="instant-overlay-wrapper">
     	<div class="instant-overlay-or">OR</div>
     	<button id="ic-cprev-btn" cart_id="{{cart_id}}">Instant Checkout</button>
     </div>
     <style>
     	#ic-cprev-btn {
     	background: black;
     	width: 100%;
     	height: 50px;
     	border-radius: 6px;
     	color: white;
     	font-size: 16px;
     }
     .instant-overlay-wrapper {
     	clear: both;
     	margin-bottom: 20px;
     	border-bottom: 1px solid #c1c1c1;
     	padding-bottom: 20px;
     	margin-top: -20px;
     }
     .instant-overlay-or {
     	position: relative;
     	top: 80px;
     	background: #e5e5e5;
     	width: 40px;
     	text-align: center;
     	margin-left: auto;
     	margin-right: auto;
     	color: #757575;
     }
     </style>
     <!------ INSTANT CHECKOUT BUTTON END ----------->

• Adding Instant to the Cart Summary:

  1. Locate your theme’s cart summary page template file. Please reach out to Instant for support if you are unable to locate your theme’s cart summary page template. The locations specified below are suggested locations from common BigCommerce themes.
     • Proceed to templates > pages > cart.html and use CTRL/command+F to find “{{#if cart.show_primary_checkout_button}}”. Below this line, copy the HTML code in 2).

  2. Copy and paste Instant cart preview page button code, ensuring it is positioned above the Proceed to Checkout button (or similar).

     <!------ INSTANT CHECKOUT BUTTON START ----------->
     <div class="instant-wrapper">
     	<div class="instant-or">OR</div>
     	<button
     		cart_id="{{cart_id}}"
     		id="ic-cindex-btn">Instant Checkout</button>
     </div>
     <style>
     	#ic-cindex-btn {
     		background: black;
     		width: 100%;
     		height: 50px;
     		border-radius: 6px;
     		color: white;
     		font-size: 16px;
     	}
     	.instant-wrapper {
     		clear: both;
     		margin-bottom: 20px;
     		border-bottom: 1px solid #dfdfdf;
     		border-radius: none;
     		padding-bottom: 20px;
     	}
     	.instant-or {
     		position: relative;
     		top: 80px;
     		background: white;
     		width: 40px;
     		text-align: center;
     		margin-left: auto;
     		margin-right: auto;
     		color: #757575;
     	}
     	@media (min-width: 551px) {
     		.instant-wrapper {
     		margin-left: auto;
     		margin-right: 0;
     		width: 100%;
     		border: 1px solid #dfdfdf;
     		padding-left: 10%;
     		padding-right: 10%;
     		padding-bottom: 20px;
     		border-radius: 5px;
     		width: 58.66%;
     		}
     	}
     	@media (min-width: 801px) {
     		.instant-wrapper {
     		width: 58.66%;
     		}
     	}
     	@media (min-width: 1261px) {
     		.instant-wrapper {
     		width: 42%;
     		}
     	}
     </style>
     <!------ INSTANT CHECKOUT BUTTON END ----------->

• Adding Instant to the Checkout Page:

  1. Locate your theme’s checkout page template file. Please reach out to Instant for support if you are unable to locate your theme’s checkout page template. The locations specified below are suggested locations from common BigCommerce themes.
     • Proceed to templates > pages > checkout.html.

  2. If your theme’s checkout page has the line “{{{ checkout.checkout_content }}}”, then ensure that the following code is pasted above the line. Otherwise, copy and paste the following code anywhere in the template file.

     <!------ INSTANT CHECKOUT BUTTON START ----------->
     <div class="instant-wrapper">
     	<div class="instant-content">
     		<h1 class="instant-header text">Check out with Instant</h1>
     		<p class="instant-copy text">
     			Securely pay with a single click. You'll never want to check out
     			another way again.
     		</p>
     		<button
     			id="ic-cpage-btn"
     			cart_id="{{cart_id}}">Instant Checkout</button>
     		 <p class="instant-label text">One click. Zero hassle.</p>
     	</div>
     </div>
     <style>
     	.instant-wrapper {
     		clear: both;
     		background: white;
     		border: 1px solid #d4d4d4;
     		border-radius: 6px;
     		box-sizing: border-box;
     		box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.11);
     		position: sticky;
     		z-index: 3;
     		top: 10px;
     		margin-top: 40px;
     		margin-right: -15px;
     		margin-left: -15px;
     		padding: 0;
     		display: flex;
     		align-items: center;
     		justify-content: center;
     	}
     	.instant-content {
     		padding: 24px;
     	}
     	.text {
     		text-align: center;
     		font-family: Inter, Montserrat, Arial, Helvetica, sans-serif;
     		font-style: normal;
     	}
     	.instant-header {
     		margin-bottom: 12px;
     		font-weight: bold;
     		font-size: 21px;
     		line-height: 28px;
     		color: #000000;
     	}
     	.instant-copy {
     		margin-bottom: 24px;
     		font-weight: normal;
     		font-size: 16px;
     		line-height: 24px;
     		color: #444444;
     	}
     	.instant-label {
     		font-weight: normal;
     		font-size: 14px;
     		line-height: 20px;
     		margin: 12px 0 0 0;
     		color: #707070;
     	}
     	#ic-cpage-btn {
     		width: 100%;
     		margin-left: auto;
     		margin-right: auto;
     		background: black;
     		height: 50px;
     		border-radius: 6px;
     		color: white;
     		font-size: 16px;
     	}
     	@media (min-width: 969px) {
     			.instant-wrapper {
     			margin-right: 0;
     			margin-left: 0;
     		}
     	}
     </style>
     <!------ INSTANT CHECKOUT BUTTON END ----------->

Example snippets

• Product Page

  

• Minicart

  

• Cart Preview

  

• Cart Summary

  

• Checkout Page

  

Go-Live

Once you have installed the Instant Checkout BigCommerce app and have added the Instant Checkout buttons to your storefront, please notify Instant and we will activate your production integration.

Troubleshooting and support