Express Checkout | Implementación Botón de pago

Si quieres recibir pagos en tu sitio web de manera clara, rápida y sencilla, nuestro Express Checkout te permite lograrlo, sigue nuestro tutorial y en pocos minutos tendrás activo y funcional tu botón de pago.

¿Qué es Express Checkout?

El Express Checkout es la manera más rápida de integrar el botón de pagos PayPhone, el cual te permite recibir pagos con tarjetas de crédito y débito Visa y Mastercard directamente, además de tarjetas de regalo y saldo PayPhone de tus clientes usando nuestra app.

El flujo de cobro PayPhone con el express checkout es el siguiente:

  1. Instalas el botón en tu sitio web.
  2. Tu cliente hace click en el botón.
  3. PayPhone muestra un modal (pop up) y se encarga del pago.
  4. Tu sitio muestra la respuesta de la transacción.

El flujo de desarrollo del express checkout integrado es:

  1. Configurar el botón con los datos del cliente, monto, impuesto, etc.
  2. Recibir resultado de transacción y mostrar al cliente la respuesta.
  3. Confirmar mediante servidor el resultado de la transacción. PayPhone hace una llamada de servidor – servidor a una URL de respuesta que tu configuras, para enviarte los datos del pago y que guardes en tu base de datos.

Implementación del botón de pago

Para implementar el botón de pagos debes cumplir ciertos requisitos que dividimos en dos categorías: Requisitos Comerciales y Requisitos de Desarrollo.

Requisitos Comerciales:

  • El establecimiento que va a recibir los pagos tiene que estar registrado en PayPhone como una tienda habilitada. Para iniciar el registro como PayPhone Business puedes hacer click aquí.
  • Con la tienda activa y lista para transaccionar, debes crear un usuario de tipo “desarrollador“, el cual te explicaremos más adelante.

Requisitos de Desarrollo:

  • Debes configurar en nuestro sitio web «PayPhone Developer» tu ambiente de desarrollo en donde podrás obtener todas tus credenciales, tokens y llaves con las que podrás identificarte en nuestros servicios y añadir la seguridad respectiva al proceso.

Crear usuario desarrollador

Ingresa en tu página PayPhone Business, e inicia sesión con el ruc, correo y contraseña, (si no tienes acceso el administrador de la empresa puede entrar y crear tu usuario) y dirígete a la sección de «Usuarios» a continuación selecciona «Crear Usuario»:

Ingresa todos los datos del desarrollador en el formulario, no olvides que en el campo «Roles» debes ingresar «Desarrollador». (El administrador debe entregar al desarrollador el correo electrónico y la contraseña ingresadas)

Selecciona la tienda o sucursal que recibirá los pagos y presiona el botón Guardar:

Con este proceso listo, el usuario desarrollador puede iniciar la implementación.

Configuración de ambiente

Configurar el ambiente de desarrollo te permite tener un control total sobre las transacciones efectuadas a través de PayPhone. Por favor sigue los siguientes pasos:

1. Iniciar sesión como desarrollador

Ingresa en la página https://appdeveloper.payphonetodoesposible.com/ e inicia sesión con las credenciales de tu usuario desarrollador (Ruc, correo y contraseña).

2. Crear Aplicación PayPhone:

Las aplicaciones de desarrollo PayPhone te permiten configurar los parámetros de implementación, como la plataforma, permisos o usuarios de prueba, y te ayuda a obtener tus credenciales de autenticación como el token.

Para crear tu aplicación haz click en  el “+”  de la parte superior:

Se abrirá un formulario donde debes ingresar los campos informativos, y completar completar principalmente:

  • Dominio web: La url de tu página web que se conectará al botón de PayPhone. SOLO EL DOMINIO WEB TIENE ACCESO AL BOTÓN DE PAGO, si no abres el Express checkout desde tu dominio web, no te dará acceso.
  • Url de respuesta: Es la url donde se notificará el estado de la transacción.

Por último selecciona tu tipo de aplicación como WEB

Presiona Guardar

Con la aplicación configurada puedes obtener tu token de autenticación. En el menú superior haz click en credenciales, y tendrás el botón para copiar tu token.

