📍 Bolt Help / Dashboard / Checkout Settings / Checkout Buttons / Product Page Checkout Button

Product Page Checkout Button

How to set up the Product Page Checkout Button.

Page Contents

Click to expand.

Steps for enabling the Product Page Checkout Button vary depending on the cart platform used.

BigCommerce Installation

Log in to the BigCommerce Admin Console.
Navigate to Storefront > My Themes > Three Dots icon > Edit Theme Files.
Open templates > components > products > add-to-cart.html.
Add the following code:

 <script
   id="bolt-connect"
   type="text/javascript"
   src="https://connect.bolt.com/connect-bigcommerce.js"
   data-publishable-key="${publishableKey}"
   data-shopping-cart-id="BigCommerce"
   data-storefront-api-token="{{settings.storefront_api.token}}">
 </script>
 
 <script>
     if (window.BoltConnect && window.BoltConnect.setupProductPageCheckout) {
         window.BoltConnect.setupProductPageCheckout();
     }
 </script>

Add the following after the div.form-action element, along with any styling necessary.

For V1 buttons

<div id="product-page-checkout-wrapper" "Bolt-button-wrapper" style="display:none">
  <div "Bolt-product-checkout-button Bolt-multi-step-checkout"></div>
</div>

For V2 buttons

Note: The &variant=${variant} snippet is only needed if you are planning on or currently using variants. Otherwise, this can be removed.

<div
data-tid="instant-bolt-checkout-button"
id="product-page-checkout-wrapper"
class="bolt-button-wrapper"
style="display:none">

   <object
   data="https://connect.bolt.com/v1/checkout_button?publishable_key=${publishableKey}&amp;variant=${variant}"
   class="bolt-product-checkout-button">
   </object>
</div>

Because the element is automatically made visible on page load, it can be inconvenient for production testing. You can add the following code and manually unhide the element in developer console after page load:

<style>

  #product-page-checkout-wrapper {

    display: none !important;

  }

</style>

Remove the code from Step 6. when ready to launch.

Product Page Checkout for Specific SKUs

To enable checkout on the product page for specific SKUs only, take the following steps:

Log in to the BigCommerce Dashboard.
Navigate to Products > Product Categories > Create a Category.
Disable Visible in Menu? by clicking the green checkmark.
Add desired products to category.

Custom Cart Installation

The Product Page Checkout Button will call the specified API hook URL and send it a cart.create request using cart object. The endpoint should then create the cart on the backend (for authorization) and then provide back an order reference that can be used to look up the cart later.

Cart Object

<div class="bolt-product-checkout-button"></div>

Example Cart

var cart = {
 [
  {
  reference: "123",
  quantity: 1,
  },
 ],
};

Example Config

var cart = {
  items: [
    {
      reference: "123",
      quantity: 1,
    },
  ],
  currency: "USD",
};
var buttonClass = "bolt-product-checkout-button"
var hints = {};
var callbacks = {
  check: function() {
    var quantity = cart.items[0].quantity;
    if (quantity == "") {
      $("#quantityError").text("Please input a valid quantity")
      return false;
    }
    $("#quantityError").text("")
    return true;
  },
  onCheckoutStart: function() {
  },
  onShippingDetailsComplete: function() {
  },
  onShippingOptionsComplete: function() {
  },
  onPaymentSubmit: function() {
  },
  success: function(transaction, callback) {
    callback();
  },
  close: function() {
  }
};
BoltCheckout.configureProductCheckout(cart, hints, callbacks, { checkoutButtonClassName: buttonClass });

Considerations

If the quantity, size, color or any other properties of the instant checkout cart item change, you will have to call configure again with these new properties. Below is a sample of how this could work:

var buttonClass = "bolt-product-checkout-button"
var cart = {
  items: [
    {
      shopifyProductReference: "123",
      shopifyProductVariantReference: "456",
      quantity: 1,
    },
  ],
  currency: "USD",
};
function configureCheckout() {
    BoltConnect.configureProductCheckout(
    globalBoltCart,
    {},
    callbacks,
    { checkoutButtonClassName: buttonClass },
  );
}
$(document).ready(function() {
  $("#quantity").on("change", function() {
    cart.items[0].quantity = parseInt($('#quantity').val());
    configureCheckout();
  });
}

Request

{
  type: "cart.create",
  currency: "USD",
  items: [
    {
      reference: "123",
      quantity: 1,
    },
  ],
}

Response

{
  total_amount: 74323,
  items: [
    {
      reference: "123",
      quantity: 1,
      color: "green",
    },
  ],
  order_reference: "9124214312"
}

Magento 1 Installation

Log in to the Magento Admin Console.
Navigate to System > Configuration > Sales > Payment Methods > Bolt Pay.
Ensure that Publishable Key - Multi Step Checkout is set with a valid key.
Update Enable Product Page Checkout to Yes.
Save.

Magento 2 Installation

Log in to the Magento Commerce Admin Console.
Navigate to Stores > Configuration > Sales > Payment Methods > Bolt Pay.
Update Enable product page checkout to Yes.
Save.

Magento 2: Product Page Checkout for Specific SKUs

See this setup guide for enabling product page checkout for specific SKUs.

WooCommerce Installation

Login to the WordPress Admin Console.
Navigate to Plugins > Bolt Plugin.
Enable the Product Page Checkout feature.

Styling

Use the Additional CSS field for the relevant class to position and style the button.

NOTE

These styles are applied to all pages where the Bolt button appears. Test all pages to make sure styling updates are acceptable.

Filter Display

If you want to enable the Product Page Checkout Button for only one product / part of the product, you can filter wc_Bolt_is_product_available.

function wc_Bolt_element_case_is_product_available($product_available, $post) {

  if (!$product_available) {

    return false;

  }

  $product = wc_get_product( $post );

  // show Product page checkout button only for one product

  return $product->get_sku()=='EMT-0053-X000';

}

add_filter( 'wc_Bolt_is_product_available', 'wc_Bolt_element_case_is_product_available', 10, 2 );