Rally Checkout Button ♥ BigCommerce storefront

Follow the steps provided to integrate the Rally checkout button into your BigCommerce storefront.

Add the script to the page template

The following script is optimally added into the head of the template base layout templates/layout/base.html.

Copy
Copied
<script>
  !function(l,e){l.Rally=l.Rally||{},l.Rally.platform=l.Rally.platform||{},l.Rally.platform.init=l.Rally.platform.init||function(){};var t=e.createElement("script");t.async=!0,t.src="https://js.onrally.com/resources/platforms/bigcommerce.js";var a=e.getElementsByTagName("script")[0];a.parentNode.insertBefore(t,a)}(window,document);
  Rally.platform.clientId = 'clientID';
  Rally.platform.config = {fallbackButtonSelector: '[href="/checkout"]'};
</script>

Manipulate the existing checkout button

Add rally-d-none class to the native checkout button which will ensure that the native checkout button is hidden only when Rally's checkout button is successfully loaded.

Copy
Copied
<a class="button button--primary rally-d-none" href="/checkout" title="Click here to proceed to checkout">Check out</a>

Use the Rally Checkout Button

Add the 👇 HTML markup wherever you want the checkout button to render on the page.

Copy
Copied
<rally-checkout-button loader="true" custom-class="button button--primary" custom-text="Checkout"></rally-checkout-button>
Copyright © Rally Commerce, Inc. 2023. All right reserved.