Checkout Button Templates
Checkout button templates are marketing templates that can showcase one or more products along with corresponding checkout buttons that WhatsApp users can use to make purchases without leaving the WhatsApp client.
Single Products
Checkout button templates can show a single product image or video header, along with message body text, message footer, a single checkout button, and up to 9 quick-reply buttons.
WhatsApp users who tap the button will see details of the order:
Users can proceed by selecting shipping information provided by you (if you know their information and supplied it in the send message payload)...
... or can add their own shipping information:
Once shipping information has been selected, the order details will appear again, with their shipping information in place:
Users can then continue to place the order using their preferred payment method set up in the WhatsApp client:
Once the order is processed, a payment webhook is triggered.
Multiple Products
You can create a media card carousel template that showcases up to 10 products in a card carousel, each with their own checkout button. To do this, simply create a media card carousel template as you normally would, but replace one of the buttons with a checkout button, and make sure that it is the first button in the card.
Checkout buttons in media card carousel templates trigger the same order and payment flow as checkout buttons in templates that showcase a single product.
Checkout Buttons
Each checkout button in a template must correspond to a single product. Checkout buttons, when creating a template, must have the following non-customizable syntax:
{
"type": "order_details",
"text": "Buy now"
}
Note that this is simply a button definition. The actual details about the product that maps to this button are included when you send the template in a template message. For example:
{
"type": "button",
"sub_type": "order_details",
"index": 0,
"parameters": [
{
"type": "action",
"action": {
"order_details": {
"reference_id": "abc.123_xyz-1",
"type": "physical-goods",
"currency": "INR",
"payment_settings": [
{
"type": "payment_gateway",
"payment_gateway": {
"type": "razorpay",
"configuration_name": "prod-razor-pay-config-05"
}
}
],
"shipping_info": {
"country": "IN",
"addresses": [
{
"name": "Nidhi Tripathi",
"phone_number": "919000090000",
"address": "Bandra Kurla Complex",
"city": "Mumbai",
"state": "Maharastra",
"in_pin_code": "400051",
"house_number": "12",
"tower_number": "5",
"building_name": "One BKC",
"landmark_area": "Near BKC Circle"
}
]
},
"order": {
"items": [
{
"amount": {
"offset": 100,
"value": 200000
},
"sale_amount": {
"offset": 100,
"value": 150000
},
"name": "Blue Elf Aloe",
"quantity": 1,
"country_of_origin": "India",
"importer_name": "Lucky Shrub Imports and Exports",
"importer_address": {
"address_line1": "One BKC",
"address_line2": "Bandra Kurla Complex",
"city": "Mumbai",
"zone_code": "MH",
"postal_code": "400051",
"country_code": "IN"
}
}
],
"subtotal": {
"offset": 100,
"value": 150000
},
"shipping": {
"offset": 100,
"value": 20000
},
"tax": {
"offset": 100,
"value": 10000
},
"discount": {
"offset": 100,
"value": 15000,
"description": "Additional 10% off"
},
"status": "pending",
"expiration": {
"timestamp": "1726627150"
}
},
"total_amount": {
"offset": 100,
"value": 165000
}
}
}
}
]
}
If you are sending a media card carousel template (which can have two or more products), each checkout button must be defined in the template, and the item details that map to each button must be included when sending the template.
Creating Checkout Button Templates
Use the POST /<WHATSAPP_BUSINESS_ACCOUNT_ID>/message_templates endpoint to create a template that uses a checkout button.
Request Syntax
POST /<WHATSAPP_BUSINESS_ACCOUNT_ID>/message_templates
Post Body
The post body below is for a checkout button template that shows a single button. See the Media Card Carousel Templates document to see carousel template post body syntax.
{
"name": "<TEMPLATE_NAME>",
"language": "<TEMPLATE_LANGUAGE>",
"category": "marketing",
"components": [
{
"type": "header",
"format": "<MESSAGE_HEADER_FORMAT>",
"example": {
"header_handle": [
"<MESSAGE_HEADER_ASSET_HANDLE>"
]
}
},
{
"type": "body",
"text": "<MESSAGE_BODY_TEXT>",
"example": {
"body_text": [
[
"<MESSAGE_BODY_TEXT_VARIABLE_EXAMPLE>",
"<MESSAGE_BODY_TEXT_VARIABLE_EXAMPLE>"
]
]
}
},
/* Footer component is optional */
{
"type": "footer",
"text": "<MESSAGE_FOOTER_TEXT>"
},
{
"type": "buttons",
"buttons": [
{
"type": "order_details",
"text": "Buy now"
},
/* Quick-reply buttons are optional; up to 9 permitted */
{
"type": "quick_reply",
"text": "<QUICK_REPLY_BUTTON_LABEL_TEXT>"
}
]
}
]
}Post Body Parameters
| Placeholder | Description | Example Value |
|---|---|---|
String | Required. Message body text. Supports variables. Maximum 1024 characters. |
|
String | Required if message body text string uses variables. Message body text example variable string(s). Number of strings must match the number of variable placeholders in the message body text string. If message body text uses a single variable, |
|
String | Required if using a message footer. Message footer text string. 60 characters maximum. |
|
String | Required if using a non-text media header. Uploaded media asset handle. Use the Resumable Upload API to generate an asset handle. Media assets are automatically cropped to a wide ratio based on the WhatsApp user's device. |
|
String | Required. Message header format. Value can be |
|
String | Required if using a quick-reply button. Quick-reply button label text. Maximum 25 characters. |
|
String | Required. Template language and locale code. |
|
String | Required. Template name. Maximum 512 characters. |
|
Example Request
This example request creates a checkout button template with a single image message header, message body text that uses two variables, a footer, a single checkout button, and a quick-reply button.
curl 'https://graph.facebook.com/v21.0/102290129340398/message_templates' \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer EAAJB...' \
-d '
{
"name": "item_back_in_stock_v1",
"language": "en_US",
"category": "marketing",
"components": [
{
"type": "header",
"format": "image",
"example": {
"header_handle": [
"3:NDU..."
]
}
},
{
"type": "body",
"text": "Hi {{1}}! The {{2}} is back in stock! Order now before it\'s gone!",
"example": {
"body_text": [
[
"Pablo",
"Blue Elf Aloe"
]
]
}
},
{
"type": "footer",
"text": "Tap \'Stop\' below to stop back-in-stock reminders."
},
{
"type": "buttons",
"buttons": [
{
"type": "order_details",
"text": "Buy now"
},
{
"type": "quick_reply",
"text": "Stop"
}
]
}
]
}'
Sending Checkout Button Templates
Once your checkout button template or carousel template has been approved, you can send it in a template message.
Request Syntax
Use the POST /<WHATSAPP_BUSINESS_PHONE_NUMBER_ID>/messages endpoint to send an approved checkout button template or carousel template to a WhatsApp user.
POST /<WHATSAPP_BUSINESS_PHONE_NUMBER_ID>/messages
Post Body
This post body syntax is for a checkout button template. See Sending Media Card Carousel Templates for media card carousel template post body payload syntax.
{
"messaging_product": "whatsapp",
"recipient_type": "individual",
"to": "<WHATSAPP_USER_PHONE_NUMBER>",
"type": "template",
"template": {
"name": "<TEMPLATE_NAME>",
"language": {
"policy": "deterministic",
"code": "<TEMPLATE_LANGUAGE>"
},
"components": [
{
"type": "header",
"parameters": [
{
"type": "<MESSAGE_HEADER_FORMAT>",
"<MESSAGE_HEADER_FORMAT>": {
"id": "<MESSAGE_HEADER_ASSET_ID>"
}
}
]
},
{
"type": "body",
"parameters": [
{
<MESSAGE_BODY_TEXT_VARIABLE>
},
{
<MESSAGE_BODY_TEXT_VARIABLE>
}
]
},
{
"type": "button",
"sub_type": "order_details",
"index": 0,
"parameters": [
{
"type": "action",
"action": {
"order_details": {
"reference_id": "<REFERENCE_ID>",
"currency": "INR",
"type": "<PRODUCT_TYPE>",
"payment_settings": [
{
"type": "payment_gateway",
"payment_gateway": {
"type": "<PAYMENT_GATEWAY_NAME>",
"configuration_name": "<PAYMENT_GATEWAY_CONFIGURATION_NAME>"
}
}
],
/* "shipping_info" required for physical-goods type, else omit */
"shipping_info": {
"country": "IN",
"addresses": [
/* object required if you know recipient's address, otherwise omit (i.e., set "addresses" to an empty array) */
{
"name": "<SHIPPING_INFO_NAME>",
"phone_number": "<SHIPPING_INFO_PHONE_NUMBER>",
"address": "<SHIPPING_INFO_ADDRESS>",
"city": "<SHIPPING_INFO_CITY>",
"state": "<SHIPPING_INFO_STATE>",
"in_pin_code": "<SHIPPING_INFO_INDIA_PIN>",
"landmark_area": "<SHIPPING_INFO_LANDMARK_AREA>",
"house_number": "<SHIPPING_INFO_HOUSE_NUMBER>",
"tower_number": "<SHIPPING_INFO_TOWER_NUMBER>",
"building_name": "<SHIPPING_INFO_BUILDING_NAME>"
}
]
},
"order": {
"items": [
{
"amount": {
"offset": 100,
"value": <ITEM_PRICE>
},
/* "sale_amount" optional */
"sale_amount": {
"offset": 100,
"value": <SALE_PRICE>
},
"name": "<ITEM_NAME>",
"quantity": <ITEM_QUANTITY>,
"country_of_origin": "<ITEM_COUNTRY_OF_ORIGIN>",
"importer_name": "<IMPORTER_NAME>",
"importer_address": {
"address_line1": "<IMPORTER_ADDRESS_LINE_1>",
"address_line2": "<IMPORTER_ADDRESS_LINE_2>",
"city": "<IMPORTER_CITY>",
"zone_code": "<IMPORTER_ZONE_CODE>",
"postal_code": "<IMPORTER_POSTAL_CODE>",
"country_code": "IN"
}
}
],
"subtotal": {
"offset": 100,
"value": <SUBTOTAL_AMOUNT>
}
"shipping": {
"offset": 100,
"value": <SHIPPING_AMOUNT>
},
"tax": {
"offset": 100,
"value": <TAX_AMOUNT>,
"description": "<TAX_DESCRIPTION>"
},
/* "discount" optional */
"discount": {
"offset": 100,
"value": <DISCOUNT_AMOUNT>,
"description": "<DISCOUNT_DESCRIPTION>"
},
"status": "pending",
/* "expiration" optional */
"expiration": {
"timestamp": "<EXPIRATION_TIMESTAMP>"
}
},
"total_amount": {
"offset": 100,
"value": <TOTAL_AMOUNT>
}
}
}
}
]
}
]
}
}Post Body Parameters
| Placeholder | Description | Example Value |
|---|---|---|
Integer | Required if using a discount. Discount amount, multiplied by discount.offset value. For example, to represent a discount of ₹2, the value would be Discount amount applies to the order subtotal. |
|
String | Optional. Discount description. Maximum 60 characters. |
|
String | Required if using an order expiration. UTC timestamp indicating when we should disable the Buy now button. The timestamp will be used to generate a text string that appears at the bottom of the Order details window. For example: This order expires on September 30, 2024 at 12:00 PM. WhatsApp users who view the message after this time will be unable to purchase the item using the checkout button. Values must represent a UTC time at least 300 seconds from when the send message request is sent to us. |
|
String | Required. Importer address, line 1 (door, tower, number, street, etc.). Maximum 100 characters. |
|
String | Optional. Importer address, line 2 (landmark, area, etc.). Maximum 100 characters. |
|
String | Required. Importer city. Maximum 120 characters. |
|
String | Required. Importer name. Maximum 200 characters. |
|
String | Required. Importer 6-digit postal index number. Maximum 6 digits. |
|
String | Required. Importer two-letter zone code. |
|
String | Required. Item's country of origin. Maximum 100 characters. |
|
String | Required. Item name. Maximum 60 characters. |
|
Integer | Required. Individual item price (price per item), multiplied by amount.offset value. For example, to represent an item price of ₹12.99, the value would be |
|
Integer | Required. Number of items in order, if order is placed. Maximum 100 integers. |
|
Object | Required if template message body text uses variables, otherwise omit. Object describing a message variable. If the template uses multiple variables, you must define an object for each variable. Supports There is no maximum character limit on this value, but it does count against the message body text limit of 1024 characters. | |
String | Required. Header asset's uploaded media asset ID. Use the POST /<BUSINESS_PHONE_NUMBER_ID>/media endpoint to generate an asset ID. |
|
String | Required. Indicates header type and a matching property name. Note that the Value can be |
|
String | Required. Configuration name of payment gateway you have configured on your WhatsApp Business Account. |
|
String | Required. Name of payment gateway you have configured on your WhatsApp Business Account. Values can be:
|
|
String | Required. Product type. Value can be |
|
String | Optional. Value to be included in messages webhooks ( |
|
String | Required. Your unique order or invoice reference ID. Case-sensitive. Cannot be empty. Will be preceded by a hash (#) symbol in the checkout flow. Value must be unique for each checkout button template message. If sending a carousel template, each checkout button must have a unique reference ID. If you need to send multiple messages for the same order/invoice, it is recommended to append a sequence number to the value (for example, -1). Values can only contain English letters, numbers, underscores, dashes, or dots. Maximum 35 characters. |
|
Integer | Required if using a sale amount. Sale price, multiplied by For example, to represent a sale price of ₹10, the value would be |
|
Integer | Required. Order shipping cost, multiplied by For example, to represent a shipping cost of ₹.99, the value would be |
|
String | Required if you know the recipient's shipping information. Product recipient's address. Maximum 512 characters. |
|
String | Optional. Product recipient's building name. Maximum 128 characters. |
|
String | Required if you know the recipient's shipping information. Full name of product recipient's city. Maximum 100 characters. |
|
String | Optional. Product recipient's floor number. Maximum 10 characters. |
|
String | Optional. Product recipient's house number. Maximum 8 characters. |
|
String | Required if you know the recipient's shipping information. Product recipient's postal index number. Maximum 6 characters. |
|
String | Optional. Product recipient's landmark area. Maximum 128 characters. |
|
String | Required if you know the recipient's shipping information. Product recipient's full name. Maximum 256 characters. |
|
String | Required if you know the recipient's shipping information. Product recipient's WhatsApp phone number. Maximum 12 characters. |
|
String | Required if you know the recipient's shipping information. Full name of product recipient's state. Maximum 100 characters. |
|
String | Optional. Product recipient's tower number. Maximum 8 characters. |
|
Integer | Required. Order subtotal. Calculate by multiplying For example, if the template is for placing a single order containing 2 items priced at ₹12.99, the value would be |
|
Integer | Required. Tax amount, multiplied by For example, to represent a tax amount of ₹5, the value would be |
|
String | Optional. Tax description. Maximum 60 characters. |
|
String | Required. Template language and locale code. |
|
String | Required. Template name. Maximum 512 characters. |
|
Integer | Required. Total amount of order, multiplied by For example, to represent a total amount of ₹18, value be Must be a sum of:
Minus:
|
|
String | Required. WhatsApp user phone number. |
|
Example Request
curl 'https://graph.facebook.com/v21.0/106540352242922/messages' \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer EAAJB...' \
-d '
{
"messaging_product": "whatsapp",
"recipient_type": "individual",
"to": "+16505551234",
"type": "template",
"template": {
"name": "item_back_in_stock_v2",
"language": {
"policy": "deterministic",
"code": "en_US"
},
"components": [
{
"type": "header",
"parameters": [
{
"type": "image",
"image": {
"id": "1558081531584829"
}
}
]
},
{
"type": "body",
"parameters": [
{
"type": "text",
"text": "Nidhi"
},
{
"type": "text",
"text": "Blue Elf Aloe"
}
]
},
{
"type": "button",
"sub_type": "order_details",
"index": 0,
"parameters": [
{
"type": "action",
"action": {
"order_details": {
"reference_id": "abc.123_xyz-1",
"type": "physical-goods",
"currency": "INR",
"payment_settings": [
{
"type": "payment_gateway",
"payment_gateway": {
"type": "razorpay",
"configuration_name": "prod-razor-pay-config-05"
}
}
],
"shipping_info": {
"country": "IN",
"addresses": [
{
"name": "Nidhi Tripathi",
"phone_number": "919000090000",
"address": "Bandra Kurla Complex",
"city": "Mumbai",
"state": "Maharastra",
"in_pin_code": "400051",
"house_number": "12",
"tower_number": "5",
"building_name": "One BKC",
"landmark_area": "Near BKC Circle"
}
]
},
"order": {
"items": [
{
"amount": {
"offset": 100,
"value": 200000
},
"sale_amount": {
"offset": 100,
"value": 150000
},
"name": "Blue Elf Aloe",
"quantity": 1,
"country_of_origin": "India",
"importer_name": "Lucky Shrub Imports and Exports",
"importer_address": {
"address_line1": "One BKC",
"address_line2": "Bandra Kurla Complex",
"city": "Mumbai",
"zone_code": "MH",
"postal_code": "400051",
"country_code": "IN"
}
}
],
"subtotal": {
"offset": 100,
"value": 150000
},
"shipping": {
"offset": 100,
"value": 20000
},
"tax": {
"offset": 100,
"value": 10000
},
"discount": {
"offset": 100,
"value": 15000,
"description": "Additional 10% off"
},
"status": "pending",
"expiration": {
"timestamp": "1726627150"
}
},
"total_amount": {
"offset": 100,
"value": 165000
}
}
}
}
]
}
]
}
}'