Cómo configurar métodos de cobro en un sitio web: tutorial

独立站设置收款

Sitio independiente de comercio electrónico transfronterizo es una plataforma importante para la venta de productos. El objetivo final de un sitio independiente es lograr la conversión de ventas de productos. Para lograr este objetivo, es necesario integrar una función de pago en el sitio independiente, lo que permitirá que los usuarios del sitio realicen pagos por los productos en su carrito de compras al seleccionarlos en la página principal del sitio. Sin embargo, para aquellos lectores que están creando su propio sitio independiente por primera vez o que están en el proceso de planificación, puede haber dudas sobre cómo integrar la función de pago en el sitio independiente. Estas dudas, si no se resuelven claramente, pueden generar incertidumbres sobre cómo configurar y agregar la función de pago al sitio, lo que podría retrasar la planificación de la creación del sitio independiente. En realidad, estas dudas son causadas por la falta de experiencia en la creación de sitios. Desde un punto de vista técnico, no es difícil de lograr, y el propósito del artículo "¿Cómo configurar el pago en un sitio independiente? Guía para integrar la función de pago en el sitio independiente" escrito por Logic Digital Technology es aclarar estas dudas y guiar paso a paso sobre cómo integrar el sistema de pago en el sitio independiente para habilitar la función de pago en la venta de productos.

Pero antes de comenzar con los siguientes pasos, las empresas de comercio electrónico transfronterizo deben solicitar primero una cuenta empresarial de PayPal y una cuenta con un proveedor de servicios de procesamiento de tarjetas de crédito globales, además de contar con soporte técnico. Se necesita tener la información de la cuenta empresarial de PayPal y la clave API del proveedor de servicios de procesamiento de tarjetas de crédito globales para integrar las funciones de estos proveedores de pagos transfronterizos en el sitio independiente, ya sea mediante un plugin o escribiendo código. Si los lectores aún no han solicitado la cuenta empresarial de PayPal ni elegido un proveedor de servicios de procesamiento de tarjetas de crédito globales, pueden consultar los artículos previos publicados por Cómo registrar una cuenta empresarial de PayPal / Cómo configurar una cuenta empresarial de PayPal y Canales de cobro internacionales con tarjeta de crédito para sitios independientes, siguiendo los pasos indicados en esos tutoriales para obtener las cuentas necesarias.

El artículo “¿Cómo configurar el sistema de pagos en un sitio independiente? Guía para integrar la función de pagos en un sitio independiente” tiene como objetivo ayudar a los lectores que están creando su primer sitio, para que puedan aprender a integrar la función de pagos para la venta de productos en el sitio independiente que están a punto de crear o ya han creado, ya sea en WordPress o en un sitio independiente de Shopify, asociando la cuenta de PayPal y el canal de pagos con tarjeta de crédito. El artículo “¿Cómo configurar el sistema de pagos en un sitio independiente? Guía para integrar la función de pagos en un sitio independiente” se dividirá en cuatro partes, las cuales ofrecerán una demostración detallada de los pasos de configuración. Además de leer todo el contenido en orden, los lectores también pueden leer de forma selectiva según el sistema de construcción del sitio que estén utilizando y seguir cada paso de operación correspondiente para llevar a cabo las acciones necesarias.

Uno、Integrar pagos con PayPal en WooCommerce

WooCommerce接入PayPal

WooCommerce es un complemento del ecosistema de comercio electrónico del sistema de construcción de sitios WordPress CMS. La configuración de la integración de WooCommerce con la cuenta empresarial de PayPal es la misma que la configuración de la integración de WordPress con la cuenta empresarial de PayPal. Después de instalar el complemento WooCommerce en el sitio de WordPress, para que aparezca el botón de pago de PayPal en la página del producto del sitio independiente y para que los usuarios puedan pagar utilizando PayPal, es necesario vincular la cuenta empresarial de PayPal con WooCommerce desde el panel de administración del sitio de WordPress. A continuación, se detallan los pasos específicos, y al seguirlos, se podrá completar con éxito la integración de WooCommerce con PayPal para los pagos.