Implementación del botón de pago

Con todo listo puede empezar, para integrar necesitas dos parámetros, tu identificador de aplicación y el token de autenticación.

  • El identificador de aplicación se encuentra en la pestaña de «Detalles» de tu aplicación:

  • Tu token de autenticación lo encontrarás en la pestaña «Credenciales». Si necesitas regenerar tu token en este artículo se encuentra toda la información.

Instalación:

Integrar el botón en tu sitio web es muy sencillo, solo agrega dos scripts  y un tag html para que el botón aparezca en tu sitio.

  • El primer script lo debes agregar en tu cabecera y debes poner tu identificador de aplicación después de «appID=».

 <script src=»https://pay.payphonetodoesposible.com/api/button/js?appId=ACATUIDDEAPLICACION»></script>

  • El segundo script es el que te permitirá controlar las acciones de petición y respuesta del botón, lo debes insertar de igual forma en la cabecera:
<script>
window.onload = function() {

payphone.Button({

//token obtenido desde la consola de developer
token: ‘TU-TOKEN-DE-AUTENTICACIÓN-AQUI‘,

//PARÁMETROS DE CONFIGURACIÓN
btnHorizontal: true,
btnCard: true,

createOrder: function(actions){

//Se ingresan los datos de la transaccion ej. monto, impuestos, etc
return actions.prepare({

amount: 100,
amountWithoutTax: 100,
currency: «USD»,
clientTransactionId: «identificador-único»
});

},
onComplete: function(model, actions){

//Se confirma el pago realizado
actions.confirm({
id: model.id,
clientTxId: model.clientTxId
}).then(function(value){

//EN ESTA SECCIÓN SE RECIBE LA RESPUESTA Y SE MUESTRA AL USUARIO                                

if (value.transactionStatus == «Approved»){
alert(«Pago » + value.transactionId + » recibido, estado » + value.transactionStatus );
}
}).catch(function(err){
console.log(err);
});

}
}).render(‘#pp-button’);

}
</script>

  • El tercer elemento es una etiqueta DIV que debes ubicar en la sección donde quieras que aparezca el botón de pago
<div id=»pp-button«></div>

Con esos tres elementos tu botón de pagos estará listo para operar.

Configuración:

Dispones de ciertos parámetros lógicos de configuración que puedes agregar para personalizar tu botón de pago:

    • btnHorizontal: Si este parámetro se encuentra en true la disposición de los botones se mostrará de manera horizontal, si se encuentra en false se mostrará de manera vertical.
    • btnCard: Si este parámetro se encuentra en true, se mostrarán los botones de Visa y Mastercard para el pago directo sin necesidad del app PayPhone.

Los datos de transacción los usas para detallar los montos a cobra, la moneda, datos del cliente y referencias que necesites enviar para el pago :

    • amount: Valor total de la factura a cobrar, es la suma de amountWithTax,  amountWithoutTax, Tax, service y tip.
    • amountWithoutTax (opcional): Valor que no graba impuesto.
    • amountWithTax (opcional): Valor que si graba impuesto, sin el impuesto incluido.
    • tax (opcional): Valor del impuesto.
    • service (opcional):  Valor del servicio.
    • tip (opcional): Valor de la propina.
    • currency (opcional): Moneda a cobrar. /ej USD
    • clientTransactionId: Identificador de transacción, debes generarlo, es un identificador único.
    • storeId (opcional): Identificador de sucursalr que cobra.
    • reference (opcional): Referencia del pago.
    • phoneNumber (opcional): Número de Teléfono del cliente, si no lo envías el botón lo solicitará al cliente.
    • email (opcional): Correo electrónico del cliente, si no lo envías el botón lo solicitará al cliente.
    • documentId (opcional): Número de identificación del cliente, si no lo envías el botón lo solicitará al cliente.

Los valores a cobrar son enteros y se deben multiplicar por 100, por ejemplo $1 dólar = 100. A continuación puedes ver un ejemplo de cobrar $1 dólar con impuestos.

Amount= 112, AmountWithTax=100, Tax=12

Para cobrar $1 dólar sin impuestos, los valores serían los siguientes:

Amount=100, AmountWithoutTax=100

El botón de pago te entrega ciertos datos de respuesta para que tu puedas tramitar el resultado de la transacción y tomar acción de acuerdo al resultado:

    • statusCode: Código de estado de la transacción. 2=Cancelado.03=Aprobada
    • transactionStatus: Estado de la transacción.

Con El statusCode y el transactionStatus puedes mostrar a tu cliente si el pago fue aprobado o rechazado. El resto de parámetros para conciliación, número de transacción y de autorización te recomendamos les des gestión en tu URL de respuesta.

El resultado sería el siguiente:

 

 

 

 

 

 

 

 

 

 

 

 

 

En caso de que necesites reversar una transacción, puedes usar el método reverse, haz click aquí para conocer su funcionamiento. Recuerda que el reverso solo se puede ejecutar el mismo día de la transacción hasta las 7 pm.

Confirmación de pago:

Para confirmar el pago, debes crear un archivo en tu URL de respuesta (configurada en tu página de PayPhone Developer), esta web es invocada por PayPhone de Servidor – Servidor, enviando los parámetros ID de transacción y ClientTransactionID creado por ti (identificador único de cliente). Con esos parámetros debes llamar a nuestro servicio web CONFIRM para obtener los parámetros de respuesta de la transacción.

El método confirm te ayuda para confirmar a PayPhone que recibiste la respuesta del botón de pagos y consultar el resultado de la transacción con el cliente. Debes hacer una llamada POST a la siguiente dirección:  https://pay.payphonetodoesposible.com/api/button/V2/Confirm con el parámetro de ID y ClientTransactionID. No olvides adjuntar en el header tu token de autenticación.

Los parámetros de respuesta que recibirás son los siguientes:

Nombre Descripción
statusCode Código de estado de la transacción. 2=Cancelado.03=Aprobada
transactionStatus Estado de la transacción.
clientTransactionId Identificador de transacción que tu enviaste en la petición.
authorizationCode Código de autorización bancario.
transactionId Identificador de transacción asignado por PayPhone.
email El correo electrónico empleado por el usuario para el pago.
phoneNumber Número de teléfono empleado por el usuario para el pago.
document Número de cédula empleado por el usuario para el pago.
amount Monto total pagado.
cardType Tipo de tarjeta empleada, puede ser crédito o débito.
cardBrandCode Código de la marca de la tarjeta.
cardBrand Marca de la tarjeta.
bin Primeros 6 dígitos de la tarjeta empleada.
lastDigits Últimos dígitos de la tarjeta empleada.
deferredCode Código de diferido empleado por el usuario. Aquí puedes conocer más de los diferidos.
deferredMessage Mensaje del diferido.
deferred Variable boleana que indica si se uso un diferido o no.
message En caso de error se muestra el error en este parámetro. Puedes consultar el catálogo de errores haciendo click aquí.
messageCode Código de mensaje.
currency Moneda empleada para el pago.
optionalParameter1 Parámetro opcional

A continuación te detallo el ejemplo de llamada al servicio web en PHP:

<?php
//Obtener parametros de la URL enviados por PayPhone
$transaccion = $_GET[«id»];
$client = $_GET[«clientTransactionId»];

//Preparar JSON de llamada
$data_array = array(
«id»=> (int)$transaccion,
«clientTxId»=>$client );

$data = json_encode($data_array);

//Iniciar Llamada
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, «https://pay.payphonetodoesposible.com/api/button/V2/Confirm»);
curl_setopt($curl, CURLOPT_POST, 1);

curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
curl_setopt_array($curl, array(
CURLOPT_HTTPHEADER => array(
«Authorization: Bearer TU TOKEN DE AUTENTICACIÓN», ‘Content-Type:application/json’
),
));
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$result = curl_exec($curl);
curl_close($curl);
echo $result;

?>

 

Eso es todo, si llegaste a este punto, felicidades, tu integración está completada.

Si prefieres puedes revisar nuestro video tutorial con una explicación completa:

 

Leave A Comment?