Tickets - Login

Enable the Product Page Checkout Button

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

BigCommerce Installation

  1. Log in to the BigCommerce Admin Console.
  2. Navigate to Manage > Edit theme.
  3. Open templates > components > products > add-to-cart.html.
  4. Add the following code:
<script

  id="Bolt-connect"

  type="text/javascript"

  src="https://connect.Bolt.com/connect-bigcommerce.js"

  data-publishable-key="<publishable key>"

  data-shopping-cart-id="BigCommerce"

  data-storefront-api-token="{{settings.storefront_api.token}}">

</script>
  1. Add the following after the div.form-action element, along with any styling necessary.
<div id="product-page-checkout-wrapper" "Bolt-button-wrapper" style="display:none">

  <div "Bolt-product-checkout-button Bolt-multi-step-checkout"></div>

</div>
  1. Since 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.

Want Product Page Checkout available only on certain pages? Reach out to your Customer Success Manager for assistance getting set up. You’ll need to create a product category in BigCommerce with the label bolt_ppc and then add the desired products.

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

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

Magento 2 Installation

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

WooCommerce Installation

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

Styling

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

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 );

Related Articles