Skip to main content
knowledgecenter.2checkout.com

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

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

Demo

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

See the Pen Inline checkout set shipping details by Dorian Floarea (@2checkout-documentation) on CodePen.

Tags recommended by the template: article:reference