Set the shipping details in the InLine Checkout

Overview

Pre-set the shipping details for the InLine checkout.

Use case

1. Add an HTML link or button in your page like the one below.

2. Create a JavaScript click handler to execute the Inline Client desired methods.

3. Use theTwoCoInlineCart.products.add({code, quantity, options})method to prepare your catalog product.

4. Call any of the following methods to pre-set the shipping details:

   TwoCoInlineCart.shipping.setName('Shopper name');
     TwoCoInlineCart.shipping.setEmail('[e-mail]');
     TwoCoInlineCart.shipping.setPhone('[phone]');
     TwoCoInlineCart.shipping.setCountry('US');
     TwoCoInlineCart.shipping.setCity('Denver');
     TwoCoInlineCart.shipping.setState('Colorado');
     TwoCoInlineCart.shipping.setZip('80249');
     TwoCoInlineCart.shipping.setAddress('Pena Blvd');
     TwoCoInlineCart.shipping.setAddress2('');

5. If you want to reset the shipping details, call theTwoCoInlineCart.shipping.reset()method.

6. Use theTwoCoInlineCart.cart.checkout()method to show the cart on your page.

Sample request

HTML

<a href="#" class="btn btn-success" id="buy-button">Buy now!</a>

JavaScript

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   : '[e-mail]',
        city    : 'Denver',
        state   : 'Colorado',
        zip     : '80249',
        phone   : '[phone]',
        address : '',
        address2: 'Pena Blvd'
  });

  // Reset
  TwoCoInlineCart.shipping.reset();

  // Style 2 (simple)
  TwoCoInlineCart.shipping.setName('Shopper name');
  TwoCoInlineCart.shipping.setEmail('[e-mail]');
  TwoCoInlineCart.shipping.setPhone('[phone]');
  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('[e-mail]')
    .setPhone('[phone]')
    .setCountry('US')
    .setCity('Denver')
    .setState('Colorado')
    .setZip('80249')
    .setAddress('Peña Blvd')
    .setAddress2('');

  TwoCoInlineCart.cart.checkout();
});

Demo

After setting the shipping details for the InLine checkout using the above methods, your cart should look like this: