.

Ejemplo Técnico: Cajita de Pago.

Fase 1: Preparación de la Transacción

Antes de iniciar la integración, asegúrate de preparar los datos de tu transacción:

MONTOS

DATOS DE SEGUIMIENTO

Identificador único (clientTransactionId): CP260307-0705-3464

Motivo de transacción (reference): Prueba Cajita de Pago en https://payphone.website

⚠️ ¡Atención! Formato de Montos

Fase 2: Recursos - Cajita de Pagos :

HEADERS

                    
                        <head>
                            <link rel="stylesheet" href="https://cdn.payphonetodoesposible.com/box/v1.1/payphone-payment-box.css"> 
                            <script type="module" src="https://cdn.payphonetodoesposible.com/box/v1.1/payphone-payment-box.js"></script> 
                        </head>
                    
                

BODY (script):

                    
                        <script>             
                            window.addEventListener('DOMContentLoaded',()=>{    

                                ppb = new PPaymentButtonBox({     

                                    token:  "Colocar-Tu-Token",  
                                    amount:  830, 
                                    amountWithoutTax:  600, 
                                    amountWithTax:  200, 
                                    tax:  30, 
                                    service:  0, 
                                    tip:  0, 
                                    currency: "USD", 
                                    clientTransactionId: "CP260307-0705-3464", 
                                    reference:  "Prueba Cajita de Pago en https://payphone.website",  
                                    storeId:  "Colocar-Tu-StoreID",                              
                                    lang:  "es", 
                                    defaultMethod:  "card", 
                                    timeZone:  -5, 
                                    lat:  "-1.831239", 
                                    lng:  "-78.183406",
                                    optionalParameter:  "Pago de cliente: Joel Miller",
                                    //Solo si se registran datos del titular de la tarjeta 
                                    /*
                                        documentId:  "1481181483",
                                        phoneNumber:  "+593984556688",
                                        email:  "jmiller@lastofus.com",
                                        identificationType: 1
                                    */  

                                }).render('pp-button'); 

                            })
                        </script> 
                    
                

ETIQUETA HTML

                    
                        <div id="pp-button"></div>
                    
                

Interface de Usuario Directa


Interface de Usuario Modal

📚 Documentación Técnica: CAJITA DE PAGO

Consulta la documentación oficial para conocer todos los detalles, parámetros disponibles, estructuras de respuesta y buenas prácticas: