Notes

Notes - notes.io

index.html #########################################
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title data-tid="elements_examples.meta.title">Payments</title>
<meta data-tid="elements_examples.meta.description" name="description" content="Build beautiful, smart checkout flows">

<link rel="shortcut icon" href="{% static 'favicon.ico' %}">
<link rel="apple-touch-icon-precomposed" href="{% static 'apple-touch-icon/180x180.png' %}">
<link rel="icon" href="{% static 'apple-touch-icon/180x180.png' %}">

<script src="https://js.stripe.com/v3/"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10/dist/sweetalert2.min.css">
<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="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<style>
body {
background-color: #f8f9fa; /* Set a light background color */
}

.globalContent {
background-color: #f8f9fa;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

.example.example5 {
background-color: #fff; /* Set a white background for the form */
border-radius: 8px; /* Add some border radius for rounded corners */
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow for depth */
max-width: 400px; /* Adjust the maximum width as needed */
margin: 50px auto; /* Center the form on the page */
padding: 20px; /* Add some padding for spacing */
}

.example.example5 fieldset {
border: 1px solid #e1e1e1; /* Add a border for separation */
padding: 15px;
border-radius: 6px;
margin-bottom: 20px;
}

.example.example5 fieldset legend {
font-size: 16px;
font-weight: bold;
color: #333;
background-color: #f8f9fa; /* Set a light background color for the legend */
padding: 5px 10px;
border-radius: 4px;
}

.example.example5 label {
color: #555; /* Set a darker color for labels */
}

.example.example5 .input {
background-color: #f8f9fa; /* Set a light background color for input fields */
border: 1px solid #ced4da; /* Add a border to input fields */
padding: 10px;
border-radius: 4px;
margin-bottom: 10px;
transition: border-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
width: 100%; /* Make input fields full width */
}

.example.example5 button {
background-color: #007bff; /* Set a primary color for the button */
color: #fff; /* Set text color to white */
border: none;
padding: 10px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
width: 100%; /* Make button full width */
}

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

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

.example.example5 .error .message {
color: #dc3545; /* Set a red color for error messages */
}

.example.example5 .success .icon .border {
stroke: #28a745; /* Set a green color for the success icon border */
}

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

.example.example5 .success .title {
color: #28a745; /* Set a green color for success titles */
}

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

.example.example5 .row {
margin-bottom: 15px;
}

.example.example5 .col-md-6 {
padding-right: 15px;
padding-left: 15px;
}

.example.example5 .card-element-container {
margin-bottom: 20px;
width: 100%;
}

.example.example5 .card-element {
border: 1px solid #ced4da;
padding: 10px;
border-radius: 4px;
width: 100%;
}

.example.example5 .card-element label {
display: block;
margin-bottom: 10px;
}
</style>
</head>
<body>

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


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

</div>
<h3 class="center text-center mb-4">{{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="col-md-6 mb-3">
<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 form-control" type="text" placeholder="Jane Doe"
required="">
</div>
<div class="col-md-6 mb-3">
<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 form-control" name="email" type="text"
placeholder="[email protected]" required="" autocomplete="email"
value="{{request.user.email}}" {% if request.user.email %}readonly{% endif %}>
</div>
</div>

<div class="mb-3">
<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 form-control" type="text" placeholder="(941) 555-0123" required=""
autocomplete="tel">
</div>

<div class="card-element-container">
<label for="example5-card" data-tid="elements_examples.form.card_label">Card</label>
<div id="example5-card" class="card-element"></div>
</div>
<div data-locale-reversible>
<div class="mb-3">
<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 form-control" type="text" placeholder="185 Berry St" required=""
autocomplete="address-line1">
</div>
<div class="row">
<div class="col-md-4 mb-3">
<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 form-control" type="text" placeholder="San Francisco"
required="" autocomplete="address-level2">
</div>
<div class="col-md-4 mb-3">
<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 form-control empty" type="text" placeholder="CA" required=""
autocomplete="address-level1">
</div>
<div class="col-md-4 mb-3">
<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 form-control empty" type="text" placeholder="94107" required=""
autocomplete="postal-code">
</div>
</div>
<button type="submit" class="btn btn-primary"
data-tid="elements_examples.form.pay_button">Pay {{product.product_price}} {{product.product_currency}}</button>
</fieldset>
</form>
</div>
</section>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<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-4').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>
</body>
</html>
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:
stripe.Customer.create(
name=user_username,
email=user_email,
)

intent = stripe.PaymentIntent.create(
amount=int(math.ceil(product.product_price * 100)),
currency=product.product_currency,
description=product.product_description,

)

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"),

checkout.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