Nek-/stripe_front_payment.html

## stripe_front_payment.html
<!DOCTYPE html>
<html lang="en">

<head>
  <title>This is the title of the webpage!</title>
  <script src="https://js.stripe.com/v3/"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

<body>
  <p>This is an example paragraph. Anything in the <strong>body</strong> tag will appear on the page, just like this
    <strong>p</strong> tag and its contents.</p>

  <input type="text" id="clientSecretInput" placeholder="client secret input" /><br><p id="clientSecretShow"></p> <br>

  <form id="payment-form" onsubmit="submitPayment(event)" class="payment-form">
    <div id="card-element">
      <!-- Elements will create input elements here -->
    </div>

    <!-- We'll put the error messages in this element -->
    <div id="card-errors" role="alert"></div>

    <button id="submit">Pay</button>
  </form>

  <script>
    var stripe = Stripe('pk_test_key');
    var elements = stripe.elements();

    var style = {
      base: {
        color: "#32325d",
      }
    };
      document.getElementById('clientSecretInput').addEventListener('change', function (e) {
        clientSecret = e.target.value;
        document.getElementById('clientSecretShow').innerHTML = clientSecret;
      });

    // a global
    var card = elements.create("card", { style: style });
    card.mount("#card-element");

    var clientSecret = null;

    function submitPaymentIntent() {
      console.log("submitPaymentIntent() clicked")

      const customerInfo = {
        first_name: "first",
        last_name: "last",
        email: "",
        address: {
          // required
          line1: "123 Main St",
          line2: "Apt 2",
          city: "Nowhere",
          state: "AK",
          postal_code: "90299",
          // Two-letter country code (ISO 3166-1 alpha-2).
          country: "us",
        },
        phone: "123-234-2345"
      };

      const products = [
        1, 2, 3
      ];

      const body = JSON.stringify({
        customerInfo,
        products,
      })
    }

    function submitPayment(e) {
      e.preventDefault()
      console.log("Start submitPayment()")

      // CF: TO FIGURE OUT
      // Do the customer/payment_intent here???? ---->> ClientSecret
      //   idea: execute this to a CF API - so theres no page refresh
      //      CF side: CF Lib, Java lib, Azure API


      stripe.confirmCardPayment(clientSecret, {
        // Docs: "Use off_session if your customer may or may not be present in your checkout flow."
        setup_future_usage: "off_session",
        payment_method: {
          card: card,
        }
      }).then(function (result) {
        console.log(`confirmCardPayment Completed`)
        if (result.error) {
          // Show error to your customer (e.g., insufficient funds)
          console.log(`confirmCardPayment ErrorMessage: ${result.error.message}, Result: ${JSON.stringify(result)}`);
        } else {
          console.log(`confirmCardPayment Success`)
          // The payment has been processed!
          if (result.paymentIntent.status === 'succeeded') {
            console.log(`confirmCardPayment Status: Succeeded`)
            // Show a success message to your customer
            // There's a risk of the customer closing the window before callback
            // execution. Set up a webhook or plugin to listen for the
            // payment_intent.succeeded event that handles any business critical
            // post-payment actions.

            //storePaymentIntent(result.paymentIntent)
          }
        }
      }).catch(function (e) {
        console.log(`confirmCardPayment Catch ${e}`);
      });
    }

    function storePaymentIntent(paymentIntent) {
      console.log(`Start fetch POST /payments/provider/stripe/payment-intent-complete. Body: ${JSON.stringify(paymentIntent)}`)
      fetch('/payments/provider/stripe/payment-intent-complete', {
        method: 'POST',
        cache: 'no-cache',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(paymentIntent)
      }).then(function (res) {
        console.log(`End POST /payments/provider/stripe/payment-intent-complete - Status: ${res.status}`)
        // MUST REDIRECT to NEW PAGE + PREVENT USER FROM CLICKING BUTTON AGAIN!
      }).catch(function (e) {
        console.log(`End POST /payments/provider/stripe/payment-intent-complete - Error: ${e}`)
      });
    }

  </script>
  <style>
    .payment-form {
      width: 400px;
      border-style: solid;
    }
  </style>

