Método de pago

Introducción

En esta sección vamos a configurar Atrato como método de pago dentro de tu página custom code para que tus clientes puedan completar compras mediante Atrato Pago y tu puedas incrementar tus ventas.

Checkout

En el siguiente diagrama de flujo se muestra el comportamiento del método de pago de Atrato dentro del checkout de tu página.

En esta sección podrás agregar Atrato como método de pago en tu tienda en línea, con esto tus clientes podrán solicitar un crédito en menos de 3 minutos y tu recibes el monto por el producto una vez autorizado
Notas:

• Se necesita contar con un key de tu comercio asociado con Atrato para poder activar correctamente el método de pago Atrato. Tu key lo puedes encontrar en el dashboard de atratopago.com/v3/partner en el botón de Webhhook ⇒ Key único. Si no cuentas con un key, favor de contactarse con el área de soporte
• El monto mínimo para solicitar un crédito con Atrato es de $1,000 pesos.
• Es necesario agregar un método de pago de Atrato.

Funcionamiento

1. Se selecciona Atrato como método de pago en tu plataforma.
2. En el checkout se abrirá el pop up de Atrato, en donde el usuario tendrá que llenar su solicitud.
   - El cliente llena su solicitud ahí mismo en menos de 3 minutos
   - Al terminar la solicitud de manera automática genera una respuesta a la solicitud.
3. Si la solicitud se completa por parte del usuario y no fue rechazada, generas tu orden y se redirige el cliente a la página de confirmación para culminar el proceso.

Implementación

Paso 1: Método de pago

Lo primero que tienes que hacer es agregar un método de pago en tu plataforma, con esto podemos identificar cuando lanzar el proceso de la solicitud con Atrato.

El método de pago deberá contener la siguientes información:

Titulo / Nombre

Atrato Pago - Paga en cómodas mensualidades sin tener tarjeta

Información adicional

Selecciona Atrato Pago y podrás financiar esta compra hasta en 18 cómodas mensualidades, sin necesidad de tener tarjeta de crédito. Después de dar clic en "finalizar pedido", se te dirigirá a Atrato Pago para continuar con tu proceso de compra.

Paso 2: Solicitud

En la sección de checkout debe de existir la posibilidad de saber con qué método de pago se está realizando el pago, para con esto identificar cuando se esté generando el pago con el método de Atrato y lanzar la ventana del llenado de la solicitud.

Ejemplo de cómo implementar el modal de pago en tu pasarela de pagos lo encontrarás en Plugin de método de pago en el archivo : CustomCheckoutSolicitud.html

En ese ejemplo se muestra como lanzar la modal de llenado de solicitud y su posterior validación para conocer el estatus de la solicitud si se completo, se rechazo o está incompleta.
El ejemplo se implementó en vanilla Javascript pero tu puedes adecuarlo según la plataforma que estés utilizando.

Atributos

Para cualquier plataforma se necesario identificar se puedan obtener los siguientes datos:

• Método de pago (para identificar cuando sea el método de pago de Atrato.)
• Descripción de Producto o Productos.
• Número de Orden.
• Id de la Orden. ( Puede ser igual al número de orden )
• Precio.
• Correo del cliente.
• Nombre del cliente.
• Teléfono del cliente.

Cuando se identifique que el método de pago es de atrato obtener algunos datos y enviarlos através de los atributos del div.
Los atributos a enviar son los siguientes:

Referencias

Sandbox

<!-- Referencias para plataforma sandbox -->
<link	rel="stylesheet" type="text/css" 	href="https://sandbox.atratopago.com/ecommerce_plugin/highslide.css"	/>
<script	type="text/javascript" src="https://sandbox.atratopago.com/ecommerce_plugin/highslide-with-html.js"	></script>
<script	type="text/javascript" src="https://sandbox.atratopago.com/ecommerce_plugin/highslide-config.js" ></script>

Producción

<!-- Referencias para plataforma de producción -->
<link rel="stylesheet" type="text/css" href="https://app.atratopago.com/ecommerce_plugin/highslide.css" />
<script type="text/javascript" src="https://app.atratopago.com/ecommerce_plugin/highslide-with-html.js"></script>
<script type="text/javascript" src="https://app.atratopago.com/ecommerce_plugin/highslide-config.js"></script>