Paso 1: Vaya a la página de configuración de pago del complemento WooCommerce

WooCommerce插件的付款设置页面

Según la ruta indicada en el cuadro rojo de la imagen superior (Panel de administración de WordPress en la barra lateral izquierda - Complemento WooCommerce - Configuración - Pagos), ingrese a la página de configuración de pagos del complemento WooCommerce y continúe con la operación según las instrucciones del segundo paso a continuación.

Segundo paso: Habilitar el pago por PayPal y completar la configuración de PayPal

Como se muestra en el cuadro rojo de la imagen siguiente, active el botón de habilitar PayPal.

WooCommerce启用PayPal收款

Una vez que se active el botón de PayPal, la página será redirigida a la interfaz de configuración de PayPal como se muestra en la imagen siguiente. Desplácese hacia abajo hasta que vea la posición del botón "Activate PayPal" marcado en el cuadro rojo de la imagen, haga clic en el botón para proceder con la activación de PayPal.

WooCommerce的PayPal设置

Después de hacer clic en el botón "Activate PayPal", aparecerá una ventana para asociar la cuenta de PayPal con WooCommerce, como se muestra en la imagen siguiente. En el campo de la ventana para la cuenta, ingrese la cuenta empresarial de PayPal del sitio independiente. En la sección "País o región", seleccione el país de registro de la cuenta empresarial de PayPal. Asegúrese de elegir correctamente el país en el que se abrió la cuenta, de lo contrario, aparecerá un error y no podrá continuar con la activación de PayPal. Después de completar la información correctamente, haga clic en el botón "Siguiente" para continuar con la operación y acceder a la página de inicio de sesión de la cuenta y contraseña de PayPal.

WooCommerce关联PayPal信息

Una vez que haya ingresado la cuenta y la contraseña del PayPal empresarial, haga clic en el botón "Iniciar sesión" para continuar con la activación del pago de PayPal.

WooCommerce关联PayPal账号

Después de completar los pasos anteriores, la ventana emergente llegará al último paso para asociar PayPal con WooCommerce. Como se muestra en la imagen siguiente, haga clic en el botón "Aceptar y conectar" para confirmar la conexión entre WooCommerce y la cuenta de PayPal. Con esto, habrá completado la configuración de WooCommerce con PayPal, y el sitio independiente de WordPress habrá activado con éxito PayPal.

WooCommerce连接PayPal
WooCommerce完成PayPal关联

dos、Integrar pagos con tarjeta de crédito en WooCommerce

Tomaremos como ejemplo el proveedor de servicios de procesamiento de pagos con tarjeta de crédito global, Oceanpayment, para realizar una demostración de la integración de pagos con tarjeta de crédito. El método de instalación de otros proveedores de servicios de pagos internacionales es similar en principio, y la forma de operación también es casi la misma. Además, los técnicos de los proveedores de servicios ofrecerán orientación de instalación o documentación técnica, lo que permite que los técnicos con experiencia en operaciones puedan completar la instalación solo con la guía del documento técnico.

Integrar pagos con tarjeta de crédito en WooCommerce

Primer paso: Agregar el logo de pago con tarjeta de crédito en el pie de página

信用卡收单添加页脚支付卡logo

Agregar el logo de tarjeta de crédito en el pie de página del sitio independiente involucra la edición del pie de página, lo cual puede ser realizado por la empresa de desarrollo web o los técnicos del proveedor de servicios de pagos con tarjeta de crédito.

Segundo paso: Modificar la información de la página y agregar páginas de políticas según los requisitos de Oceanpayment

信用卡支付修改页面和增加政策页面

Oceanpayment tiene varios detalles que deben modificarse en la información de las páginas del sitio independiente. Las páginas de políticas, que incluyen la política de devoluciones, los métodos de pago, los términos y condiciones, los derechos de propiedad intelectual, etc., deben ser creadas de acuerdo con sus especificaciones. Los técnicos de Oceanpayment proporcionarán los documentos relevantes, y estas páginas deben ser creadas siguiendo las normas indicadas en dichos documentos.

Tercer paso: Instalar el complemento del proveedor de pagos con tarjeta de crédito

安装信用卡支付插件

Oceanpayment proporcionará el paquete de instalación del complemento o la dirección de descarga para el sitio de comercio electrónico internacional. Después de guardar o descargar el paquete de instalación del complemento, en el panel de administración de WordPress, siga la ruta mostrada en la imagen (barra lateral izquierda - Complementos - Agregar nuevo complemento), haga clic en el botón "Subir complemento" y luego haga clic en "Seleccionar archivo" para cargar el paquete de instalación del complemento de Oceanpayment. Finalmente, haga clic en "Instalar ahora" para instalar el complemento de Oceanpayment, y después de instalar el complemento, habilítelo en la lista de complementos según las indicaciones.

Cuarto paso: Activar el pago con tarjeta de crédito en el complemento WooCommerce y completar la configuración del pago con tarjeta de crédito

WooCommerce启用Oceanpayment

Una vez que el complemento de Oceanpayment esté instalado y habilitado, acceda a la página de configuración de pagos de WooCommerce siguiendo la ruta en el panel de administración de WordPress: Barra lateral izquierda - Complemento WooCommerce - Configuración - Pagos, como se muestra en la imagen. Ahora, además de PayPal, que ya ha sido habilitado y activado, aparecerá en la lista Oceanpayment. Haga clic en el botón de habilitar marcado en el cuadro rojo de la imagen y luego en el botón "Completar configuración" a la derecha para continuar con la activación del procesamiento de pagos con tarjeta de crédito de Oceanpayment.

Quinto paso: Ingresar la clave API del proveedor de pagos con tarjeta de crédito (Oceanpayment) para activar el procesamiento de pagos con tarjeta de crédito

激活Oceanpayment

La clave API es la clave de uso del complemento, y es una operación estándar para cualquier complemento de versión paga. Se debe ingresar la clave correspondiente para utilizar el complemento o desbloquear ciertas funciones. Para activar el complemento de Oceanpayment, hay dos claves que deben completarse: SecureCode y Public key. Estas claves serán proporcionadas por Oceanpayment, y solo debe copiar y pegar las claves obtenidas en los campos correspondientes. Con esto, la instalación de Oceanpayment como sistema de pago con tarjeta de crédito global en WooCommerce estará completa, y los usuarios podrán seleccionar los tipos de tarjeta de crédito compatibles con Oceanpayment para realizar los pagos en la página de pago del sitio independiente.

tres、Integración de PayPal en Shopify

Shopify接入PayPal

Shopify no requiere el uso de complementos de terceros para integrar PayPal. Como un programa SaaS de comercio electrónico transfronterizo, Shopify ya tiene integrada de manera predeterminada la función de recibir pagos a través de PayPal. Desde la sección de configuración del panel de control de Shopify, es posible asociar fácilmente una cuenta de PayPal. A continuación, se describen los pasos específicos para conectar una cuenta de PayPal en Shopify. Siguiendo cada paso, los lectores podrán configurar PayPal como su sistema de cobro en su tienda independiente. Una vez finalizada la integración, el botón de pago de PayPal aparecerá en la página de detalle del producto y en la página de pago, permitiendo a los usuarios pagar los productos adquiridos usando su cuenta de PayPal.

Primer paso: Acceder a la sección de configuración de pagos en el panel de administración de Shopify

Shopify关联激活PayPal

En el panel de control de Shopify, siga la ruta marcada en el cuadro rojo de la imagen (botón de configuración en la parte inferior de la barra lateral izquierda - Pagos) para ingresar a la sección de configuración de pagos. PayPal no requiere la instalación de ningún programa adicional, ya que está integrado de forma predeterminada en Shopify. Incluso en una nueva tienda Shopify, la función de cobro por PayPal ya está disponible. Solo es necesario activar PayPal. Haga clic en el botón "Activar PayPal" para continuar con el proceso de activación.

