<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 billing 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 billing 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.billing.setData({
    name: 'John Snow', 
    email: 'john.snow@2checkout.com', 
    phone: '+33 892 70 12 39', 
    country: 'FR', 
    city: 'Paris', 
    state: '', 
    zip: '75007', 
    address: 'Champ de Mars', 
    address2: '5 Avenue Anatole'
  });
  
  // Reset
  TwoCoInlineCart.billing.reset();
  
  // Style 2 (simple)
  TwoCoInlineCart.billing.setName('John Snow');
  TwoCoInlineCart.billing.setEmail('john.snow@2checkout.com');
  TwoCoInlineCart.billing.setPhone('+33 892 70 12 39');
  TwoCoInlineCart.billing.setCountry('FR');
  TwoCoInlineCart.billing.setCity('Paris');
  TwoCoInlineCart.billing.setState('');
  TwoCoInlineCart.billing.setZip('75007');
  TwoCoInlineCart.billing.setAddress('Champ de Mars');
  TwoCoInlineCart.billing.setAddress2('5 Avenue Anatole');
  
  // Reset
  TwoCoInlineCart.billing.reset();
  
  // Style 3 (chained)
  TwoCoInlineCart.billing
    .setName('John Snow')
    .setEmail('john.snow@2checkout.com')
    .setPhone('+33 892 70 12 39')
    .setCountry('FR')
    .setCity('Paris')
    .setState('')
    .setZip('75007')
    .setAddress('Champ de Mars')
    .setAddress2('5 Avenue Anatole')
  ;
  
  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