Notes

Notes - notes.io

views.py ############################
def index(request,product_id):
product=Products.objects.get(product_id=product_id)
return render(request,'index.html',{'product':product})

@csrf_exempt
def charge_card(request):
try:
user_email=request.user.email
user_username=request.user.username
if request.method == 'POST':
data = json.loads(request.body)
product_name = data['plan_name']
address=data['address']
product=Products.objects.get(product_name__iexact=product_name)
try:
intent = stripe.PaymentIntent.create(
amount=int(math.ceil(product.product_price * 100)),
currency=product.product_currency,
description=product.product_description,
)
stripe.Customer.create(
name=user_username,
email=user_email,
address={
"line1": address,
"postal_code": "98140",
"city": "San Francisco",
"state": "CA",
"country": "US",
},
)

return JsonResponse({'client_secret': intent.client_secret})
except stripe.error.StripeError as e:
return JsonResponse({'error': str(e)})
else:
return JsonResponse({'error': 'Invalid request method'})
except Exception as e:
return JsonResponse({'error':'An error occurred'+str(e)})

urls.py ####################################
path('index/<str:product_id>/',views.index,name="index"),
path('charge-card/',views.charge_card,name="charge-card"),

index.html ###################################

{% load static %}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title data-tid="elements_examples.meta.title">Stripe Elements: Build beautiful, smart checkout flows</title>
<meta data-tid="elements_examples.meta.description" name="description" content="Build beautiful, smart checkout flows.">

<link rel="shortcut icon" href="img/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon/180x180.png">
<link rel="icon" href="img/apple-touch-icon/180x180.png">

<script src="https://js.stripe.com/v3/"></script>
{% comment %} <script src="{% static 'index.js' %}" data-rel-js></script> {% endcomment %}

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">

<link rel="stylesheet" href="{% static 'base.css' %}" data-rel-css="" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<link rel="stylesheet" href="{% static 'example5.css' %}" data-rel-css="" />
</head>
<body>

<div class="globalContent">
<main>
<section class="container-lg">


<div class="cell example example5" id="example-5">
<form method="post" action="{% url 'charge-card' %}">
<div id="example5-paymentRequest">

