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