1ou · May 27, 2019 04:46
diff --git a/gistfile1.txt b/gistfile1.txt
 HTML CODE

 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.springframework.org/schema/mvc">
 <head>
    <title>Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
 </head>
 <body>
 <script src="https://js.stripe.com/v3/"></script>

 <div th:value="${paymentIntent}" id="payment-intent-element" hidden="hidden"></div>

 <form action="https://dev.pay.viralpay.es/api/v1/stripe/charge" method="post" id="payment-form">
    <div class="form-row">
        <label for="card-element">
            Credit or debit card
        </label>
        <div id="card-element">
            <!-- A Stripe Element will be inserted here. -->
        </div>

        <!-- Used to display form errors. -->
        <div id="card-errors" role="alert"></div>
    </div>

    <button>Submit Payment</button>
 </form>
 </body>
 <link rel="stylesheet" type="text/css" th:href="@{/css/stripe_card.css}"/>
 <script type="text/javascript" th:src="@{/js/stripe_card.js}"></script>
 </html>

 stripe_card.css
 /**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */
 .StripeElement {
    box-sizing: border-box;

    height: 40px;

    padding: 10px 12px;

    border: 1px solid transparent;
    border-radius: 4px;
    background-color: white;

    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
 }

 .StripeElement--focus {
    box-shadow: 0 1px 3px 0 #cfd7df;
 }

 .StripeElement--invalid {
    border-color: #fa755a;
 }

 .StripeElement--webkit-autofill {
    background-color: #fefde5 !important;
 }

 stripe_js

 // Create a Stripe client.
 var stripe = Stripe('pk_test_RTgVM0Ro2dnFIdHpCSnsQ6Gw00Kg3iR3xO');

 // Create an instance of Elements.
 var elements = stripe.elements();

 // Custom styling can be passed to options when creating an Element.
 // (Note that this demo uses a wider set of styles than the guide below.)
 var style = {
    base: {
        color: '#32325d',
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSmoothing: 'antialiased',
        fontSize: '16px',
        '::placeholder': {
            color: '#aab7c4'
        }
    },
    invalid: {
        color: '#fa755a',
        iconColor: '#fa755a'
    }
 };

 // Create an instance of the card Element.
 var card = elements.create('card', {style: style});

 // Add an instance of the card Element into the `card-element` <div>.
 card.mount('#card-element');

 // Handle real-time validation errors from the card Element.
 card.addEventListener('change', function(event) {
    var displayError = document.getElementById('card-errors');
    if (event.error) {
        displayError.textContent = event.error.message;
    } else {
        displayError.textContent = '';
    }
 });

 // Handle form submission.
 var form = document.getElementById('payment-form');
 form.addEventListener('submit', function(event) {
    event.preventDefault();

    stripe.handleCardPayment(
        document.getElementById('payment-intent-element').getAttribute('value'),
        card
    ).then(function(result) {
        if (result.error) {
            // Inform the user if there was an error.
            var errorElement = document.getElementById('card-errors');
            errorElement.textContent = result.error.message;
            stripeErrorHandler(result.error.payment_intent, result.error.message);
        } else {
            // Send the Payment Intent to your server.
            stripeSuccessHandler(result.paymentIntent);
        }
    });
 });

 function stripeSuccessHandler(paymentIntent) {
    var response = {
        ipAddress: "192.189.01.1",
        merchantId: "1",
        merchantOrderId: "1",
        paymentIntentId: paymentIntent.id
    };

    var form = document.getElementById('payment-form');
    var hiddenInput = document.createElement('input');
    hiddenInput.setAttribute('type', 'hidden');
    hiddenInput.setAttribute('name', 'customerInfo');
    hiddenInput.setAttribute('value', JSON.stringify(response));
    form.appendChild(hiddenInput);

    // Submit the form
    form.submit();
 }

 function stripeErrorHandler(paymentIntent, message) {
    var response = {
        ipAddress: "192.189.01.1",
        merchantId: "1",
        merchantOrderId: "1",
        message: message,
        paymentIntentId: paymentIntent.id
    };

    var form = document.getElementById('payment-form');
    var hiddenInput = document.createElement('input');
    hiddenInput.setAttribute('type', 'hidden');
    hiddenInput.setAttribute('name', 'customerInfo');
    hiddenInput.setAttribute('value', JSON.stringify(response));
    form.appendChild(hiddenInput);

    // Submit the form
    form.submit();
 }
	HTML CODE

	<!DOCTYPE html>
	<html lang="en" xmlns:th="http://www.springframework.org/schema/mvc">
	<head>
	<title>Page</title>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	</head>
	<body>
	<script src="https://js.stripe.com/v3/"></script>

	<div th:value="${paymentIntent}" id="payment-intent-element" hidden="hidden"></div>

	<form action="https://dev.pay.viralpay.es/api/v1/stripe/charge" method="post" id="payment-form">
	<div class="form-row">
	<label for="card-element">
	Credit or debit card
	</label>
	<div id="card-element">
	<!-- A Stripe Element will be inserted here. -->
	</div>

	<!-- Used to display form errors. -->
	<div id="card-errors" role="alert"></div>
	</div>

	<button>Submit Payment</button>
	</form>
	</body>
	<link rel="stylesheet" type="text/css" th:href="@{/css/stripe_card.css}"/>
	<script type="text/javascript" th:src="@{/js/stripe_card.js}"></script>
	</html>

	stripe_card.css
	/**
	* The CSS shown here will not be introduced in the Quickstart guide, but shows
	* how you can use CSS to style your Element's container.
	*/
	.StripeElement {
	box-sizing: border-box;

	height: 40px;

	padding: 10px 12px;

	border: 1px solid transparent;
	border-radius: 4px;
	background-color: white;

	box-shadow: 0 1px 3px 0 #e6ebf1;
	-webkit-transition: box-shadow 150ms ease;
	transition: box-shadow 150ms ease;
	}

	.StripeElement--focus {
	box-shadow: 0 1px 3px 0 #cfd7df;
	}

	.StripeElement--invalid {
	border-color: #fa755a;
	}

	.StripeElement--webkit-autofill {
	background-color: #fefde5 !important;
	}

	stripe_js

	// Create a Stripe client.
	var stripe = Stripe('pk_test_RTgVM0Ro2dnFIdHpCSnsQ6Gw00Kg3iR3xO');

	// Create an instance of Elements.
	var elements = stripe.elements();

	// Custom styling can be passed to options when creating an Element.
	// (Note that this demo uses a wider set of styles than the guide below.)
	var style = {
	base: {
	color: '#32325d',
	fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
	fontSmoothing: 'antialiased',
	fontSize: '16px',
	'::placeholder': {
	color: '#aab7c4'
	}
	},
	invalid: {
	color: '#fa755a',
	iconColor: '#fa755a'
	}
	};

	// Create an instance of the card Element.
	var card = elements.create('card', {style: style});

	// Add an instance of the card Element into the `card-element` <div>.
	card.mount('#card-element');

	// Handle real-time validation errors from the card Element.
	card.addEventListener('change', function(event) {
	var displayError = document.getElementById('card-errors');
	if (event.error) {
	displayError.textContent = event.error.message;
	} else {
	displayError.textContent = '';
	}
	});

	// Handle form submission.
	var form = document.getElementById('payment-form');
	form.addEventListener('submit', function(event) {
	event.preventDefault();

	stripe.handleCardPayment(
	document.getElementById('payment-intent-element').getAttribute('value'),
	card
	).then(function(result) {
	if (result.error) {
	// Inform the user if there was an error.
	var errorElement = document.getElementById('card-errors');
	errorElement.textContent = result.error.message;
	stripeErrorHandler(result.error.payment_intent, result.error.message);
	} else {
	// Send the Payment Intent to your server.
	stripeSuccessHandler(result.paymentIntent);
	}
	});
	});

	function stripeSuccessHandler(paymentIntent) {
	var response = {
	ipAddress: "192.189.01.1",
	merchantId: "1",
	merchantOrderId: "1",
	paymentIntentId: paymentIntent.id
	};

	var form = document.getElementById('payment-form');
	var hiddenInput = document.createElement('input');
	hiddenInput.setAttribute('type', 'hidden');
	hiddenInput.setAttribute('name', 'customerInfo');
	hiddenInput.setAttribute('value', JSON.stringify(response));
	form.appendChild(hiddenInput);

	// Submit the form
	form.submit();
	}

	function stripeErrorHandler(paymentIntent, message) {
	var response = {
	ipAddress: "192.189.01.1",
	merchantId: "1",
	merchantOrderId: "1",
	message: message,
	paymentIntentId: paymentIntent.id
	};

	var form = document.getElementById('payment-form');
	var hiddenInput = document.createElement('input');
	hiddenInput.setAttribute('type', 'hidden');
	hiddenInput.setAttribute('name', 'customerInfo');
	hiddenInput.setAttribute('value', JSON.stringify(response));
	form.appendChild(hiddenInput);

	// Submit the form
	form.submit();
	}