<div class="container">
  <div class="row justify-content-md-center mt-5">
    <div class="col-12">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Physical dynamic products with dynamic shipping, dynamic taxes, and dynamic coupon.</h5>
          <p class="card-text">
            Click the button bellow to open the Inline Cart using a physical dynamic products with dynamic shipping, dynamic taxes, and dynamic coupon.
          </p>
          <a href="#" class="btn btn-success" id="buy-button">Buy now!</a>
        </div>
      </div>
    </div>
  </div>
</div>
window.document.getElementById('buy-button').addEventListener('click', function() {
  TwoCoInlineCart.setup.setMode('DYNAMIC');
  TwoCoInlineCart.cart.setCurrency('USD');
  
  TwoCoInlineCart.products.removeAll();
  TwoCoInlineCart.products.add({
    name: 'A test physical product',
    quantity: 1,
    price: 20,
    type: 'physical'
  });
  TwoCoInlineCart.products.add({
    name: 'A test shipping',
    quantity: 1,
    price: 7,
    type: 'shipping'
  });
  TwoCoInlineCart.products.add({
    name: 'A test tax',
    quantity: 1,
    price: 10,
    type: 'tax'
  });
  TwoCoInlineCart.products.add({
    name: 'A test promotion',
    quantity: 1,
    price: 5,
    type: 'coupon'
  });
  
  TwoCoInlineCart.cart.setSignature('1563b14f92bfe6bf645a227291120e1a9bbb87bcdf02c410b4522f5d8291fd34');
  TwoCoInlineCart.cart.checkout();
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

  1. https://codepen.io/2checkout-documentation/pen/ZEppBKy