<script type="text/javascript" src="https://sandbox.sipay.es/fpay/v1/static/bundle/fastpay.js"></script>
 
<div style="border: 2px dashed black;"">
    <button type="button" data-key="key-value" data-amount="2872" data-currency="EUR" data-template="v3" data-callback="sample_callback" data-notab="1" data-remember="checkbox" data-paymentbutton="Pagar" class="fastpay-btn" data-hiddenprice="false" data-autosave="true">
    </button>
  </div>

.fastpay-btn img {
  display: none;
}
function sample_callback(payload) {
  // Enviar estos datos al backend para llamar al API de all-in-one y obtener la url de autenticación
  document.getElementById("result").innerHTML =
    "request_id: " + JSON.stringify(payload.request_id);
  // Redirect la URL
  // window.location = 'https://httpbin.org/get'
}
Fastpay.customize({
  colors: {
    title: "#007bff",
    description: "#007bff",
    header_line: "#007bff",
    inputs_lines: "#007bff",
    icon: "#007bff",
    info: "#007bff",
    button: "black",
    cvv_info: "#c0c0c0",
    header_color: "#007bff"
  }
});
document.addEventListener("DOMContentLoaded", function () {
  document.querySelector(".fastpay-btn").click();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.