Componente Atrato

<div
     id="higslide-div-atrato-info"
     data-ordernumber="QUOTE"
     data-orderid="7000000001" -- Se recomienda el id del carrito de compra
     data-idcommerce="###########"
     data-key="#########"
     data-price="1000.99"
     data-product="Nombre del producto"
     data-email="[email protected]"
     data-name="Nombre del cliente"
     data-phone="33 3333 5623"
     data-plataform="other"
     data-type="pago"
     data-version="2"
     data-sandbox="true"
     data-urlhost="https://sandbox.atratopago.com"
     ></div>

<div id="messageData"></div>

		<script>
			function showMessage(textMessage) {
				document.getElementById("messageData").innerHTML = textMessage;
				return false;
			}
			new window.Atrato_Pago_Events({
				onSuccess: (data) => {
					showMessage(
						`Result: ${JSON.stringify(
							data
						)} <BR> Se ha generado la solicitud!. <BR>  Aquí redirecciona a la pagina de success`
					);
					setTimeout(function () {
						location.href = "CustomCheckoutSuccess.html"; // Url de redirección
					}, 5000);
				},
				onPending: (data) => {
					showMessage(
						`Result: ${JSON.stringify(
							data
						)} <BR> Continua con tu proceso de solicitud con Atrato, para completar el proceso.`
					);
				},
				onError: (error) => {
					showMessage(
						`Result: ${JSON.stringify(
							error
						)} <BR> Lo sentimos tu solicitud con Atrato ha sido rechazada.`
					);
				},
				onRejected: (data) => {
					console.log("On rejected");
					showMessage(`Has sido rechazado`);
				},
			});
		</script>

Paso 3: Solicitud completada

Cuando se identifique que la solicitud se realizó de manera correcta, validando el estatus con el Atrato_Pago_Events onSuccess de Atrato, se puede proceder a la generación de la orden de parte de tu plataforma, desplegando en ese momento el proceso para finalizar la solicitud con Atrato, subiendo los documentos requeridos para el usuario dependiendo el monto del crédito.

EL ejemplo de cómo implementar el modal de pago en tu success checkout lo encontrarás en Plugin de método de pago en el archivo : CustomCheckoutSuccesss.html

Para esto dentro de la pantalla de orden procesada con éxito o success checkout, deberá incluir el componente de Atrato con los atributos requeridos cuando se identifique que el método de pago con el que se realizó la orden fué Atrato.

Los atributos requeridos son los siguientes:

Referencias

Sandbox

<!-- Referencias para plataforma sandbox -->
<link	rel="stylesheet" type="text/css" 	href="https://sandbox.atratopago.com/ecommerce_plugin/highslide.css"	/>
<script	type="text/javascript" src="https://sandbox.atratopago.com/ecommerce_plugin/highslide-with-html.js"	></script>
<script	type="text/javascript" src="https://sandbox.atratopago.com/ecommerce_plugin/highslide-config.js" ></script>

Producción

<!-- Referencias para plataforma de producción -->
<link rel="stylesheet" type="text/css" href="https://app.atratopago.com/ecommerce_plugin/highslide.css" />
<script type="text/javascript" src="https://app.atratopago.com/ecommerce_plugin/highslide-with-html.js"></script>
<script type="text/javascript" src="https://app.atratopago.com/ecommerce_plugin/highslide-config.js"></script>

Componente Atrato

<div
   id="higslide-div-atrato-info"
   data-type="documentos"
   data-urlhost="https://sandbox.atratopago.com"
   data-idCommerce="##########"
   data-key="################"
   data-quoteId="7000000001"
   data-orderId="70003"
   data-orderNumber="0070003"
   data-sandbox="true"
   >
</div>

Notas

• Es importante que se genere el pedido como pendiente a la hora que el cliente seleccione pagar con Atrato y se complete la solicitud.
• Para un correcto funcionamiento de las notificaciones de estado de Atrato_Pago_Events es necesario configurar la sección de webhook