Set billing details for the InLine Checkout

Overview

Pre-set the billing details for the InLine checkout.

Use case

Add an HTML link or button in your page like the one below.
Create a JavaScript click handler to execute the Inline client desired methods.
Use theTwoCoInlineCart.products.add({code, quantity, options})method to prepare your catalog product.

Call any of the following methods to pre-set the billing details:

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

If you want to reset the billing details, call theTwoCoInlineCart.billing.reset()method.
Use theTwoCoInlineCart.cart.checkout()method to display 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.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();
});

Demo

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

PreviousPreload InLine Cart to increase loading speed NextTurn on auto-advance feature

Last updated 1 month ago

Was this helpful?

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