Integración de Billetera Personal en el sitio del comercio
La integración del medio de pago Billetera Personal ya está incluida en la API de integración de medios de pagos, es decir, ya integrando dicha API tenés disponible el medio de pago seleccionado, no obstante, si se quiere incrustar todo el medio de pago en el sitio del comercio a integrar, ejemplo, para dar evitar un redireccionamiento y brindar así una mejor experiencia de pago al cliente, esto es factible y dicha documentación habla de esto.
Requisitos
- Haber integrado la API de integración de medios de pagos.
Para lograr incrustar el medio de pago, se deben realizar las siguientes funciones adicionales
- Página de Checkout
- Acción Pagar
- Mostrar Modal
- Realizar petición a Pagopar
- Mostrar resultado de pago
Página de Checkout
El primer paso es crear una página en nuestro sitio web, el cual será mostrada una vez seleccionado el medio de pago Billetera Personal. El cual deberá verse algo parecido al siguiente ejemplo:
El cual debe contar con:
- Campo de texto de celular con Billetera Personal
- Botón "Pagar" para invocar una petición ajax que a su vez hará una petición a Pagopar
Acción Pagar
Mostrar Modal
Descripción
El cliente le da clic al botón "Pagar", y debe ocurrir lo siguiente:
- Se debe realizar una petición Ajax, en cual se realiza una petición al endpoint "BIlletera Personal" de Pagopar explicado más abajo en el apartado "Realizar petición pagar".
- Se debe mostrar un modal con un contador que vaya de 65 segundos a 0, indicando que tiene 65 segundos para insertar su pin en su celular.
El cliente tiene 65 segundos para confirmar o rechazar la transacción, el cual lo realiza directamente desde su teléfono con el número de celular ingresado tal como se observa en la siguiente imagen:
Debe ingresar 2 para no aprobar la transacción, o su pin para aprobar, si se terminan los 65 segundos, ya no se podrá aprobar la transacción.
Realizar petición a Pagopar
Descripción
El comercio genera un pedido en Pagopar, Pagopar retorna un hash que servirá para armar una URL
Observación
El valor de public key y private key se obtiene desde la opción “Integrar con mi sitio web” de Pagopar.com
Token para este endpoint se genera: sha1(token privado + 'pagar');
Método: POST
URL: https://api.pagopar.com/api/billetera-personal/1.0/pagar
Datos a enviar:
{
"token":"bdcb1b7375ca85904caeaaa4c094c0568951141b",
"token_publico":"9a34feddfa2b398e9582fbe62139507b",
"hash_pedido":"45fa668ba097ae4f9c958020eab0fa4ab0bf5021153a0fe32779d3b2e1714341",
"celular":"0971202817"
}Campo | Descripción | Ejemplo |
token | Token generado de la siguiente forma: sha1(token privado + 'pagar'); | bdcb1b7375ca85904caeaaa4c094c0568951141b |
token_publico | Clave pública del comercio, se obtiene desde el panel de Pagopar en el apartado "Integrar con mi sitio web" | 9a34feddfa2b398e9582fbe62139507b |
hash_pedido | Hash de pedido obtenido al momento de iniciar la transacción de la documentación de Integración de medios de pago vía API | 45fa668ba097ae4f9c958020eab0fa4ab0bf5021153a0fe32779d3b2e1714341 |
celular | Número de celular de la Billetera Personal, en el formato 097XXXXXXX | 0971202817 |
Respuesta en caso de pago satisfactorio
{
"respuesta": true,
"resultado": "Transaccion aprobada."
}Campo | Descripción | Ejemplo |
| respuesta | Si es true, es porque se realizó el pago satisfactoriamente | true |
| resultado | Descripción del intento de pago, en caso de respuesta ser true, simplemente una descripción aclaratoria | Transaccion aprobada |
Respuesta en caso de error al momento de pagar
{
"respuesta": false,
"resultado": "Transaccion no aprobada."
}Campo | Descripción | Ejemplo |
| respuesta | Si es false, es porque no se realizó el pago satisfactoriamente | false |
| resultado | Descripción del intento de pago, en caso de respuesta ser false, simplemente una descripción aclaratoria. | Transaccion no aprobada |
Mostrar resultado de Pago
De acuerdo a la respuesta obtenida el punto anterior, se debe desplegar un modal avisando si el pago se realizar o no. Adicionalmente, se puede agregar un botón de "volver a intentar el pago" si se quisiera.
Observación: Si bien con el endpoint anterior ya sabemos si se pagó o no la transacción, se deseamos guardar en la base de datos el estado del pago o realizar alguna acción adicional, ejemplo, enviar SMS/E-mail al cliente, no lo haríamos utilizando dicho end-point, sino que utilizaríamos la notificación que realiza Pagopar al comercio según especifica la documentación
Related Articles
API - Integración de medios de pagos
Flujo normal de compra Paso #1: El comercio crea un pedido en Pagopar Paso #2: El comercio redirecciona a la página de Checkout de Pagopar Paso #3: Pagopar notifica al comercio sobre el pago Paso #4: Pagopar redirecciona a la página del resultado de ...Transacciones con divisa en USD
Iniciar transacción con divisa en USD Descripción general Pagopar ha ampliado sus funcionalidades para cobrar pagos en dólares estadounidenses (USD). Para realizar cobros en USD, es necesario configurar el cobro de tus ventas con transferencia ...Catastro de tarjetas - Pagos recurrentes - Preautorización
Catastro de tarjetas para pagos recurrentes o sin acción del usuario Primeros pasos Descripción La funcionalidad de pagos recurrentes a través de Pagopar permite realizar un pago en cualquier momento, de una tarjeta de crédito/débito previamente ...(Versión Inglés) API - Steps to integrate Pagopar to my website
Normal flow of purchase Step # 1: The shop creates an order in Pagopar. Step # 2: The shop redirects to the Pagopar checkout page. Step # 3: Pagopar notifies the shop of the payment. Step # 4: Pagopar redirects to the shop´s payment result page. Step ...Obtener datos del comercio
Este endpoint retorna los datos de un comercio, puede ser útil para saber la comisión que posee el comercio, las deudas pendientes con Pagopar y los permisos habilitados, entre otros datos que se retornan. ...