</div>
<h3 class="center text-center mb-2">{{product.product_name}}</h3>
<fieldset>
<legend class="card-only" data-tid="elements_examples.form.pay_with_card">Pay with card</legend>
<div class="row">
<div class="field">
<label for="example5-name" data-tid="elements_examples.form.name_label">Name</label>
<input id="example5-name" data-tid="elements_examples.form.name_placeholder" name="name" class="input" type="text" placeholder="Jane Doe" required="" >
</div>
</div>
<div class="row">
<div class="field">
<label for="example5-email" data-tid="elements_examples.form.email_label">Email</label>
<input id="example5-email" data-tid="elements_examples.form.email_placeholder" class="input" name="email" type="text" placeholder="[email protected]" required="" autocomplete="email" value={{request.user.email}} {% if request.user.email %}readonly{% endif %}>
</div>
<div class="field">
<label for="example5-phone" data-tid="elements_examples.form.phone_label">Phone</label>
<input id="example5-phone" data-tid="elements_examples.form.phone_placeholder" class="input" type="text" placeholder="(941) 555-0123" required="" autocomplete="tel">
</div>
</div>
<div data-locale-reversible>
<div class="row">
<div class="field">
<label for="example5-address" data-tid="elements_examples.form.address_label">Address</label>
<input id="example5-address" data-tid="elements_examples.form.address_placeholder" class="input" type="text" placeholder="185 Berry St" required="" autocomplete="address-line1">
</div>
</div>
<div class="row" data-locale-reversible>
<div class="field">
<label for="example5-city" data-tid="elements_examples.form.city_label">City</label>
<input id="example5-city" data-tid="elements_examples.form.city_placeholder" class="input" type="text" placeholder="San Francisco" required="" autocomplete="address-level2">
</div>
<div class="field">
<label for="example5-state" data-tid="elements_examples.form.state_label">State</label>
<input id="example5-state" data-tid="elements_examples.form.state_placeholder" class="input empty" type="text" placeholder="CA" required="" autocomplete="address-level1">
</div>
<div class="field">
<label for="example5-zip" data-tid="elements_examples.form.postal_code_label">ZIP</label>
<input id="example5-zip" data-tid="elements_examples.form.postal_code_placeholder" class="input empty" type="text" placeholder="94107" required="" autocomplete="postal-code">
</div>
</div>
</div>
<div class="row">
<div class="field">
<label for="example5-card" data-tid="elements_examples.form.card_label">Card</label>
<div id="example5-card" class="input"></div>
</div>
</div>
<button type="submit" data-tid="elements_examples.form.pay_button">Pay {{product.product_price}} {{product.product_currency}}</button>
</fieldset>
<div class="error" role="alert"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17">
<path class="base" fill="#000" d="M8.5,17 C3.80557963,17 0,13.1944204 0,8.5 C0,3.80557963 3.80557963,0 8.5,0 C13.1944204,0 17,3.80557963 17,8.5 C17,13.1944204 13.1944204,17 8.5,17 Z"></path>
<path class="glyph" fill="#FFF" d="M8.5,7.29791847 L6.12604076,4.92395924 C5.79409512,4.59201359 5.25590488,4.59201359 4.92395924,4.92395924 C4.59201359,5.25590488 4.59201359,5.79409512 4.92395924,6.12604076 L7.29791847,8.5 L4.92395924,10.8739592 C4.59201359,11.2059049 4.59201359,11.7440951 4.92395924,12.0760408 C5.25590488,12.4079864 5.79409512,12.4079864 6.12604076,12.0760408 L8.5,9.70208153 L10.8739592,12.0760408 C11.2059049,12.4079864 11.7440951,12.4079864 12.0760408,12.0760408 C12.4079864,11.7440951 12.4079864,11.2059049 12.0760408,10.8739592 L9.70208153,8.5 L12.0760408,6.12604076 C12.4079864,5.79409512 12.4079864,5.25590488 12.0760408,4.92395924 C11.7440951,4.59201359 11.2059049,4.59201359 10.8739592,4.92395924 L8.5,7.29791847 L8.5,7.29791847 Z"></path>
</svg>
<span class="message"></span></div>
</form>
<div class="success">
<div class="icon">
<svg width="84px" height="84px" viewBox="0 0 84 84" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle class="border" cx="42" cy="42" r="40" stroke-linecap="round" stroke-width="4" stroke="#000" fill="none"></circle>
<path class="checkmark" stroke-linecap="round" stroke-linejoin="round" d="M23.375 42.5488281 36.8840688 56.0578969 64.891932 28.0500338" stroke-width="4" stroke="#000" fill="none"></path>
</svg>
</div>
<a class="reset" href="#">
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path fill="#000000" d="M15,7.05492878 C10.5000495,7.55237307 7,11.3674463 7,16 C7,20.9705627 11.0294373,25 16,25 C20.9705627,25 25,20.9705627 25,16 C25,15.3627484 24.4834055,14.8461538 23.8461538,14.8461538 C23.2089022,14.8461538 22.6923077,15.3627484 22.6923077,16 C22.6923077,19.6960595 19.6960595,22.6923077 16,22.6923077 C12.3039405,22.6923077 9.30769231,19.6960595 9.30769231,16 C9.30769231,12.3039405 12.3039405,9.30769231 16,9.30769231 L16,12.0841673 C16,12.1800431 16.0275652,12.2738974 16.0794108,12.354546 C16.2287368,12.5868311 16.5380938,12.6540826 16.7703788,12.5047565 L22.3457501,8.92058924 L22.3457501,8.92058924 C22.4060014,8.88185624 22.4572275,8.83063012 22.4959605,8.7703788 C22.6452866,8.53809377 22.5780351,8.22873685 22.3457501,8.07941076 L22.3457501,8.07941076 L16.7703788,4.49524351 C16.6897301,4.44339794 16.5958758,4.41583275 16.5,4.41583275 C16.2238576,4.41583275 16,4.63969037 16,4.91583275 L16,7 L15,7 L15,7.05492878 Z M16,32 C7.163444,32 0,24.836556 0,16 C0,7.163444 7.163444,0 16,0 C24.836556,0 32,7.163444 32,16 C32,24.836556 24.836556,32 16,32 Z"></path>
</svg>
</a>
</div>
</div>
</section>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var stripe = Stripe('pk_test_51OIV6fSGmrAKsx7GXFEv00eSaal1As48EkDVJ4nxAoqp09VrNebs5mmlgSuvPAGwdCPI1SejPfuxMwPCCkZySiks00CXic6hSI');
var elements = stripe.elements();
var card = elements.create('card');
var productName = document.querySelector('.center.text-center.mb-2').innerText;

card.mount('#example5-card');

var form = document.querySelector('form');
var submitButton = form.querySelector('button');

form.addEventListener('submit', function (event) {
event.preventDefault();

// Disable the submit button and show loading spinner
submitButton.disabled = true;
submitButton.innerHTML = '<span class="loading-spinner"></span>Loading...';

// Fetch client secret from your server
fetch('/charge-card/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
plan_name: productName,
address: document.getElementById('example5-address').value,
}), // Adjust the amount as needed
})
.then(function (response) {
return response.json();
})
.then(function (data) {
var clientSecret = data.client_secret;

// Confirm the PaymentIntent on the client side
stripe.confirmCardPayment(clientSecret, {
payment_method: {
card: card,
billing_details: {
// Include billing details if needed
},
},
}).then(function (confirmationResult) {
// Enable the submit button back
submitButton.disabled = false;
submitButton.innerHTML = 'Pay {{product.product_price}} {{product.product_currency}}';

if (confirmationResult.error) {
// Handle payment confirmation error
console.error(confirmationResult.error.message);
} else {
// Payment succeeded, show SweetAlert
Swal.fire({
title: 'Payment Successful',
text: 'Thanks for your payment!',
icon: 'success',
confirmButtonText: 'OK',
allowOutsideClick: false, // Prevent clicking outside the alert to close
}).then((result) => {
if (result.isConfirmed) {
// Redirect or perform any action after the user clicks OK
window.location.href = '{% url "home" %}';
}
});
}
});
});
});
});
</script>


