javascript/apishow.html at main · Dev-Nonso-code/javascript · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
    crossorigin="anonymous"></script>
    <script src="https://checkout.flutterwave.com/v3.js"></script>
    <title>STORE</title>
</head>
<body>
    <main id="show">

    </main>
</body>
</html>
<script>
    let screen = document.getElementById("show")
let pID = localStorage.getItem('productID')
console.log(pID)
fetch("https://fakestoreapi.com/products")
    .then(res => res.json())
    .then(json => {
      console.log(json);
     let oneProduct = json.find((el)=> el.id == pID)
     console.log(oneProduct);
     screen.innerHTML += `
        <div>
                <img class="img" src="${oneProduct.image}" alt="" height: 7em; width: 12em;>
           <p id="cov" class="title"> ${oneProduct.title}</p>
           <h2 class="price">$ ${oneProduct.price}</h2>
            <div>
              <button onclick="makePayment(${oneProduct.price})" class="btn btn-info">BUY NOW</button>
              </div>
         `
    });

    function makePayment(price) {
    FlutterwaveCheckout({
      public_key: "FLWPUBK_TEST-38ff9144bcb3581d755ae013f575a9a2-X",
      tx_ref: "titanic-48981487343MDI0NzMx",
      amount: price,
      currency: "USD",
      payment_options: "card, banktransfer, ussd",
      redirect_url: "https://google",
      meta: {
        consumer_id: 23,
        consumer_mac: "92a3-912ba-1192a",
      },
      customer: {
        email: "rose@unsinkableship.com",
        phone_number: "09064170013",
        name: "Devloper nonso",
      },
      customizations: {
        title: "The nonsoglobal Store",
        description: "Payment for this product",
        logo: "https://www.logolynx.com/images/logolynx/22/2239ca38f5505fbfce7e55bbc0604386.jpeg",
      },
    });
  }
</script>