</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<title>This is the title of the webpage!</title>
	<script src="https://js.stripe.com/v3/"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	</head>

	<body>
	<p>This is an example paragraph. Anything in the <strong>body</strong> tag will appear on the page, just like this
	<strong>p</strong> tag and its contents.</p>

	<input type="text" id="clientSecretInput" placeholder="client secret input" /><br><p id="clientSecretShow"></p> <br>

	<form id="payment-form" onsubmit="submitPayment(event)" class="payment-form">
	<div id="card-element">
	<!-- Elements will create input elements here -->
	</div>

	<!-- We'll put the error messages in this element -->
	<div id="card-errors" role="alert"></div>

	<button id="submit">Pay</button>
	</form>

	<script>
	var stripe = Stripe('pk_test_key');
	var elements = stripe.elements();

	var style = {
	base: {
	color: "#32325d",
	}
	};
	document.getElementById('clientSecretInput').addEventListener('change', function (e) {
	clientSecret = e.target.value;
	document.getElementById('clientSecretShow').innerHTML = clientSecret;
	});

	// a global
	var card = elements.create("card", { style: style });
	card.mount("#card-element");

	var clientSecret = null;

	function submitPaymentIntent() {
	console.log("submitPaymentIntent() clicked")

	const customerInfo = {
	first_name: "first",
	last_name: "last",
	email: "",
	address: {
	// required
	line1: "123 Main St",
	line2: "Apt 2",
	city: "Nowhere",
	state: "AK",
	postal_code: "90299",
	// Two-letter country code (ISO 3166-1 alpha-2).
	country: "us",
	},
	phone: "123-234-2345"
	};

	const products = [
	1, 2, 3
	];

	const body = JSON.stringify({
	customerInfo,
	products,
	})
	}

	function submitPayment(e) {
	e.preventDefault()
	console.log("Start submitPayment()")

	// CF: TO FIGURE OUT
	// Do the customer/payment_intent here???? ---->> ClientSecret
	// idea: execute this to a CF API - so theres no page refresh
	// CF side: CF Lib, Java lib, Azure API



	stripe.confirmCardPayment(clientSecret, {
	// Docs: "Use off_session if your customer may or may not be present in your checkout flow."
	setup_future_usage: "off_session",
	payment_method: {
	card: card,
	}
	}).then(function (result) {
	console.log(`confirmCardPayment Completed`)
	if (result.error) {
	// Show error to your customer (e.g., insufficient funds)
	console.log(`confirmCardPayment ErrorMessage: ${result.error.message}, Result: ${JSON.stringify(result)}`);
	} else {
	console.log(`confirmCardPayment Success`)
	// The payment has been processed!
	if (result.paymentIntent.status === 'succeeded') {
	console.log(`confirmCardPayment Status: Succeeded`)
	// Show a success message to your customer
	// There's a risk of the customer closing the window before callback
	// execution. Set up a webhook or plugin to listen for the
	// payment_intent.succeeded event that handles any business critical
	// post-payment actions.

	//storePaymentIntent(result.paymentIntent)
	}
	}
	}).catch(function (e) {
	console.log(`confirmCardPayment Catch ${e}`);
	});
	}

	function storePaymentIntent(paymentIntent) {
	console.log(`Start fetch POST /payments/provider/stripe/payment-intent-complete. Body: ${JSON.stringify(paymentIntent)}`)
	fetch('/payments/provider/stripe/payment-intent-complete', {
	method: 'POST',
	cache: 'no-cache',
	headers: {
	'Content-Type': 'application/json',
	},
	body: JSON.stringify(paymentIntent)
	}).then(function (res) {
	console.log(`End POST /payments/provider/stripe/payment-intent-complete - Status: ${res.status}`)
	// MUST REDIRECT to NEW PAGE + PREVENT USER FROM CLICKING BUTTON AGAIN!
	}).catch(function (e) {
	console.log(`End POST /payments/provider/stripe/payment-intent-complete - Error: ${e}`)
	});
	}

	</script>
	<style>
	.payment-form {
	width: 400px;
	border-style: solid;
	}
	</style>

	</body>

	</html>