There are different ways of using VTEX APIs to handle shopping carts and checkout in order to place orders. For instance, you can use API requests to create and manage shopping carts on the VTEX platform, so as to place an order from that information later, or directly place an order with a single request containing all cart data.
️ The main data structure used in VTEX Checkout is the
orderForm
. It contains every piece of information pertinent to a shopping cart, including logistics, payment, products and customer profile, for instance. Learn more in the orderForm documentation.
Try the interactive version of this article by accessing this link. Code will be highlighted and focused for your convenience.
For this tutorial, we chose one of the more objective ways to understand and use our APIs to place a regular order (placed, paid, and delivered under the liability of a single account). To do this, we will follow these steps:
-
Simulate a cart. Find out what delivery and payment options are available.
-
Check if the customer already exists in your database. An order needs the shopper’s email address to be placed.
-
Assemble a cart. Put together all order information in the correct format.
-
Place the order. Creating the order on the VTEX platform.
-
Send payment information. Let VTEX know you have information to resolve payment.
-
Request order processing. The payments module can now process the transaction.
And by the end of this process you may check the result.
For any authentication required by the APIs presented in this tutorial, you must provide a valid
appToken
andappKey
registered in the License Manager module of your account and empowered with enough permissions. Learn more in this article about Roles.
1. Simulate a cart
The very first thing that you should do is to check if your store is able to fulfill the cart. A simulation request is how your system will know which delivery and payment options are available for a given combination of items in a cart.
In order to do so, use the Cart simulation API request.
From the response content, you will be mostly using the information in items
, logisticsInfo
and paymentData
. More information about each of them will be provided in the next steps.
2. Check if a customer already exists in your database
Whenever you attempt to place an order, you must provide an email address to identify the shopper. Typically, once an order gets successfully placed, the provided email address is assigned to a client profile on your store.
Therefore, it is a good idea to verify if a given email address is already linked to a customer of yours, so you can avoid any permission issues and retrieve any stored information.
To check an email address for existing profiles, just send use the Get client by email API request.
If the response to this request returns any content, it means that you already have this customer’s information on your store’s data base. In this case, you can use that information in the next steps without having to ask the shopper to provide it to you again.
3. Assemble a cart
Assembling a cart from an API point of view means getting all order information into the appropriate data structure, the orderForm.
An orderForm may include many elements, but for a simple order, we can focus on the main five. The overall structure will be similar to this:
_10"items": [],_10"clientProfileData": {},_10"shippingData": {_10 "address": {},_10 "logisticsInfo": []_10},_10"paymentData": {}
️ Note that we are assembling this data structure to be sent as the request body in the next step. Below, we discuss these sections briefly, but you can learn more about each field in the Place order API request documentation.
items
This is the core of your order, an array that contains all data pertinent to the SKUs being purchased.
Obtain the necessary information from the items
array in the cart simulation response from the first step of this tutorial.
Then, build a block with the following structure:
_10"items": [_10 {_10 "id": "1",_10 "quantity": 1,_10 "seller": "1",_10 "price": 10000_10 }_10]
️ For this example, we are considering a single item in the cart. To learn more and explore more complex examples see the Place order API request documentation.
clientProfileData
This object contains information about the shopper. Consider this format for new customers willing to create an account:
_14"clientProfileData": {_14 "email": "email@domain.com",_14 "firstName": "Testing",_14 "lastName": "VTEX",_14 "document": "078051120",_14 "documentType": "ssn",_14 "phone": "1234567890",_14 "corporateName": null,_14 "tradeName": null,_14 "corporateDocument": null,_14 "stateInscription": null,_14 "corporatePhone": null,_14 "isCorporate": false_14}
For customers already in your database, sending only the email address is enough to register the order to the shopper’s existing account.
_10"clientProfileData": {_10 "email": "email@domain.com"_10}
If the shopper exists in you database but is not logged in, sending other profile information along with the email will cause the platform to fail placing the order. This happens because this action is interpreted as an attempt to edit profile data, which is not possible unless the customer is logged in to the store.
shippingData.address
This object contains shipping address information.
_16"shippingData": {_16 "address": {_16 "addressType": "residential",_16 "receiverName": "Testing VTEX",_16 "postalCode": "33301",_16 "city": "Fort Lauderdale",_16 "state": "FL",_16 "country": "USA",_16 "street": "110 East Broward Blvd",_16 "number": null,_16 "neighborhood": null,_16 "complement": "Suite 1700",_16 "reference": null,_16 "geoCoordinates": []_16 }_16}
For customers already in your data base, it is enough to send this object only with an addressId
, which you may get from step two.
_10"shippingAddress": {_10 "address": {_10 "addressId": "666c2e830bd9474ab6f6cc53fb6dd2d2"_10 }_10}
shippingData.logisticsInfo
This is an array that contains logistics information for each item in the items
array, including the selected delivery option and freight cost.
_10"shippingData": {_10 "logisticsInfo": [_10 {_10 "itemIndex": 0,_10 "selectedSla": "Regular",_10 "price": 100_10 }_10 ]_10}
The selectedSla
field indicates the selected delivery option. You can choose an id
value, from among the options in the slas
array obtained in the Cart simulation step. The corresponding price
can also be found in the simulation response data, in the same object.
The logisticsInfo
array should contain a number of objects equal to the number of objects in the items
array. The itemIndex
of a logisticsInfo
object indicates to which item of the array items
that information is referring. The object referring to the first item in items
will contain an itemIndex
of 0
and so on.
️ For this example, we are considering a single item in the cart. To learn more and explore more complex examples see the Place order API request documentation.
paymentData
This object informs the payment method and installment options (if available) selected for the order.
_10"paymentData": {_10 "payments": [_10 {_10 "paymentSystem": "1",_10 "referenceValue": 10100,_10 "value": 10100,_10 "installments": 1_10 }_10 ]_10}
Note that the value
field corresponds to the full value to be payed by the shopper, whereas the referenceValue
is the base number over which interests apply. If no interest apply to the order, they should be equal.
️ For this example, we are considering a single payment method, with a single installment and no interest. To learn more and explore more complex examples see the Place order API request documentation.
Use the options and information from the simulation response data to assemble your own paymentData
.
4. Place the order
When you are done consolidating all of your shopping cart information, your orderForm
should look something like this:
_57{_57 "items": [_57 {_57 "id": "1",_57 "quantity": 1,_57 "seller": "1",_57 "price": 10000_57 }_57 ],_57 "clientProfileData": {_57 "email": "email@domain.com",_57 "firstName": "Testing",_57 "lastName": "VTEX",_57 "document": "078051120",_57 "documentType": "ssn",_57 "phone": "1234567890",_57 "corporateName": null,_57 "tradeName": null,_57 "corporateDocument": null,_57 "stateInscription": null,_57 "corporatePhone": null,_57 "isCorporate": false_57 },_57 "shippingData": {_57 "address": {_57 "addressType": "residential",_57 "receiverName": "Testing VTEX",_57 "postalCode": "33301",_57 "city": "Fort Lauderdale",_57 "state": "FL",_57 "country": "USA",_57 "street": "110 East Broward Blvd",_57 "number": null,_57 "neighborhood": null,_57 "complement": "Suite 1700",_57 "reference": null,_57 "geoCoordinates": []_57 },_57 "logisticsInfo": [_57 {_57 "itemIndex": 0,_57 "selectedSla": "Regular",_57 "price": 100 _57 }_57 ]_57 },_57 "paymentData": {_57 "payments": [_57 {_57 "paymentSystem": "1",_57 "referenceValue": 10100,_57 "value": 10100,_57 "installments": 1_57 }_57 ]_57 }_57}
Or, for a returning customer, it may be something like this:
_35{_35 "items": [_35 {_35 "id": "1",_35 "quantity": 1,_35 "seller": "1",_35 "price": 10000_35 }_35 ],_35 "clientProfileData": {_35 "email": "email@domain.com"_35 },_35 "shippingData": {_35 "address": {_35 "addressId": "666c2e830bd9474ab6f6cc53fb6dd2d2"_35 },_35 "logisticsInfo": [_35 {_35 "itemIndex": 0,_35 "selectedSla": "Regular",_35 "price": 100_35 }_35 ]_35 },_35 "paymentData": {_35 "payments": [_35 {_35 "paymentSystem": "1",_35 "referenceValue": 10100,_35 "value": 10100,_35 "installments": 1_35 }_35 ]_35 }_35}
If the delivery method is pickup point, add the information "selectedDeliveryChannel": "pickup-in-point"
, as in the example below:"
_10{_10 "logisticsInfo": [_10 {_10 "itemIndex": 0,_10 "selectedSla": "Regular",_10 "price": 100,_10 "selectedDeliveryChannel": "pickup-in-point"_10 }_10 ]_10 }
️ This exemplifies a fairly simple fictitious shopping cart. The
orderForm
is actually highly customizable. Learn more about all possibilities in the orderForm documentation.
This orderForm
can now be sent as the body in the Place order API request.
If you get a status 201 Created
response, take note of four pieces of information from its response content:
orderId
: ID of the order within VTEX’s Order Management System (OMS). You can find anorderId
in each object in theorders
array.transactionId
: ID of the transaction, which can be found in the objects contained in thetransactionData.merchantTransactions
array.addressId
: if you're going to use the same address for shipping and billing, get this ID from theorders[].shippingData.address
object.Vtex_CHKO_Auth
: authentication cookie that is sent with the response.
Starting from the placing of the order, you have five minutes to complete the payment process. Otherwise, the order is automatically canceled and tagged
incomplete
.
5. Send payment information
With the orderId
and transactionId
values in hand, you must now inform VTEX of the payment data that should be used to resolve the order payment. To do this, use the Send payment information API request. Note that there is also an alternative private request for sending payment information, that can be used to send saved credit card data.
The information you send in this step’s request body should be based on the paymentData
section of your orderForm
.
For most cases, it will look like the following:
_25[_25 {_25 "paymentSystem": 1,_25 "paymentSystemName": "American Express",_25 "group": "creditCardPaymentGroup",_25 "installments": 1,_25 "installmentsInterestRate": 0,_25 "installmentsValue": 10100,_25 "value": 10100,_25 "referenceValue": 10100,_25 "fields": _25 {_25 "holderName": "Testing VTEX",_25 "cardNumber": "4444 3333 2222 1111",_25 "validationCode": "1234",_25 "dueDate": "10/20",_25 "addressId": "666c2e830bd9474ab6f6cc53fb6dd2d2"_25 },_25 "transaction": {_25 "id": "123456789abcdefgh",_25 "merchantName": "MyStore"_25 },_25 "currencyCode": "USD"_25 }_25]
️ In the
fields
object, you can send anaddressId
to use an existing address or a newaddress
object.
Make sure that all value-related fields match the information sent in step four, when placing the order.
6. Request order processing
Finally, you must request the processing of the order with the Process order API request.
At this point, if everything is ok with the payment, the order should be placed. Otherwise, you should get a status 500
error.
Be aware that this process uses the gateway connectors configured in your VTEX environment. Be careful to avoid any unwanted charges or unexpected payment denials.
Checking the result
You should be able to verify your order was in fact placed in the Order management module in VTEX Admin.
You can also use the API requests Get order and List orders for this purpose.