Segundo paso: Iniciar sesión en PayPal y completar la activación y asociación con Shopify

Shopify登陆PayPal账号

Después de hacer clic en el botón "Activar PayPal", se solicitará introducir la cuenta de PayPal que se desea asociar con Shopify y seleccionar el país correspondiente. Es muy importante seleccionar correctamente el país, ya que un error provocará que el proceso no pueda completarse. El campo "País o Región" se refiere al país desde el cual se solicitó originalmente la cuenta de PayPal. Por ejemplo, si la cuenta fue creada en el sitio web de PayPal China, no se debe seleccionar Estados Unidos, ya que la discrepancia causará un error de validación. Una vez ingresada correctamente la información, haga clic en el botón "Siguiente" para continuar hasta completar la activación de PayPal y la asociación con Shopify.

企业PayPal输入账号密码

Continuando con la operación, después de hacer clic en el botón "Siguiente", se redirigirá a la página de inicio de sesión de la cuenta de empresa PayPal como se muestra en la imagen anterior. Introduzca el correo electrónico y la contraseña de la cuenta de empresa PayPal, y luego haga clic en el botón "Iniciar sesión" para seguir adelante.

Shopify关联PayPal完成页面

Hasta este punto, como se muestra en la imagen, se habrá completado con éxito todo el proceso de activación de PayPal y la asociación de la cuenta PayPal en Shopify. Tal como muestra la imagen, en la configuración de pagos de Shopify, la forma de cobro mediante PayPal ya aparece en estado activo.

PayPal活跃状态

cuatro、Shopify integra el pago con tarjeta de crédito

Los sitios B2B de Shopify pueden omitir los canales de cobro por tarjeta de crédito, pero en sitios B2C, además de PayPal, es fundamental habilitar pagos con tarjeta de crédito para favorecer la conversión de ventas. Para la demostración de la integración de pagos con tarjeta de crédito en Shopify, utilizaremos nuevamente el servicio de Oceanpayment como ejemplo, igual que en la sección anterior sobre WooCommerce. En este caso, Logic Digital Technology no pretende hacer una recomendación explícita; simplemente, debido a la frecuente colaboración con Oceanpayment en proyectos de desarrollo web, se conocen en detalle todos los aspectos de su instalación. Por ello, se eligió Oceanpayment para esta demostración, con el fin de explicar claramente cada paso del proceso de integración de cobros por tarjeta de crédito. No obstante, el proceso de instalación de los servicios de cobro por tarjeta no debe ser el único criterio para seleccionar un proveedor. En general, las diferencias entre los complementos de servicios de cobro por tarjeta, tanto nacionales como internacionales, son mínimas. Aunque pueda haber barreras idiomáticas al elegir proveedores extranjeros, el proceso de instalación y uso de estos complementos requiere únicamente conocimientos básicos de mantenimiento técnico. Por lo tanto, la selección de un proveedor de servicios de cobro por tarjeta debe basarse en múltiples factores y datos de comparación. Los lectores interesados en profundizar en este tema pueden consultar el artículo publicado previamente por Logic Digital Technology: “Canales de cobro internacional de tarjetas de crédito para tiendas independientes”.

Shopify integra el pago con tarjeta de crédito

Primer paso: Añadir el logo de las tarjetas de crédito en el pie de página del sitio independiente

信用卡收单添加页脚支付卡logo

Descargue las imágenes de las organizaciones de tarjetas de pago proporcionadas por Oceanpayment a su ordenador y cárguelas en la sección de "Contenido" del panel de control de Shopify para almacenarlas. Luego, edite el archivo de código del tema, footer.liquid, para cargar la URL de las imágenes de las tarjetas de pago. De esta manera, el pie de página del sitio mostrará los logos de las tarjetas de crédito compatibles con Oceanpayment. Esta operación requiere ciertas habilidades de programación. Si la empresa de comercio electrónico no cuenta con estas habilidades, puede solicitar ayuda a su proveedor de servicios de desarrollo web o al equipo técnico de Oceanpayment.

