se carga sdk de openPay

2026-03-31 17:26:51 -06:00
parent 4b0ea23b25
commit c502d047e9
7 changed files with 304 additions and 19 deletions
@@ -41,12 +41,12 @@
                                        <td>{{$pago->monto}}</td>
                                        <td class="row mx-auto">

-                                            <form action="{{ route('pagar', $pago->id) }}" method="POST">
-                                                    @csrf
-                                                    <button class="btn btn-success">
-                                                        Pagar
-                                                    </button>
-                                                </form>
+                                            <select class="form-control" onchange="pagarMetodo(this.value, {{ $pago->id }})">
+                                                <option value="">Selecciona método</option>
+                                                <option value="card">Tarjeta</option>
+                                                <option value="store">OXXO</option>
+                                                <option value="spei">Transferencia</option>
+                                            </select>
                                        </td>
                                    </tr>
                                @empty
@@ -63,6 +63,31 @@
    </div>
 </div>

+
+<div class="modal fade" id="modalPago">
+    <div class="modal-dialog">
+        <div class="modal-content p-3">
+
+            <h5>Pagar con tarjeta</h5>
+
+            <form id="payment-form">
+
+                <input type="hidden" id="pago_id">
+
+                <input data-openpay-card="holder_name" class="form-control mb-2" placeholder="Nombre">
+                <input data-openpay-card="card_number" class="form-control mb-2" placeholder="Tarjeta">
+                <input data-openpay-card="expiration_month" class="form-control mb-2" placeholder="MM">
+                <input data-openpay-card="expiration_year" class="form-control mb-2" placeholder="AA">
+                <input data-openpay-card="cvv2" class="form-control mb-2" placeholder="CVV">
+
+                <button type="submit" class="btn btn-primary">Pagar</button>
+
+            </form>
+
+        </div>
+    </div>
+</div>
+
@endsection


@@ -78,4 +103,102 @@
            });
        </script>
    @endif
+
+    <script>
+    function pagarMetodo(metodo, pagoId) {
+
+        if (!metodo) return;
+
+        if (metodo === 'card') {
+            document.getElementById('pago_id').value = pagoId;
+            $('#modalPago').modal('show');
+            return;
+        }
+
+        fetch('/pagar/' + pagoId, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-CSRF-TOKEN': '{{ csrf_token() }}'
+            },
+            body: JSON.stringify({
+                metodo: metodo
+            })
+        })
+        .then(async res => {
+
+            console.log('STATUS:', res.status);
+
+            let text = await res.text(); // 👈 lee como texto SIEMPRE
+            console.log('RAW RESPONSE:', text);
+
+            try {
+                let data = JSON.parse(text);
+                console.log('JSON:', data);
+
+                if (data.referencia) {
+                    alert('Referencia OXXO: ' + data.referencia);
+                } else if (data.clabe) {
+                    alert('CLABE: ' + data.clabe);
+                } else {
+                    alert('Respuesta recibida');
+                }
+
+            } catch (e) {
+                console.error('NO ES JSON:', e);
+                alert('Error: respuesta no válida');
+            }
+
+        })
+        .catch(err => {
+            console.error('FETCH ERROR:', err);
+        });
+    }
+    </script>
+
+    {{-- OpenPay --}}
+    <script src="https://openpay.s3.amazonaws.com/openpay.v1.min.js"></script>
+    <script src="https://openpay.s3.amazonaws.com/openpay-data.v1.min.js"></script>
+
+    <script>
+        OpenPay.setId("{{ env('OPENPAY_ID') }}");
+        OpenPay.setApiKey("{{ env('OPENPAY_PUBLIC_KEY') }}");
+        OpenPay.setSandboxMode(true);
+
+        document.addEventListener("DOMContentLoaded", function () {
+
+            let form = document.getElementById('payment-form');
+
+            if (form) {
+                form.addEventListener('submit', function(e) {
+                    e.preventDefault();
+
+                    OpenPay.token.extractFormAndCreate('payment-form', function(response){
+
+                        let token = response.data.id;
+                        let pagoId = document.getElementById('pago_id').value;
+
+                        fetch('/pagar/' + pagoId, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                            },
+                            body: JSON.stringify({
+                                metodo: 'card',
+                                token: token
+                            })
+                        }).then(() => {
+                            alert('Pago procesado');
+                            location.reload();
+                        });
+
+                    }, function(){
+                        alert('Error en tarjeta');
+                    });
+                });
+            }
+
+        });
+    </script>
@endsection