forked from mjahmad1/dream
-
Notifications
You must be signed in to change notification settings - Fork 0
/
d2.html
148 lines (135 loc) · 5.87 KB
/
d2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>أهلا وسهلا بك في موقعي</title>
<!-- Existing styles... -->
<style>
/* Donation Section Styles */
.donation-section {
background-color: #f7f7f7; /* Light grey background */
padding: 40px; /* Padding around the donation section */
text-align: center; /* Center align the content */
}
.donation-options {
margin: 20px auto; /* Center the options */
display: flex; /* Use flexbox for layout */
justify-content: center; /* Center the items horizontally */
gap: 20px; /* Space between the items */
}
.donation-button {
padding: 10px 20px; /* Padding inside the button */
font-size: 1em; /* Font size for the button text */
cursor: pointer; /* Cursor style when hovering over the button */
border: none; /* No border for the button */
background-color: #008CBA; /* Blue background for the button */
color: white; /* White text for the button */
}
// Modify your existing donateNow click event handler
document.getElementById('donateNow').addEventListener('click', function() {
// Get the selected amount from the selected donation button or the custom amount input
var selectedAmount = document.querySelector('.donation-button.selected')?.getAttribute('data-amount') || document.getElementById('customAmount').value;
// Check if the selected amount is not empty or null
if (selectedAmount && selectedAmount.trim() !== '') {
console.log('Selected donation amount: ' + selectedAmount + ' Tk');
// Redirect to Stripe checkout page with the selected amount
stripe.redirectToCheckout({
lineItems: [{ price: 'price_ID', quantity: 1 }], // Replace 'price_ID' with your actual price ID
mode: 'payment',
successUrl: window.location.protocol + '//' + window.location.host + '/success.html', // Replace with your success URL
cancelUrl: window.location.protocol + '//' + window.location.host + '/cancel.html', // Replace with your cancel URL
}).then(function (result) {
if (result.error) {
// If `redirectToCheckout` fails due to a browser or network
// error, display the localized error message to your customer.
alert(result.error.message);
}
});
} else {
// If no amount is selected, alert the user and do not proceed to checkout
alert('Please select an amount to donate.');
}
});
<script src="https://js.stripe.com/v3/"></script>
/* Responsive styles... */
</style>
</head>
<body>
<!-- Existing content... -->
<!-- Donation Section -->
<div class="donation-section">
<h2>تبرع الآن</h2>
<div class="donation-options">
<button class="donation-button" data-amount="200">200 Tk</button>
<button class="donation-button" data-amount="500">500 Tk</button>
<button class="donation-button" data-amount="1000">1000 Tk</button>
</div>
<button id="donateNow" class="donation-button">Donate Now</button>
</div>
<script src="https://js.stripe.com/v3/"></script>
<script>
// Initialize Stripe with your publishable key
var stripe = Stripe('pk_test_51NSjLzHI6KpMDN4wCyCp6BsIXUIppX284VFnQmyln0GP8GxR0isD6uzBZVGCCl14l6rpud2QVffXQZMuZe6aYJ7F00hfCpDvBk');
// Handle the donation button click
document.getElementById('donateNow').addEventListener('click', function() {
// Function to update the displayed amount and handle the selected class
function updateDisplayedAmount(amount, button) {
document.getElementById('donateNow').innerText = 'Donate ' + amount + ' Tk';
// Remove selected class from all buttons
var donationButtons = document.querySelectorAll('.donation-button');
donationButtons.forEach(function(btn) {
btn.classList.remove('selected');
});
// Add selected class to the clicked button
button.classList.add('selected');
}
// Event listeners for the donation buttons
var donationButtons = document.querySelectorAll('.donation-button');
donationButtons.forEach(function(button) {
button.addEventListener('click', function() {
var amount = this.getAttribute('data-amount');
updateDisplayedAmount(amount, this); // Pass the clicked button as well
});
});
// Event listener for the custom amount input
document.getElementById('customAmount').addEventListener('input', function() {
var amount = this.value;
updateDisplayedAmount(amount); // Update the display
});
// Modify the existing donateNow click event handler
document.getElementById('donateNow').addEventListener('click', function() {
// Get the selected amount from the selected donation button or the custom amount input
var selectedAmount = document.querySelector('.donation-button.selected')?.getAttribute('data-amount') || document.getElementById('customAmount').value;
// Check if the selected amount is not empty or null
if (selectedAmount && selectedAmount.trim() !== '') {
console.log('Selected donation amount: ' + selectedAmount + ' Tk');
// Redirect to Stripe checkout page with the selected amount
stripe.redirectToCheckout({
lineItems: [{ price: 'price_ID', quantity: 1 }], // Replace 'price_ID' with your actual price ID
mode: 'payment',
successUrl: window.location.protocol + '//' + window.location.host + '/success.html', // Replace with your success URL
cancelUrl: window.location.protocol + '//' + window.location.host + '/cancel.html', // Replace with your cancel URL
}).then(function (result) {
if (result.error) {
// If `redirectToCheckout` fails due to a browser or network
// error, display the localized error message to your customer.
alert(result.error.message);
}
});
} else {
// If no amount is selected, alert the user and do not proceed to checkout
alert('Please select an amount to donate.');
}
});
// You can customize this part to redirect to your Stripe checkout page
// For now, it just logs the selected amount to the console
var selectedAmount = document.querySelector('.donation-button[data-amount].selected')?.getAttribute('data-amount') || '200';
console.log('Selected donation amount: ' + selectedAmount + ' Tk');
// Redirect to Stripe checkout page
// stripe.redirectToCheckout({ ... });
});
</script>
<!-- Existing content... -->
</body>
</html>