La función de almacenamiento de archivos de contenido en Shopify es como se muestra en la imagen:

Shopify的内容储存功能

Utilice la etiqueta img para editar el archivo footer.liquid en Shopify y mostrar los logos de las tarjetas de crédito, como se muestra en la imagen:

Shopify编写footer.liquid文件代码

Segundo paso: Modificar los detalles del sitio web y las páginas de políticas según los requisitos de integración de Oceanpayment

信用卡支付修改页面和增加政策页面

Los requisitos de políticas de Oceanpayment no varían según el sistema de creación de sitios web. Al igual que en WooCommerce, las páginas de detalle y de políticas en la tienda independiente de Shopify deben ser modificadas o creadas siguiendo las normativas establecidas en los documentos proporcionados por Oceanpayment. El equipo de atención al cliente de Oceanpayment facilitará dichos documentos. Basta con seguir las instrucciones para completar las modificaciones.

Tercer paso: Añadir el método de cobro de Oceanpayment en Shopify (instalación del complemento de Oceanpayment)

Shopify添加收款方式

Siguiendo el mismo recorrido que para activar PayPal, acceda a la sección de configuración de pagos en el panel de control de Shopify (botón de configuración en la parte inferior de la barra lateral izquierda - Pagos). Luego, haga clic en el botón "Agregar método de pago" marcado en el recuadro rojo.Busque el complemento de cobro de Oceanpayment seleccionando la opción de búsqueda "Buscar por proveedor". Ingrese "Oceanpayment" en el cuadro de búsqueda. Como se muestra en la imagen, haga clic en el resultado de búsqueda marcado en el recuadro rojo.

El resultado de búsqueda de Oceanpayment se muestra en la siguiente imagen; haga clic en el resultado marcado en rojo.

Shopify支付方式搜索Oceanpayment

La pantalla de instalación del complemento de Oceanpayment se muestra en la imagen a continuación; haga clic en el botón "Instalar" en la esquina superior derecha para instalar el complemento de Oceanpayment.

Shopify安装oceanpayment

Cuarto paso: Introducir el ID de usuario de Oceanpayment y la clave del complemento para completar la integración del pago con tarjeta de crédito

oceanpayment输入用户编号和密钥页面

La última etapa de la instalación del plugin de Oceanpayment, como se muestra en la imagen anterior, consiste en introducir el ID de usuario y la clave de usuario proporcionados por Oceanpayment. Ingrese correctamente el ID y la clave en los campos correspondientes y haga clic en el botón de guardar. Tras completar la instalación, la página se redirigirá automáticamente a la sección de funciones de cobro de Oceanpayment, como se muestra en la siguiente imagen:

激活Oceanpayment

Finalmente, haga clic en el botón de activación señalado en el recuadro rojo de la imagen anterior. Con esto, se completan todos los pasos para integrar Oceanpayment en Shopify. Ahora, al regresar a la sección de métodos de cobro en Shopify, podrá ver que tanto PayPal como Oceanpayment se han actualizado al estado de activos, como se muestra en la imagen siguiente. De este modo, los usuarios del sitio independiente podrán elegir entre pagar sus productos mediante PayPal o utilizando tarjetas de crédito internacionales en el proceso de checkout.

Shopify收款方式的状态

Conclusión: El contenido anterior constituye la totalidad del artículo “¿Cómo configurar cobros en una tienda independiente? Tutorial de integración de funciones de cobro en tiendas independientes”. Para los lectores que están construyendo su primera tienda independiente y no tienen experiencia práctica, puede que al principio se sintieran confundidos. Sin embargo, tras leer hasta este punto, deberían haber despejado sus dudas y sentirse más seguros sobre cómo implementar técnicamente las funciones de cobro para las ventas de productos en un sitio independiente.

Derechos reservados por SZLOGIC (Lógica Digital), prohibida su reproducción.

Más información

Leave a Comment

逻辑思圆形LOGO

WeChat scan code

逻辑思数字科技Truman
客服热线
4000-166-198