Skip to content

Commit

Permalink
payments wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@TomConner
TomConner committed Nov 15, 2023
1 parent e024bde commit 99cd239
Show file tree
Hide file tree
Showing 3 changed files with 82 additions and 56 deletions.
20 changes: 10 additions & 10 deletions generator/content/pay-online/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,13 @@

<link rel="stylesheet" href="/css/stripe-base.css" />
<script src="https://js.stripe.com/v3/"></script>

<script src="/js/utils.js" defer></script>
<script src="/js/stripe-payment.js" defer></script>
</head>
<body>
<main>
<h1>Stripe Payment</h1>
<h1>Register for Tree Pickup</h1>

<p>Pay for Tree Pickup using Stripe</p>
<!-- <p>Pay for Tree Pickup using Stripe</p> -->

<form id="payment-form">
<div id="link-authentication-element">
Expand All @@ -25,16 +23,18 @@ <h1>Stripe Payment</h1>
<div id="address-element">
<!-- Elements will create address element here -->
</div>
<div id="payment-element">
<!-- Elements will create form elements here -->
</div>
<button id="submit">Pay now</button>

<section id="section-pay-stripe">
<div id="payment-element">
<!-- Elements will create form elements here -->
</div>
</section>
<button id="button-pay-now" disabled="true">Pay now</button>
<button id="button-pay-later" disabled="true">Register now, pay later</button>
<div id="error-message">
<!-- Display error message to your customers here -->
</div>
</form>

<div id="messages" role="alert" style="display: none;"></div>
</main>
</body>
</html>
101 changes: 72 additions & 29 deletions generator/static/js/stripe-payment.js
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,109 @@
say = (message) => {
console.log('stripe payment: ' + message)
}

document.addEventListener('DOMContentLoaded', async () => {
// Load the publishable key from the server. The publishable key
// is set in your .env file.
const {publishableKey} = await fetch('/config').then((r) => r.json());
if (!publishableKey) {
addMessage(
'No publishable key returned from the server. Please check `.env` and try again'
);
alert('Please set your Stripe publishable API key in the .env file');
say('no publishableKey');
}

const stripe = Stripe(publishableKey, {
apiVersion: '2020-08-27',
});

// On page load, we create a PaymentIntent on the server so that we have its clientSecret to
// On page load, create a PaymentIntent on the server so that we have its clientSecret to
// initialize the instance of Elements below. The PaymentIntent settings configure which payment
// method types to display in the PaymentElement.
//
const {
error: backendError,
clientSecret
} = await fetch('/create-payment-intent').then(r => r.json());
if (backendError) {
addMessage(backendError.message);
say(backendError.message);
}
addMessage(`Client secret returned.`);
say(`client secret returned`);

// Initialize Stripe Elements with the PaymentIntent's clientSecret,
// then mount the payment element.
const elements = stripe.elements({ clientSecret });
const addressElement = elements.create('address', { mode: 'billing' });
addressElement.mount('#address-element');
addMessage(`address.`);
const paymentElement = elements.create('payment');
paymentElement.mount('#payment-element');
// Create and mount the linkAuthentication Element to enable autofilling customer payment details
// Initialize Stripe Elements with the PaymentIntent's clientSecret
//
const loader = 'auto';
const elements = stripe.elements({ clientSecret, loader });

// Create and mount the linkAuthentication Element to enable
// autofilling customer payment details
//
const linkAuthenticationElement = elements.create("linkAuthentication");
linkAuthenticationElement.mount("#link-authentication-element");
say(`link mounted`);

// TODO default email
// If the customer's email is known when the page is loaded, you can
// pass the email to the linkAuthenticationElement on mount:
//
linkAuthenticationElement.mount("#link-authentication-element", {
defaultValues: {
email: '[email protected]',
// linkAuthenticationElement.mount("#link-authentication-element", {
// defaultValues: {
// email: '[email protected]',
// }
// })

// Obtain the email entered
//
// linkAuthenticationElement.on('change', (event) => {
// const email = event.value.email;
// console.log({ email });
// console.log(event);
// // TODO save email when committed
// })

// Get a reference to the payment form and its sections
//
const form = document.getElementById('payment-form');
const buttonPayNow = document.getElementById('button-pay-now');
const buttonPayLater = document.getElementById('button-pay-later');
const sectionPayStripe = document.getElementById('section-pay-stripe');
const stripeError = document.getElementById('error-message');

// Create and mount the address element
//
const options = { mode: 'billing' };
const addressElement = elements.create('address', options);
addressElement.mount('#address-element');
say(`address mounted`);

enableButtonsWhenReady = () => {
// TODO conditional on both email and address
buttonPayLater.disabled = false;
buttonPayNow.disabled = false;
}

// Buffer address
addressElement.on('change', (event) => {
if (event.complete){
enableButtonsWhenReady();
// Extract potentially complete address
const address = event.value.address;
say("" + address);

}
})
// If you need access to the email address entered:

// Show Stripe payment fields if user so chooses
//
linkAuthenticationElement.on('change', (event) => {
const email = event.value.email;
console.log({ email });
console.log(event);
})
const paymentElement = elements.create('payment');
paymentElement.mount('#payment-element');

// When the form is submitted...
const form = document.getElementById('payment-form');
let submitted = false;
form.addEventListener('submit', async (e) => {
e.preventDefault();

// Disable double submission of the form
if(submitted) { return; }
submitted = true;
form.querySelector('button').disabled = true;
buttonPayNow.disabled = true;

const nameInput = document.querySelector('#name');

Expand All @@ -71,7 +113,8 @@ document.addEventListener('DOMContentLoaded', async () => {
const {error: stripeError} = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: `${window.location.origin}/return.html`,
// TODO return page
return_url: `${window.location.origin}/return.html`,
}
});

Expand All @@ -80,7 +123,7 @@ document.addEventListener('DOMContentLoaded', async () => {

// reenable the form.
submitted = false;
form.querySelector('button').disabled = false;
buttonPayNow.disabled = false;
return;
}
});
Expand Down
17 changes: 0 additions & 17 deletions generator/static/js/utils.js
View file

This file was deleted.

0 comments on commit 99cd239

Please sign in to comment.