{"id":13390,"date":"2025-05-15T00:00:00","date_gmt":"2025-05-15T00:00:00","guid":{"rendered":"https:\/\/www.mailgun.com\/blog\/como-crear-flujos-de-trabajo-de-emails-transaccionales-de-confirmacion-de-pedidos\/"},"modified":"2026-04-30T04:27:53","modified_gmt":"2026-04-30T04:27:53","slug":"como-crear-flujos-de-trabajo-de-emails-transaccionales-de-confirmacion-de-pedidos","status":"publish","type":"blog","link":"https:\/\/www.mailgun.com\/es\/blog\/dev-life\/como-crear-flujos-de-trabajo-de-emails-transaccionales-de-confirmacion-de-pedidos\/","title":{"rendered":"Creaci\u00f3n de flujos de trabajo de emails transaccionales para confirmaciones de pedidos con la API de Mailgun"},"content":{"rendered":"\n<p>A diferencia de los emails de marketing, los emails transaccionales (como las confirmaciones de pedidos, las notificaciones de env\u00edo y los restablecimientos de la contrase\u00f1a) son desencadenados por acciones espec\u00edficas de los usuarios y proporcionan actualizaciones en tiempo real sobre sus interacciones con tu plataforma. Ayudan a generar confianza, reducen las preguntas de asistencia y logran que la experiencia de compra sea fluida.<\/p>\n\n\n\n<p>Las confirmaciones de pedidos son especialmente importantes, ya que permiten a tus clientes saber que su compra se realiz\u00f3 correctamente y proporcionan al usuario un registro con los detalles de la transacci\u00f3n.<\/p>\n\n\n\n<p>En este tutorial, aprender\u00e1s a crear un flujo de trabajo de emails transaccionales para confirmaciones de pedidos utilizando la API de Mailgun.<\/p>\n\n\n\r\n    <nav data-content-type=\"longform\" class=\"toc-block longform-spacings px-5 py-6 px-md-6 px-lg-7 py-md-7 bg-light fs-sm rounded-lg\" aria-labelledby=\"toc-title-3602\"><p class=\"h5 m-0\" id=\"toc-title-3602\">Table of contents<\/p><div class=\"d-flex mt-3\"><div class=\"w-auto fw-bold text-accent d-flex me-2\">01<\/div><div class=\"d-flex flex-column\"><a class=\"fw-bold scrollme link-body-color text-accent\" href=\"#implementacion-de-flujos-de-trabajo-de-emails-transaccionales-para-confirmaciones-de-pedidos\">Implementaci\u00f3n de flujos de trabajo de emails transaccionales para confirmaciones de pedidos<\/a><\/div><\/div><div class=\"d-flex mt-3\"><div class=\"w-auto fw-bold text-accent d-flex me-2\">02<\/div><div class=\"d-flex flex-column\"><a class=\"fw-bold scrollme link-body-color text-accent\" href=\"#la-interfaz-de-la-aplicacion\">La interfaz de la aplicaci\u00f3n<\/a><\/div><\/div><div class=\"d-flex mt-3\"><div class=\"w-auto fw-bold text-accent d-flex me-2\">03<\/div><div class=\"d-flex flex-column\"><a class=\"fw-bold scrollme link-body-color text-accent\" href=\"#configurar-la-conexion-de-mailgun\">Configurar la conexi\u00f3n de Mailgun<\/a><\/div><\/div><div class=\"d-flex mt-3\"><div class=\"w-auto fw-bold text-accent d-flex me-2\">04<\/div><div class=\"d-flex flex-column\"><a class=\"fw-bold scrollme link-body-color text-accent\" href=\"#diseno-de-la-plantilla-de-email\">Dise\u00f1o de la plantilla de email<\/a><\/div><\/div><div class=\"d-flex mt-3\"><div class=\"w-auto fw-bold text-accent d-flex me-2\">05<\/div><div class=\"d-flex flex-column\"><a class=\"fw-bold scrollme link-body-color text-accent\" href=\"#implementacion-de-la-funcionalidad-de-envio-de-emails\">Implementaci\u00f3n de la funcionalidad de env\u00edo de emails<\/a><\/div><\/div><div class=\"d-flex mt-3\"><div class=\"w-auto fw-bold text-accent d-flex me-2\">06<\/div><div class=\"d-flex flex-column\"><a class=\"fw-bold scrollme link-body-color text-accent\" href=\"#integracion-con-eventos-de-aplicaciones\">Integraci\u00f3n con eventos de aplicaciones<\/a><\/div><\/div><div class=\"d-flex mt-3\"><div class=\"w-auto fw-bold text-accent d-flex me-2\">07<\/div><div class=\"d-flex flex-column\"><a class=\"fw-bold scrollme link-body-color text-accent\" href=\"#probar-el-flujo-de-trabajo\">Probar el flujo de trabajo<\/a><\/div><\/div><div class=\"d-flex mt-3\"><div class=\"w-auto fw-bold text-accent d-flex me-2\">08<\/div><div class=\"d-flex flex-column\"><a class=\"fw-bold scrollme link-body-color text-accent\" href=\"#seguimiento-y-gestion-de-emails\">Seguimiento y gesti\u00f3n de emails<\/a><\/div><\/div><div class=\"d-flex mt-3\"><div class=\"w-auto fw-bold text-accent d-flex me-2\">09<\/div><div class=\"d-flex flex-column\"><a class=\"fw-bold scrollme link-body-color text-accent\" href=\"#en-resumen\">En resumen<\/a><\/div><\/div><\/nav>\n\n\n<h2 class=\"wp-block-heading\"><b>Implementaci\u00f3n de flujos de trabajo de emails transaccionales para confirmaciones de pedidos<\/b><\/h2>\n\n\n\n<p>Antes de comenzar, aseg\u00farate de tener <a href=\"https:\/\/login.mailgun.com\/login\/\" target=\"_tabs\" rel=\"noopener noreferrer\">Cuenta de Mailgun<\/a> y <a href=\"https:\/\/nodejs.org\/\" target=\"_tabs\" rel=\"noopener noreferrer\">Node.js<\/a> instalado en tu equipo.<\/p>\n\n\n\n<p>Una vez que tu cuenta est\u00e9 registrada y activada, haz clic en <b>Empieza gratis<\/b> y luego en <b>Crear una clave de API<\/b> para proporcionar una breve descripci\u00f3n de la clave. Una vez generada, copia y guarda la clave de API en un lugar seguro.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" class=\"wp-image-3951\" width=\"1728\" height=\"924\" src=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/1__2_.png\" alt=\"API Key\" srcset=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/1__2_.png 1728w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/1__2_-300x160.png 300w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/1__2_-768x411.png 768w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/1__2_-1024x548.png 1024w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/1__2_-1536x821.png 1536w\" sizes=\"(max-width: 1728px) 100vw, 1728px\" \/><\/figure>\n\n\n\n<p>Esta clave se utilizar\u00e1 para autenticar tus solicitudes a la API de Mailgun.<\/p>\n\n\n\n<p>Para simplificar las cosas, clona el siguiente repositorio de UI y configura las variables de entorno ejecutando los siguientes comandos de <code>npm<\/code>:<\/p>\n\n\n    <div data-content-type=\"longform\" class=\"code-snippet longform-spacings rounded-lg overflow-hidden shadow \" data-count=\"1\">\r\n        <ul class=\"nav nav-buttons code-snippet__tabs longform-except position-relative d-flex gap-2 flex-wrap p-3\" role=\"tablist\">\r\n\r\n                            \r\n                    \r\n                        <li class=\"nav-item\" role=\"presentation\">\r\n                            <button class=\"nav-link active\" data-bs-toggle=\"tab\" data-bs-target=\"#code_0\" type=\"button\" role=\"tab\" aria-controls=\"code_0\" aria-selected=\"true\">\r\n                                PHP                            <\/button>\r\n                        <\/li>\r\n\r\n                    \r\n                            \r\n        <\/ul>\r\n        <div class=\"code-snippet__tab-content tab-content overflow-hidden\">\r\n\r\n                            \r\n                    <div class=\"tab-pane show active\" id=\"code_0\" role=\"tabpanel\" aria-labelledby=\"code_0\">\r\n                        <pre class=\"w-100 h-100 m-0 line-numbers language-PHP\">\r\n                            <code class=\"language-PHP\">\r\n\r\n                                $ git clone https:\/\/github.com\/Ikeh-Akinyemi\/draftdev-mailgunnerrn$ cd draftdev-mailgunner; npm install rn$ echo -e &quot;MAILGUN_API_KEY=your_api_key_here\nMAILGUN_DOMAIN=your_domain_here\nPORT=8080&quot; &gt;&gt; .env\r\n                            <\/code>\r\n                        <\/pre>\r\n                    <\/div>\r\n                                    <\/div>\r\n    <\/div>\r\n\n\n\n<p>Este comando a\u00f1ade las bibliotecas mailgun.js, form-data, cors, dotenv y express para su uso en el servidor backend y crea algunos valores de marcador de posici\u00f3n para la clave de API de Mailgun y el dominio en un archivo .env que actualizar\u00e1s durante el tutorial.<\/p>\n\n\n\n<p>El dominio de Mailgun te ofrece la opci\u00f3n de configurar tu propio dominio personalizado o utilizar un entorno de pruebas (sandbox) para realizar pruebas. En este tutorial utilizar\u00e1s un dominio sandbox. Puedes encontrar el dominio sandbox de Mailgun navegando a <b>Env\u00edos &gt; Env\u00edos &gt; Ajustes del dominio<\/b> en tu panel de control y haciendo clic en el bot\u00f3n <b>Seleccionar<\/b> en la opci\u00f3n de integraci\u00f3n de la <b>API<\/b>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" class=\"wp-image-3957\" width=\"1746\" height=\"1040\" src=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/2__2_.png\" alt=\"Mailgun API Sandbox\" srcset=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/2__2_.png 1746w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/2__2_-300x179.png 300w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/2__2_-768x457.png 768w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/2__2_-1024x610.png 1024w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/2__2_-1536x915.png 1536w\" sizes=\"(max-width: 1746px) 100vw, 1746px\" \/><\/figure>\n\n\n\n<p>Tu dominio sandbox se incluye en las plantillas (boilerplates) proporcionadas para la configuraci\u00f3n de Mailgun. Recuerda actualizar el valor de MAILGUN_DOMAIN (actualmente your_domain_here) dentro del archivo .env.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" class=\"wp-image-3967\" width=\"1744\" height=\"1038\" src=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/3__2_.png\" alt=\"Domain Update\" srcset=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/3__2_.png 1744w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/3__2_-300x179.png 300w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/3__2_-768x457.png 768w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/3__2_-1024x609.png 1024w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/3__2_-1536x914.png 1536w\" sizes=\"(max-width: 1744px) 100vw, 1744px\" \/><\/figure>\n\n\n\n<p>Si deseas configurar un dominio personalizado, sigue las instrucciones detalladas en <a href=\"https:\/\/youtu.be\/VI6aXV4YbdI\" target=\"_tabs\" rel=\"noopener noreferrer\">este tutorial de YouTube<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">La interfaz de la aplicaci\u00f3n<\/h2>\n\n\n\n<p>En este escenario, trabajar\u00e1s con una sencilla aplicaci\u00f3n de carrito de la compra creada con HTML, CSS y JavaScript. La aplicaci\u00f3n permite a los usuarios a\u00f1adir art\u00edculos a su carrito, ajustar las cantidades y proceder al pago. Cuando el usuario confirma su compra, la aplicaci\u00f3n env\u00eda una solicitud al backend para procesar el pedido y enviar un email de confirmaci\u00f3n. Para previsualizar la UI, abre el archivo <code>ui\/index.html<\/code> en el navegador o ejecuta el comando de Python <code>python3 -m http.server -d=.\/ui:<\/code><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" class=\"wp-image-3993\" width=\"1750\" height=\"1048\" src=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/4__3_.png\" alt=\"Shopping Cart Example\" srcset=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/4__3_.png 1750w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/4__3_-300x180.png 300w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/4__3_-768x460.png 768w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/4__3_-1024x613.png 1024w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/4__3_-1536x920.png 1536w\" sizes=\"(max-width: 1750px) 100vw, 1750px\" \/><\/figure>\n\n\n\n<p>Esta UI est\u00e1 dise\u00f1ada para ser intuitiva, con el objetivo de proporcionar una experiencia de pago fluida. El backend se encarga del trabajo pesado, incluyendo el procesamiento de pedidos y el env\u00edo de emails de confirmaci\u00f3n.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Configurar la conexi\u00f3n de Mailgun<\/h2>\n\n\n\n<p>Para integrar Mailgun en tu backend, necesitas inicializar el cliente de Mailgun utilizando tu clave de API. A continuaci\u00f3n te explicamos c\u00f3mo configurar la conexi\u00f3n en tu backend de Node.js:<\/p>\n\n\n    <div data-content-type=\"longform\" class=\"code-snippet longform-spacings rounded-lg overflow-hidden shadow \" data-count=\"1\">\r\n        <ul class=\"nav nav-buttons code-snippet__tabs longform-except position-relative d-flex gap-2 flex-wrap p-3\" role=\"tablist\">\r\n\r\n                            \r\n                    \r\n                        <li class=\"nav-item\" role=\"presentation\">\r\n                            <button class=\"nav-link active\" data-bs-toggle=\"tab\" data-bs-target=\"#code_0\" type=\"button\" role=\"tab\" aria-controls=\"code_0\" aria-selected=\"true\">\r\n                                PHP                            <\/button>\r\n                        <\/li>\r\n\r\n                    \r\n                            \r\n        <\/ul>\r\n        <div class=\"code-snippet__tab-content tab-content overflow-hidden\">\r\n\r\n                            \r\n                    <div class=\"tab-pane show active\" id=\"code_0\" role=\"tabpanel\" aria-labelledby=\"code_0\">\r\n                        <pre class=\"w-100 h-100 m-0 line-numbers language-PHP\">\r\n                            <code class=\"language-PHP\">\r\n\r\n                                const formData = require(&#039;form-data&#039;);rnconst Mailgun = require(&#039;mailgun.js&#039;);rnrnconst mailgun = new Mailgun(formData);rnconst mg = mailgun.client({ username: &#039;api&#039;, key: process.env.MAILGUN_API_KEY });rnconst MAILGUN_DOMAIN = process.env.MAILGUN_DOMAIN;\r\n                            <\/code>\r\n                        <\/pre>\r\n                    <\/div>\r\n                                    <\/div>\r\n    <\/div>\r\n\n\n\n<p>Este c\u00f3digo inicializa el cliente de Mailgun, que se utilizar\u00e1 para enviar emails transaccionales. Aseg\u00farate de actualizar el valor de <code>MAILGUN_API_KEY<\/code> (actualmente <code>your_api_key_here<\/code>) dentro de tu archivo .env antes de continuar.<\/p>\n\n\n\n<p>Prueba la conexi\u00f3n enviando una muestra de email de prueba:<\/p>\n\n\n    <div data-content-type=\"longform\" class=\"code-snippet longform-spacings rounded-lg overflow-hidden shadow \" data-count=\"1\">\r\n        <ul class=\"nav nav-buttons code-snippet__tabs longform-except position-relative d-flex gap-2 flex-wrap p-3\" role=\"tablist\">\r\n\r\n                            \r\n                    \r\n                        <li class=\"nav-item\" role=\"presentation\">\r\n                            <button class=\"nav-link active\" data-bs-toggle=\"tab\" data-bs-target=\"#code_0\" type=\"button\" role=\"tab\" aria-controls=\"code_0\" aria-selected=\"true\">\r\n                                PHP                            <\/button>\r\n                        <\/li>\r\n\r\n                    \r\n                            \r\n        <\/ul>\r\n        <div class=\"code-snippet__tab-content tab-content overflow-hidden\">\r\n\r\n                            \r\n                    <div class=\"tab-pane show active\" id=\"code_0\" role=\"tabpanel\" aria-labelledby=\"code_0\">\r\n                        <pre class=\"w-100 h-100 m-0 line-numbers language-PHP\">\r\n                            <code class=\"language-PHP\">\r\n\r\n                                mg.messages.create(&#039;&lt;your-domain.com&gt;&#039;, {rn    from: &quot;Excited User &lt;mailgun@your-domain.com&gt;&quot;,rn    to: [&quot;test@example.com&quot;],rn    subject: &quot;Hello&quot;,rn    text: &quot;Testing some Mailgun awesomeness!&quot;rn})rn.then(msg =&gt; console.log(msg)) \/\/ logs response datarn.catch(err =&gt; console.error(err)); \/\/ logs any error\r\n                            <\/code>\r\n                        <\/pre>\r\n                    <\/div>\r\n                                    <\/div>\r\n    <\/div>\r\n\n\n\n<p>Puedes usar el dominio sandbox proporcionado por Mailgun para las pruebas, pero necesitas a\u00f1adir al menos un email verificado para realizar pruebas (hasta cinco). Para verificar tu direcci\u00f3n de email de prueba, ve a <b>Env\u00edos &gt; Env\u00edos &gt; Ajustes del dominio<\/b> en tu panel de control de Mailgun. A continuaci\u00f3n, introduce tu direcci\u00f3n de email en el campo de entrada designado y haz clic en <b>A\u00f1adir<\/b>. Mailgun enviar\u00e1 un email de verificaci\u00f3n a esta direcci\u00f3n.<\/p>\n\n\n\n<p>Revisa tu bandeja de entrada y haz clic en el enlace de verificaci\u00f3n <b>Acepto<\/b> para completar el proceso y registrarte como destinatario de prueba autorizado:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" class=\"wp-image-4002\" width=\"1738\" height=\"1048\" src=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/5__3_.png\" alt=\"Verification Link\" srcset=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/5__3_.png 1738w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/5__3_-300x181.png 300w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/5__3_-768x463.png 768w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/5__3_-1024x617.png 1024w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/5__3_-1536x926.png 1536w\" sizes=\"(max-width: 1738px) 100vw, 1738px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Dise\u00f1o de la plantilla de email<\/h2>\n\n\n\n<p>Los emails transaccionales a menudo requieren contenido din\u00e1mico, como el nombre del usuario, los detalles del pedido y la informaci\u00f3n de env\u00edo, por lo que necesitas crear una plantilla HTML con marcadores de posici\u00f3n para los datos din\u00e1micos. Aqu\u00ed tienes un ejemplo de una plantilla de confirmaci\u00f3n de pedido sencilla:<\/p>\n\n\n    <div data-content-type=\"longform\" class=\"code-snippet longform-spacings rounded-lg overflow-hidden shadow \" data-count=\"1\">\r\n        <ul class=\"nav nav-buttons code-snippet__tabs longform-except position-relative d-flex gap-2 flex-wrap p-3\" role=\"tablist\">\r\n\r\n                            \r\n                    \r\n                        <li class=\"nav-item\" role=\"presentation\">\r\n                            <button class=\"nav-link active\" data-bs-toggle=\"tab\" data-bs-target=\"#code_0\" type=\"button\" role=\"tab\" aria-controls=\"code_0\" aria-selected=\"true\">\r\n                                HTML                            <\/button>\r\n                        <\/li>\r\n\r\n                    \r\n                            \r\n        <\/ul>\r\n        <div class=\"code-snippet__tab-content tab-content overflow-hidden\">\r\n\r\n                            \r\n                    <div class=\"tab-pane show active\" id=\"code_0\" role=\"tabpanel\" aria-labelledby=\"code_0\">\r\n                        <pre class=\"w-100 h-100 m-0 line-numbers language-markup\">\r\n                            <code class=\"language-markup\">\r\n\r\n                                &lt;!DOCTYPE html&gt;rn&lt;html&gt;rn&lt;head&gt;rn    &lt;title&gt;Order Confirmation&lt;\/title&gt;rn&lt;\/head&gt;rn&lt;body&gt;rn    &lt;h1&gt;Thank you for your order, {{name}}!&lt;\/h1&gt;rn    &lt;p&gt;Your order number is {{orderNumber}}.&lt;\/p&gt;rn    &lt;p&gt;We will ship your items to {{shippingAddress}}.&lt;\/p&gt;rn&lt;\/body&gt;rn&lt;\/html&gt;\r\n                            <\/code>\r\n                        <\/pre>\r\n                    <\/div>\r\n                                    <\/div>\r\n    <\/div>\r\n\n\n\n<p>Puedes usar un motor de plantillas como <a href=\"https:\/\/handlebarsjs.com\/\" target=\"_tabs\" rel=\"noopener noreferrer\">Handlebars<\/a> o <a href=\"https:\/\/ejs.co\/#features\" target=\"_tabs\" rel=\"noopener noreferrer\">EJS<\/a> para sustituir los marcadores de posici\u00f3n con los datos reales antes de enviar el email. Tambi\u00e9n puedes usar <a href=\"https:\/\/help.mailgun.com\/hc\/en-us\/articles\/6923289387675-Email-Templates-Editor\" target=\"_tabs\" rel=\"noopener noreferrer\">el editor visual intuitivo de Mailgun<\/a> para crear hermosas plantillas de email adaptativas sin ning\u00fan conocimiento de programaci\u00f3n.<\/p>\n\n\n\n<p>En este art\u00edculo, utilizar\u00e1s la forma m\u00e1s sencilla de crear plantillas: la interpolaci\u00f3n de cadenas mediante los literales de plantilla de JavaScript. Este enfoque te permite configurar una plantilla de email HTML completada con los datos din\u00e1micos necesarios:<\/p>\n\n\n    <div data-content-type=\"longform\" class=\"code-snippet longform-spacings rounded-lg overflow-hidden shadow \" data-count=\"1\">\r\n        <ul class=\"nav nav-buttons code-snippet__tabs longform-except position-relative d-flex gap-2 flex-wrap p-3\" role=\"tablist\">\r\n\r\n                            \r\n                    \r\n                        <li class=\"nav-item\" role=\"presentation\">\r\n                            <button class=\"nav-link active\" data-bs-toggle=\"tab\" data-bs-target=\"#code_0\" type=\"button\" role=\"tab\" aria-controls=\"code_0\" aria-selected=\"true\">\r\n                                PHP                            <\/button>\r\n                        <\/li>\r\n\r\n                    \r\n                            \r\n        <\/ul>\r\n        <div class=\"code-snippet__tab-content tab-content overflow-hidden\">\r\n\r\n                            \r\n                    <div class=\"tab-pane show active\" id=\"code_0\" role=\"tabpanel\" aria-labelledby=\"code_0\">\r\n                        <pre class=\"w-100 h-100 m-0 line-numbers language-PHP\">\r\n                            <code class=\"language-PHP\">\r\n\r\n                                function emailTemplate(order) {rn  \/\/ Format items for emailrn  const itemsList = order.items.map(item =&gt; {rn    return `rn      &lt;tr&gt;rn        &lt;td style=&quot;padding: 10px 0; border-bottom: 1px solid #eee;&quot;&gt;rn          ${item.name}rn        &lt;\/td&gt;rn        &lt;td style=&quot;padding: 10px 0; border-bottom: 1px solid #eee; text-align: center;&quot;&gt;rn          ${item.quantity}rn        &lt;\/td&gt;rn        &lt;td style=&quot;padding: 10px 0; border-bottom: 1px solid #eee; text-align: right;&quot;&gt;rn          $${item.price.toFixed(2)}rn        &lt;\/td&gt;rn        &lt;td style=&quot;padding: 10px 0; border-bottom: 1px solid #eee; text-align: right;&quot;&gt;rn          $${(item.price * item.quantity).toFixed(2)}rn        &lt;\/td&gt;rn      &lt;\/tr&gt;rn    `;rn  }).join(&#039;&#039;);rn};\r\n                            <\/code>\r\n                        <\/pre>\r\n                    <\/div>\r\n                                    <\/div>\r\n    <\/div>\r\n\n\n\n<p>Este c\u00f3digo itera sobre los art\u00edculos de un pedido para generar un recibo en forma de tabla del pedido del cliente. El valor devuelto, <code>itemsList<\/code>, es una cadena literal que se utilizar\u00e1 para construir el resto de la plantilla de email de la siguiente manera:<\/p>\n\n\n    <div data-content-type=\"longform\" class=\"code-snippet longform-spacings rounded-lg overflow-hidden shadow \" data-count=\"1\">\r\n        <ul class=\"nav nav-buttons code-snippet__tabs longform-except position-relative d-flex gap-2 flex-wrap p-3\" role=\"tablist\">\r\n\r\n                            \r\n                    \r\n                        <li class=\"nav-item\" role=\"presentation\">\r\n                            <button class=\"nav-link active\" data-bs-toggle=\"tab\" data-bs-target=\"#code_0\" type=\"button\" role=\"tab\" aria-controls=\"code_0\" aria-selected=\"true\">\r\n                                PHP                            <\/button>\r\n                        <\/li>\r\n\r\n                    \r\n                            \r\n        <\/ul>\r\n        <div class=\"code-snippet__tab-content tab-content overflow-hidden\">\r\n\r\n                            \r\n                    <div class=\"tab-pane show active\" id=\"code_0\" role=\"tabpanel\" aria-labelledby=\"code_0\">\r\n                        <pre class=\"w-100 h-100 m-0 line-numbers language-PHP\">\r\n                            <code class=\"language-PHP\">\r\n\r\n                                function emailTemplate(order) {rn    ...rnrn  \/\/ Create email HTML templatern  const emailHtml = `rn    &lt;!DOCTYPE html&gt;rn    &lt;html&gt;rn    &lt;head&gt;rn      &lt;style&gt;rn        body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; }rn        .container { max-width: 600px; margin: 0 auto; }rn        .header { background-color: #f8f9fa; padding: 20px; text-align: center; }rn        .content { padding: 20px; }rn        .order-details { margin-top: 20px; }rn        .order-table { width: 100%; border-collapse: collapse; }rn        .order-table th { text-align: left; padding: 10px 0; border-bottom: 2px solid #ddd; }rn        .footer { margin-top: 30px; text-align: center; font-size: 14px; color: #777; }rn        .total-row { font-weight: bold; }rn      &lt;\/style&gt;rn    &lt;\/head&gt;rn    &lt;body&gt;rn      &lt;div class=&quot;container&quot;&gt;rn        &lt;div class=&quot;header&quot;&gt;rn          &lt;h2&gt;Order Confirmation&lt;\/h2&gt;rn          &lt;p&gt;Thank you for your purchase!&lt;\/p&gt;rn        &lt;\/div&gt;rnrn        &lt;div class=&quot;content&quot;&gt;rn          &lt;p&gt;Hello ${order.customer.name},&lt;\/p&gt;rnrn          &lt;p&gt;Your order has been confirmed. Here are your order details:&lt;\/p&gt;rnrn          &lt;div class=&quot;order-details&quot;&gt;rn            &lt;p&gt;&lt;strong&gt;Order ID:&lt;\/strong&gt; ${order.id}&lt;\/p&gt;rn            &lt;p&gt;&lt;strong&gt;Order Date:&lt;\/strong&gt; ${new Date(order.createdAt).toLocaleString()}&lt;\/p&gt;rnrn            &lt;table class=&quot;order-table&quot;&gt;rn              &lt;thead&gt;rn                &lt;tr&gt;rn                  &lt;th&gt;Item&lt;\/th&gt;rn                  &lt;th style=&quot;text-align: center;&quot;&gt;Qty&lt;\/th&gt;rn                  &lt;th style=&quot;text-align: right;&quot;&gt;Price&lt;\/th&gt;rn                  &lt;th style=&quot;text-align: right;&quot;&gt;Total&lt;\/th&gt;rn                &lt;\/tr&gt;rn              &lt;\/thead&gt;rn              &lt;tbody&gt;rn                ${itemsList}rn                &lt;tr&gt;rn                  &lt;td colspan=&quot;3&quot; style=&quot;text-align: right; padding-top: 20px;&quot;&gt;&lt;strong&gt;Subtotal:&lt;\/strong&gt;&lt;\/td&gt;rn                  &lt;td style=&quot;text-align: right; padding-top: 20px;&quot;&gt;&lt;strong&gt;$${order.subtotal.toFixed(2)}&lt;\/strong&gt;&lt;\/td&gt;rn                &lt;\/tr&gt;rn                &lt;tr&gt;rn                  &lt;td colspan=&quot;3&quot; style=&quot;text-align: right;&quot;&gt;&lt;strong&gt;Tax:&lt;\/strong&gt;&lt;\/td&gt;rn                  &lt;td style=&quot;text-align: right;&quot;&gt;&lt;strong&gt;$${order.tax.toFixed(2)}&lt;\/strong&gt;&lt;\/td&gt;rn                &lt;\/tr&gt;rn                &lt;tr class=&quot;total-row&quot;&gt;rn                  &lt;td colspan=&quot;3&quot; style=&quot;text-align: right; padding-top: 10px;&quot;&gt;&lt;strong&gt;Total:&lt;\/strong&gt;&lt;\/td&gt;rn                  &lt;td style=&quot;text-align: right; padding-top: 10px;&quot;&gt;&lt;strong&gt;$${order.total.toFixed(2)}&lt;\/strong&gt;&lt;\/td&gt;rn                &lt;\/tr&gt;rn              &lt;\/tbody&gt;rn            &lt;\/table&gt;rn          &lt;\/div&gt;rnrn          &lt;div style=&quot;margin-top: 30px;&quot;&gt;rn            &lt;p&gt;&lt;strong&gt;Shipping Address:&lt;\/strong&gt;&lt;\/p&gt;rn            &lt;p&gt;rn              ${order.shipping.address}&lt;br&gt;rn              ${order.shipping.city}, ${order.shipping.state} ${order.shipping.zipCode}rn            &lt;\/p&gt;rn          &lt;\/div&gt;rnrn          &lt;div style=&quot;margin-top: 30px;&quot;&gt;rn            &lt;p&gt;&lt;strong&gt;Payment Method:&lt;\/strong&gt; ${order.payment.method} (ending in ${order.payment.last4})&lt;\/p&gt;rn          &lt;\/div&gt;rnrn          &lt;div style=&quot;margin-top: 30px;&quot;&gt;rn            &lt;p&gt;If you have any questions about your order, please contact our customer support.&lt;\/p&gt;rn            &lt;p&gt;Thank you for shopping with us!&lt;\/p&gt;rn          &lt;\/div&gt;rn        &lt;\/div&gt;rnrn        &lt;div class=&quot;footer&quot;&gt;rn          &lt;p&gt;This is an automated email, please do not reply to this message.&lt;\/p&gt;rn          &lt;p&gt;\u00a9 2025 Your Company. All rights reserved.&lt;\/p&gt;rn        &lt;\/div&gt;rn      &lt;\/div&gt;rn    &lt;\/body&gt;rn    &lt;\/html&gt;rn  `;rnrn  return emailHtml;rn}\r\n                            <\/code>\r\n                        <\/pre>\r\n                    <\/div>\r\n                                    <\/div>\r\n    <\/div>\r\n\n\n\n<p>Aqu\u00ed, combinas el recibo con el resto de una cadena de plantilla HTML que contiene los detalles del cliente. El HTML contiene el estilo b\u00e1sico para la plantilla de email.<\/p>\n\n\n\n<p>Obt\u00e9n m\u00e1s informaci\u00f3n en nuestra <a href=\"https:\/\/www.mailgun.com\/es\/blog\/email\/plantillas-de-email-html-transaccional\/\">Plantillas para correos transaccionales<\/a> p\u00e1gina, incluida la descarga de plantillas gratuitas.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Implementaci\u00f3n de la funcionalidad de env\u00edo de emails<\/h2>\n\n\n\n<p>Ahora que tu plantilla est\u00e1 lista, es hora de escribir la funci\u00f3n que env\u00eda el email utilizando la API de Mailgun. A continuaci\u00f3n te explicamos c\u00f3mo puedes implementar esta funcionalidad en tu backend:<\/p>\n\n\n    <div data-content-type=\"longform\" class=\"code-snippet longform-spacings rounded-lg overflow-hidden shadow \" data-count=\"1\">\r\n        <ul class=\"nav nav-buttons code-snippet__tabs longform-except position-relative d-flex gap-2 flex-wrap p-3\" role=\"tablist\">\r\n\r\n                            \r\n                    \r\n                        <li class=\"nav-item\" role=\"presentation\">\r\n                            <button class=\"nav-link active\" data-bs-toggle=\"tab\" data-bs-target=\"#code_0\" type=\"button\" role=\"tab\" aria-controls=\"code_0\" aria-selected=\"true\">\r\n                                PHP                            <\/button>\r\n                        <\/li>\r\n\r\n                    \r\n                            \r\n        <\/ul>\r\n        <div class=\"code-snippet__tab-content tab-content overflow-hidden\">\r\n\r\n                            \r\n                    <div class=\"tab-pane show active\" id=\"code_0\" role=\"tabpanel\" aria-labelledby=\"code_0\">\r\n                        <pre class=\"w-100 h-100 m-0 line-numbers language-PHP\">\r\n                            <code class=\"language-PHP\">\r\n\r\n                                async function sendOrderConfirmationEmail(order) {rn  try {rnrn    let emailHtml = emailTemplate(order)rnrn    \/\/ Send email via Mailgunrn    const response = await mg.messages.create(MAILGUN_DOMAIN, {rn      from: `Your Store &lt;orders@${MAILGUN_DOMAIN}&gt;`,rn      to: order.customer.email,rn      subject: `Order Confirmation #${order.id}`,rn      html: emailHtml,rn      &#039;o:tag&#039;: [&#039;order-confirmation&#039;],rn      &#039;o:tracking&#039;: truern    });rnrn    console.log(&#039;Email sent successfully:&#039;, response);rn    return response;rnrn  } catch (error) {rn    console.error(&#039;Error sending confirmation email:&#039;, error);rn    throw error;rn  }rn}\r\n                            <\/code>\r\n                        <\/pre>\r\n                    <\/div>\r\n                                    <\/div>\r\n    <\/div>\r\n\n\n\n<p>Esta funci\u00f3n toma un objeto de pedido, construye el contenido del email y lo env\u00eda utilizando la API de Mailgun. Las opciones <code>o:tag<\/code> y <code>o:tracking<\/code> te permiten seguir la entrega y la interacci\u00f3n del email.<\/p>\n\n\n\n<p>Ahora, probemos la implementaci\u00f3n con un simple objeto de pedido para ver si funciona:<\/p>\n\n\n    <div data-content-type=\"longform\" class=\"code-snippet longform-spacings rounded-lg overflow-hidden shadow \" data-count=\"1\">\r\n        <ul class=\"nav nav-buttons code-snippet__tabs longform-except position-relative d-flex gap-2 flex-wrap p-3\" role=\"tablist\">\r\n\r\n                            \r\n                    \r\n                        <li class=\"nav-item\" role=\"presentation\">\r\n                            <button class=\"nav-link active\" data-bs-toggle=\"tab\" data-bs-target=\"#code_0\" type=\"button\" role=\"tab\" aria-controls=\"code_0\" aria-selected=\"true\">\r\n                                PHP                            <\/button>\r\n                        <\/li>\r\n\r\n                    \r\n                            \r\n        <\/ul>\r\n        <div class=\"code-snippet__tab-content tab-content overflow-hidden\">\r\n\r\n                            \r\n                    <div class=\"tab-pane show active\" id=\"code_0\" role=\"tabpanel\" aria-labelledby=\"code_0\">\r\n                        <pre class=\"w-100 h-100 m-0 line-numbers language-PHP\">\r\n                            <code class=\"language-PHP\">\r\n\r\n                                const testOrder = {rn  id: &quot;TEST123&quot;,rn  customer: {rn    name: &quot;Test User&quot;,rn    email: &quot;your-verified-email@example.com&quot; \/\/ Use one of your verified emails for testingrn  },rn  items: [rn    { name: &quot;Test Product&quot;, quantity: 1, price: 29.99 }rn  ],rn  subtotal: 29.99,rn  tax: 2.99,rn  total: 32.98,rn  shipping: {rn    address: &quot;123 Test Street&quot;,rn    city: &quot;Test City&quot;,rn    state: &quot;TS&quot;,rn    zipCode: &quot;12345&quot;rn  },rn  payment: {rn    method: &quot;Credit Card&quot;,rn    last4: &quot;4242&quot;rn  },rn  createdAt: new Date()rn};rnrnsendOrderConfirmationEmail(testOrder)rn  .then(response =&gt; {rn    console.log(&#039;Test email sent successfully!&#039;);rn    console.log(&#039;Message ID:&#039;, response.id);rn    console.log(&#039;Message status:&#039;, response.status);rn  })rn  .catch(error =&gt; {rn    console.error(&#039;Failed to send test email:&#039;, error.message);rn  });\r\n                            <\/code>\r\n                        <\/pre>\r\n                    <\/div>\r\n                                    <\/div>\r\n    <\/div>\r\n\n\n\n<p>Ejecuta este c\u00f3digo con node <code>.\/src\/server.js<\/code> y revisa tu bandeja de entrada (recuerda usar un email verificado para el valor <code>testOrder.customer.email <\/code> si est\u00e1s usando el dominio sandbox de Mailgun). Deber\u00edas recibir un email de confirmaci\u00f3n de pedido b\u00e1sico con los datos de prueba:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" class=\"wp-image-4021\" width=\"1742\" height=\"1392\" src=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/6__3_.png\" alt=\"Order Confirmation Image\" srcset=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/6__3_.png 1742w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/6__3_-1024x818.png 1024w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/6__3_-768x614.png 768w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/6__3_-1536x1227.png 1536w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/6__3_-300x240.png 300w\" sizes=\"(max-width: 1742px) 100vw, 1742px\" \/><\/figure>\n\n\n\n<p>En esta configuraci\u00f3n, cualquier error que ocurra se traslada al que realiza la llamada, y el m\u00e9todo <code>.catch <\/code> lo registra en la salida est\u00e1ndar. Este enfoque te permite identificar y solucionar r\u00e1pidamente cualquier problema que pueda ocurrir durante el proceso de env\u00edo de emails.<\/p>\n\n\n\n<p>En la siguiente secci\u00f3n, conectar\u00e1s esto a tu frontend para poder enviar datos de pedidos reales desde los pagos de los clientes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Integraci\u00f3n con eventos de aplicaciones<\/h2>\n\n\n\n<p>Para asegurarte de que el flujo de trabajo de emails se desencadene autom\u00e1ticamente cuando se confirma un pedido, necesitas configurar un <a href=\"https:\/\/nodejs.org\/api\/events.html\" target=\"_tabs\" rel=\"noopener noreferrer\">agente de escucha de eventos<\/a> o <a href=\"https:\/\/expressjs.com\/en\/guide\/routing.html\" target=\"_tabs\" rel=\"noopener noreferrer\">ruta<\/a> en tu aplicaci\u00f3n.<\/p>\n\n\n\n<p>Aqu\u00ed, configurar\u00e1s una aplicaci\u00f3n de Express.js y definir\u00e1s una ruta que maneje las confirmaciones de pedidos mientras llama a la funci\u00f3n <code>sendOrderConfirmationEmail<\/code>:<\/p>\n\n\n    <div data-content-type=\"longform\" class=\"code-snippet longform-spacings rounded-lg overflow-hidden shadow \" data-count=\"1\">\r\n        <ul class=\"nav nav-buttons code-snippet__tabs longform-except position-relative d-flex gap-2 flex-wrap p-3\" role=\"tablist\">\r\n\r\n                            \r\n                    \r\n                        <li class=\"nav-item\" role=\"presentation\">\r\n                            <button class=\"nav-link active\" data-bs-toggle=\"tab\" data-bs-target=\"#code_0\" type=\"button\" role=\"tab\" aria-controls=\"code_0\" aria-selected=\"true\">\r\n                                PHP                            <\/button>\r\n                        <\/li>\r\n\r\n                    \r\n                            \r\n        <\/ul>\r\n        <div class=\"code-snippet__tab-content tab-content overflow-hidden\">\r\n\r\n                            \r\n                    <div class=\"tab-pane show active\" id=\"code_0\" role=\"tabpanel\" aria-labelledby=\"code_0\">\r\n                        <pre class=\"w-100 h-100 m-0 line-numbers language-PHP\">\r\n                            <code class=\"language-PHP\">\r\n\r\n                                const express = require(&#039;express&#039;);rnconst cors = require(&#039;cors&#039;);rn...rnrn\/\/ Load environment variablesrnrequire(&#039;dotenv&#039;).config();rnrn\/\/ Initialize Expressrnconst app = express();rnconst PORT = process.env.PORT || 3000;rnrn\/\/ Middlewarernapp.use(cors());rnapp.use(express.json());rnrnconst orders = [];rnrnapp.post(&#039;\/api\/orders&#039;, async (req, res) =&gt; {rn  try {rn    \/\/ Validate required fieldsrn    if (!req.body.items || !req.body.customer || !req.body.customer.email) {rn      return res.status(400).json({ rn        success: false, rn        error: &#039;Missing required order information&#039; rn      });rn    }rnrn    \/\/ Generate order IDrn    const orderId = Date.now().toString(36) + Math.random().toString(36).substr(2, 5).toUpperCase();rnrn    \/\/ Create order objectrn    const order = {rn      id: orderId,rn      ...req.body,rn      status: &#039;confirmed&#039;,rn      createdAt: new Date()rn    };rnrn    \/\/ Save order (to database in a real app)rn    orders.push(order);rnrn    \/\/ Send confirmation emailrn    await sendOrderConfirmationEmail(order);rnrn    \/\/ Return success responsern    res.status(201).json({rn      success: true,rn      order: {rn        id: order.id,rn        status: order.status,rn        createdAt: order.createdAtrn      },rn      message: &#039;Order created successfully and confirmation email sent.&#039;rn    });rnrn  } catch (error) {rn    console.error(&#039;Error processing order:&#039;, error);rn    res.status(500).json({rn      success: false,rn      error: &#039;Failed to process order&#039;rn    });rn  }rn});\r\n                            <\/code>\r\n                        <\/pre>\r\n                    <\/div>\r\n                                    <\/div>\r\n    <\/div>\r\n\n\n\n<p>La ruta <code>\/api\/orders<\/code> maneja las solicitudes de pedidos entrantes, crea un objeto de pedido (<code>order<\/code>) y env\u00eda un email de confirmaci\u00f3n utilizando la funci\u00f3n <code>sendOrderConfirmationEmail<\/code>. El resto de la ruta incluye una sencilla l\u00f3gica de informes de errores, pero en producci\u00f3n, es posible que desees implementar un mecanismo de reintento o un manejador de errores m\u00e1s robusto.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Probar el flujo de trabajo<\/h2>\n\n\n\n<p>Para probar la configuraci\u00f3n hasta el momento, necesitas modificar el archivo <code>\/ui\/index.html<\/code>. Primero, encuentra la l\u00ednea de c\u00f3digo donde se define el objeto <code>orderData<\/code> y actualiza la propiedad del email del cliente (<code>orderData.customer.email<\/code>) para usar uno de tus emails verificados. Tambi\u00e9n necesitas actualizar la constante <code>api<\/code> para que apunte a la URL de tu servidor.<\/p>\n\n\n\n<p>A continuaci\u00f3n, abre el archivo <code>\/ui\/index.html <\/code> en un navegador y desencadena el proceso de pago seleccionando art\u00edculos para su compra y haciendo clic en el bot\u00f3n <b>Checkout Selected Items<\/b>. Esto deber\u00eda abrir un di\u00e1logo de confirmaci\u00f3n donde puedes hacer clic en <b>Confirm Purchase<\/b> para completar el proceso de pago:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" class=\"wp-image-5031\" width=\"1734\" height=\"1046\" src=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/7__2_.png\" alt=\"Confirm Order Image\" srcset=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/7__2_.png 1734w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/7__2_-300x181.png 300w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/7__2_-768x463.png 768w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/7__2_-1024x618.png 1024w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/7__2_-1536x927.png 1536w\" sizes=\"(max-width: 1734px) 100vw, 1734px\" \/><\/figure>\n\n\n\n<p>Revisa tu buz\u00f3n de entrada y verifica que el email se haya enviado y mostrado correctamente con el contenido din\u00e1mico. Si usaste el dominio sandbox, es posible que necesites revisar tu carpeta de spam:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" class=\"wp-image-5032\" width=\"1742\" height=\"1470\" src=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/8__2_.png\" alt=\"Order Confirmation Email Image\" srcset=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/8__2_.png 1742w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/8__2_-300x253.png 300w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/8__2_-768x648.png 768w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/8__2_-1024x864.png 1024w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/8__2_-1536x1296.png 1536w\" sizes=\"(max-width: 1742px) 100vw, 1742px\" \/><\/figure>\n\n\n\n<p>Recuerda probar c\u00f3mo tu aplicaci\u00f3n maneja los errores, como direcciones de correo electr\u00f3nico inv\u00e1lidas o ca\u00eddas de la API, usando intencionadamente valores incorrectos y verificando que tu manejo de errores funciona seg\u00fan lo esperado.<\/p>\n\n\n\n<p>Todo el c\u00f3digo utilizado en este tutorial est\u00e1 disponible en <a href=\"https:\/\/github.com\/Ikeh-Akinyemi\/draftdev-mailgunner\" target=\"_tabs\" rel=\"noopener noreferrer\">GitHub<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Seguimiento y gesti\u00f3n de emails<\/h2>\n\n\n\n<p>Mailgun proporciona m\u00e9tricas detalladas y funcionalidades de seguimiento que te permiten monitorizar el rendimiento de tus emails transaccionales. Puedes seguir las tasas de entrega y las tasas de aperturas adem\u00e1s de gestionar rebotes o fallos directamente desde el panel de control de Mailgun.<\/p>\n\n\n\n<p>Para acceder a los logs de cada email enviado, navega a la secci\u00f3n <b>Env\u00edos &gt; Panel de informes &gt; Logs<\/b> en tu cuenta de Mailgun. Aqu\u00ed, puedes ver la marca de tiempo y el estado de cada email enviado, incluyendo si fue entregado, abierto o rechazado:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" class=\"wp-image-5033\" width=\"1742\" height=\"1050\" src=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/9__2_.png\" alt=\"Email logs image\" srcset=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/9__2_.png 1742w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/9__2_-300x181.png 300w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/9__2_-768x463.png 768w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/9__2_-1024x617.png 1024w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/9__2_-1536x926.png 1536w\" sizes=\"(max-width: 1742px) 100vw, 1742px\" \/><\/figure>\n\n\n\n<p>Puedes hacer clic en cualquier entrada de log para ver todos sus detalles, como <code>geolocation<\/code> para emails abiertos, <code>delivery-status<\/code> para emails entregados, y otros:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" class=\"wp-image-5034\" width=\"1760\" height=\"1056\" src=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/10__1_.png\" alt=\"Email Log Details Image\" srcset=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/10__1_.png 1760w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/10__1_-300x180.png 300w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/10__1_-768x461.png 768w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/10__1_-1024x614.png 1024w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/10__1_-1536x922.png 1536w\" sizes=\"(max-width: 1760px) 100vw, 1760px\" \/><\/figure>\n\n\n\n<p>Tambi\u00e9n puedes ir a <b>Env\u00edos &gt; Panel de informes &gt; M\u00e9tricas<\/b> para ver un desglose gr\u00e1fico de m\u00e9tricas clave de email, incluido el recuento de enviados, entregados, fallidos y abiertos:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" class=\"wp-image-5035\" width=\"1746\" height=\"1058\" src=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/11__1_.png\" alt=\"Key Email Metrics Image\" srcset=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/11__1_.png 1746w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/11__1_-300x182.png 300w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/11__1_-768x465.png 768w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/11__1_-1024x620.png 1024w, https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/11__1_-1536x931.png 1536w\" sizes=\"(max-width: 1746px) 100vw, 1746px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">En resumen<\/h2>\n\n\n\n<p>Acabas de crear un flujo de trabajo de confirmaci\u00f3n de pedido operativo con la API de Mailgun. <\/p>\n\n\n\n<p>Los emails transaccionales como estos mantienen a los clientes informados justo despu\u00e9s del pago, reduciendo las incidencias de asistencia y mejorando la confianza sin gastos generales adicionales. Las confirmaciones de pedidos no son los \u00fanicos fl<a href=\"https:\/\/www.mailgun.com\/blog\/email\/transactional-email-unsung-hero\/\" target=\"_tabs\" rel=\"noopener noreferrer\">ujos de trabajo que importan a los consumidores.<\/a> Echa un vistazo a nuestro tutorial sobre <a href=\"https:\/\/www.mailgun.com\/blog\/dev-life\/how-to-build-transactional-password-reset-email-workflows\/\" target=\"_tabs\" rel=\"noopener noreferrer\">restablecer contrase\u00f1as<\/a> para seguir optimizando tus emails transaccionales. <\/p>\n\n\n\r\n    <aside data-content-type=\"longform\"  class=\"banner-block longform-spacings rounded-lg shadow-lg px-5 py-6 px-md-6 py-md-7 p-lg-7 bg-light\" data-theme=\"dark\" aria-labelledby=\"banner-block-block_b6558745ef1e10de355e0cedf5219d10\">\r\n                    <p class=\"text-uppercase section-caption text-body-color\">\r\n                Reg\u00edstrate            <\/p>\r\n                            <p class=\"h4 text-accent fw-bold\" id=\"banner-block-block_b6558745ef1e10de355e0cedf5219d10\">\r\n                Empezar es facil\u00edsimo. Y gratis.            <\/p>\r\n                            <div class=\"mb-0 text-body-color\">\r\n                                    <div class=\"content-body mb-0 text-body-color\">Descubre todo lo que puedes lograr con la mejor plataforma de entrega de emails del mundo.<\/div>\r\n                            <\/div>\r\n        \r\n        <div class=\"text-start mt-5\"><a href=\"https:\/\/signup.mailgun.com\/new\/signup\"  class=\"btn btn-secondary\" >Get started<\/a><\/div>\r\n    <\/aside>\r\n\r\n","protected":false},"excerpt":{"rendered":"<p>A diferencia de los emails de marketing, los emails transaccionales (como las confirmaciones de pedidos, las notificaciones de env\u00edo y los restablecimientos de la contrase\u00f1a) son desencadenados por acciones espec\u00edficas de los usuarios y proporcionan actualizaciones en tiempo real sobre sus interacciones con tu plataforma. Ayudan a generar confianza, reducen las preguntas de asistencia y [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":3952,"menu_order":0,"template":"","meta":{"_acf_changed":true,"footnotes":""},"blog_category":[19],"class_list":["post-13390","blog","type-blog","status-publish","has-post-thumbnail","hentry","blog_category-dev-life"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Build transactional order confirmation workflows with Mailgun - Transactional Email API Service For Developers | Mailgun<\/title>\n<meta name=\"description\" content=\"Learn how to create transactional order confirmation email workflows using Mailgun&#039;s API. Follow along in our developer tutorial for our best practices.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.mailgun.com\/es\/blog\/dev-life\/como-crear-flujos-de-trabajo-de-emails-transaccionales-de-confirmacion-de-pedidos\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build transactional order confirmation workflows with Mailgun - Transactional Email API Service For Developers | Mailgun\" \/>\n<meta property=\"og:description\" content=\"Learn how to create transactional order confirmation email workflows using Mailgun&#039;s API. Follow along in our developer tutorial for our best practices.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.mailgun.com\/es\/blog\/dev-life\/como-crear-flujos-de-trabajo-de-emails-transaccionales-de-confirmacion-de-pedidos\/\" \/>\n<meta property=\"og:site_name\" content=\"Transactional Email API Service For Developers | Mailgun\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-30T04:27:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/MG-Blog-Dev-Life.png\" \/>\n\t<meta property=\"og:image:width\" content=\"720\" \/>\n\t<meta property=\"og:image:height\" content=\"448\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"9 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/blog\\\/dev-life\\\/como-crear-flujos-de-trabajo-de-emails-transaccionales-de-confirmacion-de-pedidos\\\/\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/blog\\\/dev-life\\\/como-crear-flujos-de-trabajo-de-emails-transaccionales-de-confirmacion-de-pedidos\\\/\",\"name\":\"Build transactional order confirmation workflows with Mailgun - Transactional Email API Service For Developers | Mailgun\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/blog\\\/dev-life\\\/como-crear-flujos-de-trabajo-de-emails-transaccionales-de-confirmacion-de-pedidos\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/blog\\\/dev-life\\\/como-crear-flujos-de-trabajo-de-emails-transaccionales-de-confirmacion-de-pedidos\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.mailgun.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/MG-Blog-Dev-Life.png\",\"datePublished\":\"2025-05-15T00:00:00+00:00\",\"dateModified\":\"2026-04-30T04:27:53+00:00\",\"description\":\"Learn how to create transactional order confirmation email workflows using Mailgun's API. Follow along in our developer tutorial for our best practices.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/blog\\\/dev-life\\\/como-crear-flujos-de-trabajo-de-emails-transaccionales-de-confirmacion-de-pedidos\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.mailgun.com\\\/es\\\/blog\\\/dev-life\\\/como-crear-flujos-de-trabajo-de-emails-transaccionales-de-confirmacion-de-pedidos\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/blog\\\/dev-life\\\/como-crear-flujos-de-trabajo-de-emails-transaccionales-de-confirmacion-de-pedidos\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/MG-Blog-Dev-Life.png\",\"contentUrl\":\"https:\\\/\\\/www.mailgun.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/MG-Blog-Dev-Life.png\",\"width\":720,\"height\":448},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/blog\\\/dev-life\\\/como-crear-flujos-de-trabajo-de-emails-transaccionales-de-confirmacion-de-pedidos\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Creaci\u00f3n de flujos de trabajo de emails transaccionales para confirmaciones de pedidos con la API de Mailgun\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/#website\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/\",\"name\":\"Transactional Email API Service For Developers | Mailgun\",\"description\":\"Powerful Transactional Email APIs that enable you to send, receive, and track emails, built with developers in mind. Learn more today!\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/#organization\",\"name\":\"Transactional Email API Service For Developers | Mailgun\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.mailgun.com\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/cropped-android-chrome-512x512-1.png\",\"contentUrl\":\"https:\\\/\\\/www.mailgun.com\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/cropped-android-chrome-512x512-1.png\",\"width\":512,\"height\":512,\"caption\":\"Transactional Email API Service For Developers | Mailgun\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mailgun.com\\\/es\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Build transactional order confirmation workflows with Mailgun - Transactional Email API Service For Developers | Mailgun","description":"Learn how to create transactional order confirmation email workflows using Mailgun's API. Follow along in our developer tutorial for our best practices.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.mailgun.com\/es\/blog\/dev-life\/como-crear-flujos-de-trabajo-de-emails-transaccionales-de-confirmacion-de-pedidos\/","og_locale":"es_ES","og_type":"article","og_title":"Build transactional order confirmation workflows with Mailgun - Transactional Email API Service For Developers | Mailgun","og_description":"Learn how to create transactional order confirmation email workflows using Mailgun's API. Follow along in our developer tutorial for our best practices.","og_url":"https:\/\/www.mailgun.com\/es\/blog\/dev-life\/como-crear-flujos-de-trabajo-de-emails-transaccionales-de-confirmacion-de-pedidos\/","og_site_name":"Transactional Email API Service For Developers | Mailgun","article_modified_time":"2026-04-30T04:27:53+00:00","og_image":[{"width":720,"height":448,"url":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/MG-Blog-Dev-Life.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"9 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.mailgun.com\/es\/blog\/dev-life\/como-crear-flujos-de-trabajo-de-emails-transaccionales-de-confirmacion-de-pedidos\/","url":"https:\/\/www.mailgun.com\/es\/blog\/dev-life\/como-crear-flujos-de-trabajo-de-emails-transaccionales-de-confirmacion-de-pedidos\/","name":"Build transactional order confirmation workflows with Mailgun - Transactional Email API Service For Developers | Mailgun","isPartOf":{"@id":"https:\/\/www.mailgun.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.mailgun.com\/es\/blog\/dev-life\/como-crear-flujos-de-trabajo-de-emails-transaccionales-de-confirmacion-de-pedidos\/#primaryimage"},"image":{"@id":"https:\/\/www.mailgun.com\/es\/blog\/dev-life\/como-crear-flujos-de-trabajo-de-emails-transaccionales-de-confirmacion-de-pedidos\/#primaryimage"},"thumbnailUrl":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/MG-Blog-Dev-Life.png","datePublished":"2025-05-15T00:00:00+00:00","dateModified":"2026-04-30T04:27:53+00:00","description":"Learn how to create transactional order confirmation email workflows using Mailgun's API. Follow along in our developer tutorial for our best practices.","breadcrumb":{"@id":"https:\/\/www.mailgun.com\/es\/blog\/dev-life\/como-crear-flujos-de-trabajo-de-emails-transaccionales-de-confirmacion-de-pedidos\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.mailgun.com\/es\/blog\/dev-life\/como-crear-flujos-de-trabajo-de-emails-transaccionales-de-confirmacion-de-pedidos\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.mailgun.com\/es\/blog\/dev-life\/como-crear-flujos-de-trabajo-de-emails-transaccionales-de-confirmacion-de-pedidos\/#primaryimage","url":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/MG-Blog-Dev-Life.png","contentUrl":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/07\/MG-Blog-Dev-Life.png","width":720,"height":448},{"@type":"BreadcrumbList","@id":"https:\/\/www.mailgun.com\/es\/blog\/dev-life\/como-crear-flujos-de-trabajo-de-emails-transaccionales-de-confirmacion-de-pedidos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.mailgun.com\/es\/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https:\/\/www.mailgun.com\/es\/blog\/"},{"@type":"ListItem","position":3,"name":"Creaci\u00f3n de flujos de trabajo de emails transaccionales para confirmaciones de pedidos con la API de Mailgun"}]},{"@type":"WebSite","@id":"https:\/\/www.mailgun.com\/es\/#website","url":"https:\/\/www.mailgun.com\/es\/","name":"Transactional Email API Service For Developers | Mailgun","description":"Powerful Transactional Email APIs that enable you to send, receive, and track emails, built with developers in mind. Learn more today!","publisher":{"@id":"https:\/\/www.mailgun.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.mailgun.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.mailgun.com\/es\/#organization","name":"Transactional Email API Service For Developers | Mailgun","url":"https:\/\/www.mailgun.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.mailgun.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/06\/cropped-android-chrome-512x512-1.png","contentUrl":"https:\/\/www.mailgun.com\/wp-content\/uploads\/2025\/06\/cropped-android-chrome-512x512-1.png","width":512,"height":512,"caption":"Transactional Email API Service For Developers | Mailgun"},"image":{"@id":"https:\/\/www.mailgun.com\/es\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/blog\/13390","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/users\/7"}],"version-history":[{"count":0,"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/blog\/13390\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/media\/3952"}],"wp:attachment":[{"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/media?parent=13390"}],"wp:term":[{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.mailgun.com\/es\/wp-json\/wp\/v2\/blog_category?post=13390"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}