Skip to main content
knowledgecenter.2checkout.com

Advanced Inline Checkout experience

Overview

Minimize the effort customer's make by collecting their order information and passing it through to Inline Checkout. All that remains, is for your customers to confirm their payment information, and the order is placed.

Send information to Inline Checkout

After you integrate the Inline Checkout JavaScript code in your backend application, you get access to the library that allows you to add products, control billing and shipping details and start the checkout process. Follow the instructions below to control the information displayed by Inline Checkout.

Handling products

Products are handled by the products service. The service allows you to get the list of added products, add products, remove individual products or remove all the products from cart.

Use the methods and product attributes listed below to add / remove one or many products to cart.

Product attributes

Attributes Type/Description
code

String

Product code assigned by you when creating the product. Required for catalog products.

type

String

Product type. Required only for dynamic products. Possible values:

[PRODUCT, SHIPPING, TAX, COUPON]. Default value is PRODUCT.

name

String

Product name. Required for dynamic products.

price

String

Product price. It is required for dynamic products.

tangible

String

Product tangible flag. Required only for dynamic products. Default value is FALSE.

quantity

String

Product quantity. Default value is 1.

Product methods

Methods Description
add Adds a single product to the list. Use the above list of parameters to add a product to cart.
remove Removes a product from the list.
addMany

Adds a list of products to the main list.

removeAll

Removes all products from the list.

getAll

Retrieves the products list.

HANDLING billing details

Billing details are handled by the billing service. Each billing information is controlled by a setter method.

Use the attributes and methods listed below to control the billing information displayed in cart. Customers are able to fill in their billing information in the overlay provided by Inline Checkout. In case your shopping cart application collects customer's billing information, use the attributes and methods listed below to pass that information over to the cart.

Billing details attributes

Attributes Type/Description
name

String

Customer billing name. Example: "John Doe". 

email

String

Customer billing email. Example: "john.doe@email.com".

phone

String

Customer billing phone number. Example: "403940281923".

country

String

Customer billing country. Example: "US".

city

String

Customer billing city. Example: "Los Angeles".

state

String

Customer billing state. Example: "California".

zip

String

Customer billing zip code. Example: "90078".

address

String

Customer billing address. Example: "1093 Rodeo Drive".

address2

String

Customer billing additional address information. "293 Postal Box".

Billing details methods

Methods Description
setData

Sets the entire billing data.

setName Sets the billing name.
setEmail Sets the billing email.
setPhone

Sets the billing phone.

setCountry Sets the billing country.
setCity Sets the billing city.
setState Sets the billing state.
setZip

Sets the billing zip code.

setAddress Sets the billing address.
setAddress Sets additional billing address information.
reset Resets the billing data.

Retrieve billing information from cart by using the getData method.

Handle shipping details 

Shipping details are handled by the shipping service. Each shipping information is controlled by a setter method.

Use the attributes and methods listed below to control the shipping information displayed in cart. In case you use a shopping cart application that collects the shipping information, use the attributes and methods listed below to pass that information over to the cart.

Shipping details attributes

Attributes Type/Description
name

String

Customer shipping name. Example: "John Doe". 

email

String

Customer shipping email. Example: "john.doe@email.com".

phone

String

Customer shipping phone number. Example: "403940281923".

country

String

Customer shipping country. Example: "United States of America".

city

String

Customer shipping city. Example: "Los Angeles".

state

String

Customer shipping state. Example: "California".

zip

String

Customer shipping zip code. Example: "90078".

address

String

Customer shipping address. Example: "1093 Rodeo Drive".

address2

String

Customer shipping additional address information. "293 Postal Box".

Shipping details methods

Methods Description
setData

Sets the entire shipping data.

setName Sets the shipping name.
setEmail Sets the shipping email.
setPhone

Sets the shipping phone.

setCountry Sets the shipping country.
setCity Sets the shipping city.
setState Sets the shipping state.
setZip

Sets the shipping zip code.

setAddress Sets the shipping address.
setAddress Sets additional shipping address information.
reset Resets the shipping data.

Retrieve shipping information form cart by using the getData method.

HANDLE the Checkout process 

Control the cart behavior by using the cart service. Use the checkout method to start the Inline Checkout experience.

Cart attributes

Attributes Type/Description
source

String

Sale originating source. Example: "YouTube Channel".

language

String

Cart language code. Example: "FR".

currency

String

Cart currency code. Example: "USD".

test

Boolean

Test order flag. Possible values:

  • true for test orders
  • false for real orders
successUrl

String

URL to which customer is redirected after a successful payment. Example: "http://myWebsite.com".

coupon

String

Order promotion coupon. Example: "50%off".

token

String

Token for the authorization code.

expiration

String

Expiration date for the authorization.

Cart methods

Methods Description
checkout

Starts the cart service which displays the overlay payment form.

addCoupon

Adds a coupon to the coupons list.

addCoupons Adds coupons in the cart from a list array.
removeCoupon

Removes a coupon from the coupons list.

removeCoupons

Clears all coupons from the cart instance.

setSource

Sets the order source.

setCurrency

Sets the currency on the cart instance.

setLanguage

Sets the language code for the order.

setSuccessURL

Sets the Success URL to which the customer si redirected after a successful payment.

setTest

Send true for placing a test order.

setAuthorization

Sets the authorization token. When NULL - it tries to recover the previous authorization token stored in session storage or cookies.

setLoaderState Handles the overlay window visibility.
setIframeState

Handles the loader visibility.

reloadCart

Reloads the cart instance.

 Retrieve cart attributes from Inline Checkout by using get methods: getTest, getLanguage, getCurrency, getSource, getCoupons, getSuccessURL.

Sample request

TwoCoInlineCart.setup.setMerchant('merchantCode'); // your Merchant code

TwoCoInlineCart.billing.setCountry('US'); customer billing country
TwoCoInlineCart.billing.setName('John Doe'); customer billing Name
TwoCoInlineCart.billing.setEmail('john.doe@email.com'); customer email address

TwoCoInlineCart.shipping.setName('Jane Doe'); // customer Delivery name
TwoCoInlineCart.shipping.setEmail('jane.doe@email.com'); // customer Delivery email

TwoCoInlineCart.products.add({
    code: 'the-2co-product-code',
    quantity: 3
});

TwoCoInlineCart.cart.addCoupon('50%OFF'); // discount code
TwoCoInlineCart.cart.setCurrency('GBP'); // order currency
TwoCoInlineCart.cart.setLanguage('fr'); // language code

TwoCoInlineCart.cart.checkout(); // start checkout process