¿Cómo integrar el botón de pagos Bold personalizado en Wordpress?

En esta guía, te brindaremos instrucciones detalladas sobre cómo implementar un botón de pagos personalizado en tu sitio web de WordPress usando nuestro plugin.

Sigue estos pasos para lograr una integración exitosa.

Pasos para la implementación

1. Instalación del plugin Bold

Para más información puedes consultar aquí nuestra guía de instalación.

2. Creación de un tema hijo

Para preservar tus modificaciones en el tema sin perderlas durante las actualizaciones, es recomendable crear un tema hijo.

Opción 1: Si no tienes acceso al servidor, puedes usar el plugin Child Theme Configurator (opens in a new tab):

• Instala y activa el plugin "Child Theme Configurator" desde el repositorio de plugins de WordPress.

• Sigue las instrucciones del plugin para crear un tema hijo de tu tema actual, aquí (opens in a new tab) tienes una documentación como guía.

• Activa el tema hijo que acabas de crear.

Opción 2: Creación Manual del tema hijo. Si tienes acceso al servidor, ya sea mediante FTP o el gestor de archivos de tu hosting, puedes crear el tema manualmente, guía de referencia (opens in a new tab). sigue estos pasos:

• Accede al directorio de temas de WordPress (/wp-content/themes/) usando un cliente FTP o el administrador de archivos de tu panel de control.

• Crea un nuevo directorio para el tema hijo. Por ejemplo, si el tema padre se llama "TemaPrincipal", el tema hijo podría llamarse "TemaPrincipal-Hijo".

• Crea un archivo style.css dentro del directorio del tema hijo y agrega la información del tema hijo.

• Crea un archivo functions.php dentro del directorio del tema hijo y agrega cualquier función personalizada que quieras incluir.

3. Localización y Duplicación de la Plantilla PHP

Antes de hacer cambios en la plantilla, es fundamental localizarla y duplicarla en el tema hijo para evitar alteraciones en el tema principal.

• Accede al panel de administración de WordPress.

• Navega a "Apariencia" y selecciona "Editor de Temas".

• Busca la plantilla PHP donde deseas insertar el botón de pago personalizado.

• Haz una copia de seguridad de la plantilla seleccionada.

• Si no tienes acceso al Editor de Temas, puedes utilizar el plugin "Theme Editor (opens in a new tab)" para llevar a cabo esta tarea.

4. Inserción del código en la plantilla del tema hijo

Ahora, insertaremos el código necesario en la plantilla del tema hijo para habilitar el botón de pago personalizado.

• Abre la plantilla PHP duplicada en el Editor de temas o usando el plugin correspondiente.

• Idealmente, deberíamos ubicar el elemento que queremos "convertir" en el botón de pagos y pegar el bloque de código justo por debajo del mismo. En caso de no ser posible, también podría ubicarse antes del cierre del cuerpo (</body>). Localiza un bloque PHP en la plantilla del tema hijo para realizar esta inserción.

• Copia y pega el siguiente código dentro de ese bloque PHP, si el bloque elegido ya es PHP no hace falta poner las etiquetas de apertura y cierre de PHP en el código:

<?php
// Modificar solo estas variables
$secret_key = "tu_llave_secreta";
$api_key = "tu_llave_de_identidad";
$redirection_url = "url_de_redirección";
$target_css_selector = "selector_css"; // ver la sección de recursos adicionales
 
 
$amount = "0"; // Esto es para monto abierto, si desea un monto fijo se debe poner el valor directamente
$currency = "COP";
$order_id = time();
$integrity_signature = hash("sha256", "$order_id$amount$currency$secret_key");
echo "
    <script>
        const checkout = new BoldCheckout({
            currency: '{$currency}',
            apiKey: '{$api_key}',
            amount: '{$amount}',
            orderId: '{$order_id}',
            redirectionUrl: '{$redirection_url}',
            integritySignature: '{$integrity_signature}',
        });
        const targetElements = document.querySelectorAll('{$target_css_selector}');
        for (let targetElement of targetElements) {
          targetElement.addEventListener('click', () => {
            checkout.open();
          });
        }
    </script>
";
?>

Asegúrate de modificar las variables según las indicaciones proporcionadas en los comentarios del código.

Recursos adicionales

Documentación (opens in a new tab) sobre Selectores CSS: Si necesitas más información sobre cómo seleccionar elementos en CSS.

Conclusión

¡Felicitaciones! Completaste la implementación del botón de pagos personalizado en tu sitio web de WordPress. Si sigues teniendo dudas o necesitas asistencia adicional, no dudes en ponerte en contacto con nuestro equipo de soporte técnico a través de soporte.online@bold.co.

¡Gracias por elegir nuestro servicio y esperamos que esta guía te haya sido útil!