Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
267 lines (227 sloc) 7.5 KB
{% extends 'base.html' %}
{% block content %}
<div class="app-container-60 register">
<h3 class="header-uppercase header-white header-margin-bottom">
{{ productName }}
</h3>
<form id="payment-form">
<div class="card">
<div class="card-body">
<div class="card-title">
<h4 class="header-uppercase header-blue">
{{ plan.nickname }}
</h4>
<h2 class="price">{{ plan.amount }}
<span>
/
{% if (plan.interval_count > 1) %}
{{ plan.interval_count }} {{ plan.interval }}s
{% else %}
{{ plan.interval }}
{% endif %}
</span>
</h2>
</div>
<!-- INPUTS -->
<input id="plan" type="hidden" value="{{ plan.formatted }}" name="plan"/>
<input id="customerName"
name="name"
required="true"
placeholder="Name" />
<input id="customerEmail"
name="email"
type="email"
required="true"
placeholder="Email"/>
<div id="card-element">
<!-- Stripe Elements will be mounted here -->
</div>
<div id="card-errors" role="alert">
<!-- Any Stripe Elements error messages will be mounted here -->
</div>
</div>
<!-- FORM SUBMISSION -->
<button
class="card-btn"
type="submit">Pay Now</button>
</div>
</form>
<!-- LOADING STATE -->
<div id="loading" class="card card-centered hide">
<div class="card-body">
<div>
<div class="loader"></div>
</div>
<h3 class="header-blue">Processing <br> your payment...</h3>
<p class="helper-text">Please wait a few minutes!</p>
</div>
</div>
<!-- SUCCESS STATE -->
<div id="success" class="card card-centered hide">
<div class="card-body">
<i class="success-icon fas fa-check-circle"></i>
<h3 class="header-blue">
Congrats, you’ve <br> successfully registered!
</h3>
<p class="helper-text">
Log in to the app to start creating your first survey!
</p>
</div>
<a href="/" class="card-btn">
Log In
</a>
</div>
<!-- ERROR STATE -->
<div id="error" class="card card-centered hide">
<div class="card-body">
<i class="error-icon fas fa-exclamation-circle"></i>
<h3 class="header-red">
Sorry, it looks like <br> something went wrong
</h3>
<p class="helper-text">
Please contact us or try again.
</p>
</div>
<a href="/" class="card-btn">
Contact Us
</a>
</div>
</div>
<!-- JAVASCRIPT HERE -->
<script>
/* Replace with Publishable Stripe Key */
var stripe = Stripe('pk_test_***********************');
/* INITIALIZE STRIPE ELEMENTS */
/* To use certain web fonts, load in source */
var elements = stripe.elements({
fonts: [
{
cssSrc: 'https://fonts.googleapis.com/css?family=Mukta:400,600,700&display=swap',
}
],
});
/* Set up styles for your Stripe Elements instance --
* To make it match your site's design
*/
var elementsStyles = {
base: {
color: "#004ABB",
iconColor: "#004ABB",
fontFamily: "'Mukta', Helvetica, sans-serif",
fontWeight: "600",
fontSmoothing: "antialiased",
fontSize: "16px",
"::placeholder": {
color: "#6099EE",
textTransform: "uppercase",
},
},
invalid: {
color: "#ff5252",
iconColor: "#ff5252",
},
};
/* HELPER FUNCTIONS */
/* Display error within "#card-errors" div */
function displayError(error) {
var cardError = document.getElementById('card-errors');
cardError.textContent = error ? error.message : '';
}
/* Show element specified by the "id" parameter
* Hide all other "states"
*/
function showState(id) {
document.getElementById('payment-form').classList.add('hide');
document.getElementById('loading').classList.add('hide');
document.getElementById('success').classList.add('hide');
document.getElementById('error').classList.add('hide');
document.getElementById(id).classList.remove('hide');
}
/* MORE STRIPE ELEMENTS ACTIONS */
/* Create "card" instance of Stripe Elements and mount it to "#card-element" div */
var cardElement = elements.create("card", { style: elementsStyles });
cardElement.mount("#card-element");
/* Set up event listeners on card */
cardElement.addEventListener('change', ({error}) => {
displayError(error);
});
/* FORM SUBMISSION */
var form = document.getElementById('payment-form');
form.addEventListener('submit', (event) => {
event.preventDefault(); // Prevent the default form submission
const customerName = document.getElementById('customerName').value;
const customerEmail = document.getElementById('customerEmail').value;
/* Create your 'card' payment method */
stripe.createPaymentMethod({
type: 'card',
card: cardElement,
/* Reference: https://stripe.com/docs/api/payment_methods/create#create_payment_method-billing_details */
billing_details: {
name: customerName,
email: customerEmail,
// address
// phone
},
}).then((result) => {
if (result.error) {
displayError(result.error);
console.error('Error creating Stripe Payment Method: ', result.error);
} else {
/* Proceed to next step of creating customer and subscription */
stripePaymentMethodHandler(result.paymentMethod);
}
});
});
function stripePaymentMethodHandler(paymentMethod) {
showState('loading'); // Show loader
fetch('/handlePayment', {
method: 'post',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
email: document.getElementById('customerEmail').value,
name: document.getElementById('customerName').value,
plan: document.getElementById('plan').value,
paymentMethodId: paymentMethod.id,
}),
}).then((response) => {
/* Can only call response.json() once, otherwise you will get an error */
return response.json();
}).then((parsedResponse) => {
/* Proceed to next step of checking Payment Intent status */
manageSubscriptionStatus(parsedResponse.subscription);
}).catch((err) => {
console.error('Error creating subscription:', err);
showState('error'); // Show error state
});
}
function manageSubscriptionStatus(subscription) {
const { latest_invoice } = subscription;
const { payment_intent } = latest_invoice;
if (payment_intent) {
/* Do NOT share or embed your client_secret anywhere */
const { client_secret, status } = payment_intent;
if (status === "requires_action" || status === "requires_payment_method") {
stripe.confirmCardPayment(client_secret)
.then((result) => {
if (result.error) {
showState('payment-form');
displayError(result.error); // Display error message to customer
} else {
showState('success'); // Show success state
}
}).catch((err) => {
console.error('Error confirming card payment:', err);
showState('error'); // Show error state
});
} else {
showState('success'); // Show success state
}
} else {
/* If no payment intent exists, show the success state
* Usually in this case if you set up a trial with the subscription
*/
showState('success');
}
}
</script>
{% endblock %}
You can’t perform that action at this time.