Samples of Custom Code for Bigcommerce

<div id="partiallyCartButtonContainer"></div>
<script>

var items = {{{json cart.items}}};

var eligibleProductIds = [120, 121, 122, 123]; 

var eligibleItemExists = items.some(item =>
  eligibleProductIds.includes(item.product_id)
);

if (eligibleItemExists) {
  document.partiallyButtonConfig = {
    offer: 'OFFER-ID',  
    amount: '{{cart.grand_total.value}}',
    returnUrl: '{{settings.secure_base_url}}/cart.php',

    cssButton: true,
    cssButtonText: 'Purchase with',
    cssButtonShowLogo: true,
    cssButtonLogoType: 'full',
    cssButtonLogoPlacement: 'after',

    renderSelector: '#partiallyCartButtonContainer',

    bigcommerceCartItems: items
  };

  (function() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://partial.ly/js/partially-checkout-button.js';
    script.async = true;
    document.head.appendChild(script);
  })();

} else {
  var container = document.getElementById('partiallyCartButtonContainer');
  if (container) container.style.display = 'none';
}
</script>

<div id="partiallyCartButtonContainer"></div>
<script>

var offerId = 'DEFAULT-OFFER-ID';

{{#any cart.items product_id=PRODUCT-ID}}
offerId = 'PRODUCT-OFFER-ID';
{{/any}}

document.partiallyButtonConfig = {
     offer: offerId,
     amount: '{{cart.grand_total.value}}',
     returnUrl: '{{settings.secure_base_url}}/cart.php',

     cssButton: true,
     cssButtonText: 'Purchase with',

     cssButtonShowLogo: true,
     cssButtonLogoType: 'full',
     cssButtonLogoPlacement: 'after',

     renderSelector: '#partiallyCartButtonContainer',

    bigcommerceCartItems: {{{json cart.items}}}
};
(function() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://partial.ly/js/partially-checkout-button.js';
  script.async = true;
  document.head.appendChild(script);
})();
</script>

<div id="partiallyCartButtonContainer"></div>
<script>

var items = {{{json cart.items}}};
var targetFieldName  = "CUSTOM-FIELD-NAME";
var targetFieldValue = "CUSTOM-FIELD-VALUE";

var eligibleItemExists = items.some(item =>
  (item.custom_fields || []).some(field =>
    field.name === targetFieldName &&
    field.value === targetFieldValue
  )
);

if (eligibleItemExists) {
  document.partiallyButtonConfig = {
    offer: 'OFFER-ID',
    amount: '{{cart.grand_total.value}}',
    returnUrl: '{{settings.secure_base_url}}/cart.php',

    cssButton: true,
    cssButtonText: 'Purchase with',
    cssButtonShowLogo: true,
    cssButtonLogoType: 'full',
    cssButtonLogoPlacement: 'after',

    renderSelector: '#partiallyCartButtonContainer',

    bigcommerceCartItems: items
  };

  (function() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://partial.ly/js/partially-checkout-button.js';
    script.async = true;
    document.head.appendChild(script);
  })();

} else {
  var c = document.getElementById('partiallyCartButtonContainer');
  if (c) c.style.display = 'none';
}

</script>

<div id="partiallyCartButtonContainer"></div>
<script>

var offerId = 'DEFAULT-OFFER-ID';
var items = {{{json cart.items}}};

if (items.some(item => 
  item.custom_fields && 
  item.custom_fields.some(f => f.name === 'CUSTOM-FIELD-NAME' && f.value === 'CUSTOM-FIELD-VALUE')
)) {
  offerId = 'CUSTOM-FIELD-OFFER-ID';
}

document.partiallyButtonConfig = {
  offer: offerId,
  amount: '{{cart.grand_total.value}}',
  returnUrl: '{{settings.secure_base_url}}/cart.php',

  cssButton: true,
  cssButtonText: 'Purchase with',

  cssButtonShowLogo: true,
  cssButtonLogoType: 'full',
  cssButtonLogoPlacement: 'after',

  renderSelector: '#partiallyCartButtonContainer',

  bigcommerceCartItems: items
};

(function() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://partial.ly/js/partially-checkout-button.js';
  script.async = true;
  document.head.appendChild(script);
})();
</script>