{% comment %} <script src="{% static 'l10n.js' %}" data-rel-js></script> {% endcomment %}


{% comment %} <script src="{% static 'example5.js' %}" data-rel-js></script> {% endcomment %}


</body>
</html>

base.css ####################################
* {
box-sizing: border-box;
}

body {
overflow-x: hidden;
background-color: #f6f9fc;
font-family: "Roboto", "Open Sans", "Segoe UI", sans-serif;
font-size: 16px;
line-height: 1.6;
color: #32325d;
}

main {
position: relative;
display: block;
z-index: 1;
}

.container-lg {
max-width: 600px;
margin: 0 auto;
}

.example {
display: flex;
flex-direction: column;
align-items: center;
border-radius: 8px;
box-shadow: 0 0 20px rgba(50, 50, 93, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
padding: 40px;
margin: 50px 0;
}

.example form {
width: 100%;
max-width: 400px;
}

.example fieldset {
border: 1px solid #e1e1e1;
padding: 15px;
border-radius: 6px;
margin-bottom: 20px;
}

.example legend {
font-size: 20px;
font-weight: bold;
color: #32325d;
background-color: #f6f9fc;
padding: 5px 10px;
border-radius: 4px;
}

.example label {
color: #555;
}

.example .input {
background-color: #fff; /* Changed background color */
border: 1px solid #ced4da;
padding: 12px;
border-radius: 4px;
margin-bottom: 15px;
width: 100%;
transition: border-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.example button {
background-color: #6772e5;
color: #fff;
border: none;
padding: 12px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}

.example button:active {
background-color: #43458b;
}

.example .error,
.example .success {
margin-top: 20px;
text-align: center;
}

.example .error .message {
color: #dc3545;
}

.example .success .icon .border {
stroke: #28a745;
}

.example .success .icon .checkmark {
stroke: #fff;
}

.example .success .title {
color: #28a745;
}

.example .success .message {
color: #333;
}
example5.css ##################################################
body {
background-color: #f8f9fa;
}

.example.example5 {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
max-width: 400px;
margin: 50px auto;
padding: 20px;
}

.example.example5 fieldset {
border: 1px solid #e1e1e1;
padding: 15px;
border-radius: 6px;
margin-bottom: 20px;
}

.example.example5 fieldset legend {
font-size: 18px;
font-weight: bold;
color: #007bff; /* Blue color for legend */
background-color: #f8f9fa;
padding: 5px 10px;
border-radius: 4px;
}

.example.example5 label {
color: #555;
}

.example.example5 .input {
background-color: #f8f9fa;
border: 1px solid #007bff; /* Blue border for input fields */
padding: 12px;
border-radius: 4px;
margin-bottom: 15px;
transition: border-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.example.example5 button {
background-color: #007bff;
color: #fff;
border: none;
padding: 12px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease; /* Smooth transition on hover */
}

.example.example5 button:active {
background-color: #0056b3;
}

.example.example5 button:hover {
background-color: #0056b3; /* Darken the color on hover */
}

.example.example5 .error,
.example.example5 .success {
margin-top: 20px;
text-align: center;
}

.example.example5 .error .message {
color: #dc3545;
}

.example.example5 .success .icon .border {
stroke: #28a745;
}

.example.example5 .success .icon .checkmark {
stroke: #fff;
}

.example.example5 .success .title {
color: #28a745;
}

.example.example5 .success .message {
color: #333;
}

checkout.html ##########################
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="{% static 'checkout_style.css' %}">
<script src="https://js.stripe.com/v3/"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>

<div class="demo">
<div class="container">
<div class="row">
{% for plan in plans_data %}
<div class="col-md-3 col-sm-6">
<div class="pricingTable">
<div class="pricingTable-header">
<i class="fa fa-adjust"></i>
<div class="price-value">
{{plan.product_price}} {{plan.product_currency}}
</div>
<div>{{plan.billing_frequency}}</div>
</div>
<h3 class="heading">{{plan.product_name}}</h3>
<div class="pricing-content">
<ul>
<li>{{plan.product_description}}</li>
<li>You Will get <b>{{plan.message_limit}}</b> messages.</li>

</ul>
</div>
<div class="pricingTable-signup">
<a href="{% url 'index' plan.product_id%}" >Subscribe</a>
</div>
</div>
</div>
{% endfor %}

Notes is a web-based application for online taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000+ notes created and continuing...

With notes.io;

* You can take a note from anywhere and any device with internet connection.
* You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
* You can quickly share your contents without website, blog and e-mail.
* You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
* Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.

Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.

Easy: Notes.io doesn’t require installation. Just write and share note!

Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )

Free: Notes.io works for 14 years and has been free since the day it was started.

You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;

Email: [email protected]

Twitter: http://twitter.com/notesio

Instagram: http://instagram.com/notes.io

Facebook: http://facebook.com/notesio

Regards;
Notes.io Team

Notes

Notes - notes.io

Shortened Note Link

Long File

Notes