<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">Inline checkout set shipping details</h5>
          <p class="card-text">
            Click the button bellow to open the Inline Cart. In this example we will be using the <span class="badge badge-info">setData</span>, <span class="badge badge-info">setName</span>, <span class="badge badge-info">setEmail</span>, <span class="badge badge-info">setPhone</span>, <span class="badge badge-info">setCountry</span>, <span class="badge badge-info">setCity</span>, <span class="badge badge-info">setState</span>, <span class="badge badge-info">setZip</span>, <span class="badge badge-info">setAddress</span>, <span class="badge badge-info">setAddress2</span> methods to pre-set the shipping details. 
          </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.products.add({
    code: "74B8E17CC0"
  });
  
  // Style 1 (all data at once)
  TwoCoInlineCart.shipping.setData({
        name    : 'Shopper name',
        country : 'US',
        email   : 'shopper.email@example.com',
        city    : 'Denver',
        state   : 'Colorado',
        zip     : '80249',
        phone   : '+1 202 555 0115',
        address : '',
        address2: 'Pena Blvd'
  });

  // Reset
  TwoCoInlineCart.shipping.reset();
  
  // Style 2 (simple)
  TwoCoInlineCart.shipping.setName('Shopper name');
  TwoCoInlineCart.shipping.setEmail('shopper.email@example.com');
  TwoCoInlineCart.shipping.setPhone('+1 202 555 0115');
  TwoCoInlineCart.shipping.setCountry('US');
  TwoCoInlineCart.shipping.setCity('Denver');
  TwoCoInlineCart.shipping.setState('Colorado');
  TwoCoInlineCart.shipping.setZip('80249');
  TwoCoInlineCart.shipping.setAddress('Pena Blvd');
  TwoCoInlineCart.shipping.setAddress2('');
  
  // Reset
  TwoCoInlineCart.shipping.reset();
  
   // Style 3 (chained)
  TwoCoInlineCart.shipping
    .setName('Shopper name')
    .setEmail('shopper.email@example.com')
    .setPhone('+1 202 555 0115')
    .setCountry('US')
    .setCity('Denver')
    .setState('Colorado')
    .setZip('80249')
    .setAddress('Peña Blvd')
    .setAddress2('');
  
  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/ExgyVba.js