adagio/desacoplado.html

## desacoplado.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Detalle de pago</title>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://pocpaymentserve.s3.amazonaws.com/payform.min.css" />
</head>
<body>

    <br>

    <div id="txtNumeroTarjeta" class="form-control"></div>

    <div id="txtFechaVencimiento" class="form-control"></div>

    <div id="txtCvv" class="form-control"></div>

    <script src="https://pocpaymentserve.s3.amazonaws.com/payform.min.js"></script> <script type="text/javascript">

        var configuration = {
            sessionkey: "823c21b58128fdba7ba11c7c71076dabcb4414256536b9b5d0e5018a05e174e3",
            channel: "web",
            merchantid: "750000004",
            purchasenumber: "3412312289",
            amount: "1.00",
            callbackurl: "http://localhost:8082/PagoWebPhp/finalizar.php",
            language: "es", font:"https://fonts.googleapis.com/css?family=Montserrat:400&display=swap", recurrentmaxamount: "10.00"
        };

        payform.setConfiguration(configuration);

        var elementStyles = {
            base: {
                color: '#666666',
                fontWeight: 700,
                fontFamily: "'Montserrat', sans-serif", fontSize: '16px',
                fontSmoothing: 'antialiased',
                placeholder: {
                    color: '#999999'
                },
                autofill: {
                    color: '#e39f48',
                }
            },
            invalid: {
                color: '#E25950',
                '::placeholder': {
                    color: '#FFCCA5',
                }
            }
        };

        var cardNumber = payform.createElement(
            'card-number', {
                style: elementStyles,
                placeholder: 'Número de Tarjeta'
             },
            'txtNumeroTarjeta'
        );

        cardNumber.then(element => {
            element.on('change', function(data) {
                console.log(data);
            });
        });

        var cardExpiry = payform.createElement(
            'card-expiry', {
                style:elementStyles,
                placeholder:'MM/AA'
            },
            'txtFechaVencimiento'
        );

        cardExpiry.then(element => { element.on('change', function(data) {
                console.log(data);
            })
        });

        var cardCvv = payform.createElement(
            'card-cvc', {
                style:elementStyles,
                placeholder:'CVV'
            }, 'txtCvv'
        );

        cardCvv.then(element => { element.on('change', function(event) {
                console.log(event);
            })
        });

    </script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Detalle de pago</title>
	<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
	<link rel="stylesheet" href="https://pocpaymentserve.s3.amazonaws.com/payform.min.css" />
	</head>
	<body>

	<br>

	<div id="txtNumeroTarjeta" class="form-control"></div>

	<div id="txtFechaVencimiento" class="form-control"></div>

	<div id="txtCvv" class="form-control"></div>

	<script src="https://pocpaymentserve.s3.amazonaws.com/payform.min.js"></script> <script type="text/javascript">

	var configuration = {
	sessionkey: "823c21b58128fdba7ba11c7c71076dabcb4414256536b9b5d0e5018a05e174e3",
	channel: "web",
	merchantid: "750000004",
	purchasenumber: "3412312289",
	amount: "1.00",
	callbackurl: "http://localhost:8082/PagoWebPhp/finalizar.php",
	language: "es", font:"https://fonts.googleapis.com/css?family=Montserrat:400&display=swap", recurrentmaxamount: "10.00"
	};

	payform.setConfiguration(configuration);

	var elementStyles = {
	base: {
	color: '#666666',
	fontWeight: 700,
	fontFamily: "'Montserrat', sans-serif", fontSize: '16px',
	fontSmoothing: 'antialiased',
	placeholder: {
	color: '#999999'
	},
	autofill: {
	color: '#e39f48',
	}
	},
	invalid: {
	color: '#E25950',
	'::placeholder': {
	color: '#FFCCA5',
	}
	}
	};

	var cardNumber = payform.createElement(
	'card-number', {
	style: elementStyles,
	placeholder: 'Número de Tarjeta'
	},
	'txtNumeroTarjeta'
	);

	cardNumber.then(element => {
	element.on('change', function(data) {
	console.log(data);
	});
	});

	var cardExpiry = payform.createElement(
	'card-expiry', {
	style:elementStyles,
	placeholder:'MM/AA'
	},
	'txtFechaVencimiento'
	);

	cardExpiry.then(element => { element.on('change', function(data) {
	console.log(data);
	})
	});

	var cardCvv = payform.createElement(
	'card-cvc', {
	style:elementStyles,
	placeholder:'CVV'
	}, 'txtCvv'
	);

	cardCvv.then(element => { element.on('change', function(event) {
	console.log(event);
	})
	});

	</script>

	</body>
	</html>