Express Checkout

¿Cómo funciona el botón de pago?

El botón de pago PayPhone se caracteriza por su sencilla integración, seguridad y versatilidad en las diferentes páginas web. Con nuestro botón de pago tus clientes pueden usar sus tarjetas de crédito y débito de las marcas Visa y Mastercard  mediante la aplicación de PayPhone.

El flujo de cobro PayPhone con el botón de pagos integrado a la página web sería 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 y se encarga del pago.
  4. Tu sitio muestra la respuesta de la transacción.

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, se debe crear un usuario de tipo “desarrollador“. En este articulo te enseñamos a crear tu usuario.

Requisitos de Desarrollo:

  • Para usar el botón de pagos hay que configurar nuestra plataforma de manera que tu sitio web se conecte de manera correcta a PayPhone. Antes de iniciar debes preparar la plataforma para tu aplicación. Haz click aquí para conocer como hacer la preparación.

Una vez configurada tu aplicación necesitas dos parámetros para operar, 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 wn 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 javascripts y un complemento html para que el botón aparezca en tu sitio.

  • El primer javascript lo debes agregar en tu cabecera y debes poner tu identificador de aplicación despues de «appID=».

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

  • El segundo Javacript 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,

createOrder: function(actions){

//Se ingresan los datos de la transaccion ej. monto
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 PROCESA LA RESPUESTA CON LOS DATOS DE RESPUESTA                                   

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.

Los datos de transacción los usas para detallar los montos a cobra, la moneda, datos del cliente y referencias que necesites envíar 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 dolar con impuestos.

Amount= 112, AmountWithTax=100, Tax=12

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.
    • clientTransactionId: Identificador de transacción que tu enviaste en la petición.
    • authorizationCode: Código de autorización.
    • 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.
    • messageCode: Código de mensaje.
    • currency: Moneda empleada para el pago.
    • optionalParameter1: Parámetro opcional

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.

 

Leave A Comment?