Checkout with Template Message

In this comprehensive guide, we explore an advanced method to enhance your chatbot's checkout process by utilizing template messages with buttons that link directly to payment gateways like Stripe and PayPal.

This approach offers a more seamless and professional user experience, allowing customers to click a button within the chat to proceed with their payment, rather than manually copying URLs.

We will walk through the setup, configuration, and best practices to implement this feature effectively, ensuring your chatbot can handle dynamic checkout links securely and efficiently.

Step-by-Step Breakdown of Implementing Template Checkout Messages

1. Understanding the Core Concept

Template messages are predefined message formats that include buttons with call-to-action (CTA) links.
These buttons redirect users to checkout pages, such as Stripe or PayPal, via a URL.
Unlike plain URLs, buttons provide a more interactive and user-friendly experience.
Only one URL per button is allowed, so multiple payment options require separate templates.

2. Creating and Configuring the Message Template

Step	Action	Details
a. Access your account	Log into your 360dialog account	Navigate to the Templates section
b. Create a new template	Click Create New Template	Name it appropriately, e.g., Checkout with Stripe
c. Set template properties	- Template Name: e.g., `checkout_stripe`<br>- Category: Auto-reply<br>- Language: English<br>- Type: Media (or appropriate type)	These settings define the template's purpose and language
d. Design the template	- Add Header and Body	Use variables for dynamic content, e.g., order details
e. Add a button	- Button Type: Call-to-action<br>- Button Label: e.g., Pay with Stripe<br>- Button URL: Use a variable that will be dynamically replaced	This button will link to the checkout page

3. Incorporating Dynamic URLs and Variables

The checkout URL (Stripe or PayPal) is dynamically generated based on the user's order.
Use variables in the template, such as {{checkout_url}}, which will be replaced at runtime.
Example URL structure:

https://yourdomain.com/checkout?order_id={{order_id}}&payment_provider=stripe

The variable {{checkout_url}} is populated with the actual checkout link during the chat flow.

4. Generating and Managing Checkout Links

Generate the checkout link dynamically via your backend or payment API.
Store the checkout URL in a custom variable (e.g., {{checkout_url}}) associated with the user's session.
When the user initiates checkout, update this variable with the correct URL.

5. Preparing the URL for Use in Templates

Since only one URL can be embedded in a button, extract the dynamic part of the checkout link.
Use string operations to remove unnecessary parts of the URL, such as domain prefixes, if needed.
For example, replace:

https://yourdomain.com/checkout?order_id=12345

with just:

/checkout?order_id=12345

This ensures the button links correctly, especially if the domain is fixed or needs to be dynamic.

6. Submitting and Approving the Template

After designing the template, submit it for approval within 360dialog.
Once approved, sync the template to your WhatsApp Business account.
Confirm the template appears as "approved" and is ready for use.

7. Implementing the Checkout Flow with Template Messages

Workflow Overview

Step 1: User initiates checkout.
Step 2: Generate the checkout URL dynamically (Stripe or PayPal).
Step 3: Store the URL in a custom variable.
Step 4: Send a template message with a button linking to the checkout page.
Step 5: User clicks the button, redirected to the payment gateway.
Step 6: After payment, trigger a confirmation message or follow-up.

Example: Sending the Template Message

Hi {{user_name}}, click the button below to complete your purchase:
[Pay Now]({{checkout_url}})

The {{checkout_url}} is replaced with the actual checkout link at runtime.
The button appears as a call-to-action within WhatsApp, providing a smooth checkout experience.

8. Handling Dynamic URLs and String Replacement

Managing URL Variables

Use string replacement operations to clean or modify URLs before embedding.
Example: Remove domain prefixes if necessary.

Operation	Purpose	Example
Replace domain	Remove or modify domain part	Replace `https://yourdomain.com` with empty or a different domain
Insert variable	Embed dynamic checkout link	Replace static URL with `{{checkout_url}}`

Sample Code Snippet (Pseudocode)

# Replace domain in URL
original_url = "https://yourdomain.com/checkout?order_id=12345"
clean_url = original_url.replace("https://yourdomain.com", "")
# Assign to variable
custom_variable = clean_url

Final URL in Template

{{base_url}}{{checkout_path}}

Where {{base_url}} is the domain, and {{checkout_path}} is the dynamic part.

9. Best Practices and Tips

Use separate templates for different payment options (Stripe, PayPal).
Test thoroughly to ensure URLs are correctly generated and replaced.
Secure your checkout links to prevent tampering.
Keep templates simple and clear to avoid user confusion.
Monitor conversions to optimize the checkout flow.

10. Troubleshooting Common Issues

Issue	Possible Cause	Solution
Button not linking correctly	URL variable not populated	Verify URL generation and variable assignment
Template not approved	Content policy violation	Ensure compliance with platform guidelines
Dynamic URL not updating	Caching or variable not set	Clear cache, check variable assignment logic
Payment not redirecting	Incorrect URL format	Confirm URL structure and encoding

Implementing template messages with buttons for checkout links significantly improves the user experience by providing direct, clickable options for payments within WhatsApp. The key steps involve creating a template with a button, dynamically generating and managing checkout URLs, and ensuring proper string manipulation to embed these URLs correctly. By following this structured approach, you can streamline your payment process, reduce friction, and increase conversions.

Remember, always test thoroughly and monitor performance to refine your setup. If you encounter challenges, leverage community resources or support channels for assistance. With these best practices, your chatbot will deliver a professional, seamless checkout experience that benefits both your business and your customers.

All Training