javascript - 我如何为来自 Stripe 的 javascript 理想付款创建一个 webhook

Question

我对使用这种高级东西进行编程有点陌生，但我想学习。我希望你能帮助我让它工作，所以当人们取消付款并仍然得到他们的东西时。我想知道如何做一个理想的 webhook voor 如果你有更好的方法来创建付款很好 asswel

索引页面上是包含 javascript 的付款表格

我想在付款成功时收到条带通知（使用 webhook），然后它需要发送带有商店代码的电子邮件。

索引.php

<form id="payment-form" class="betaal">
            <div class="weggeven">
                <h1>Aantal verkochten cadeau kaarten</h1>
            </div>
            <div class="aantal">
                <p id="aantal"><?php aantal(); ?></p>
            </div>
            <div class="form-row">
                <label for="name">
                    Name
                </label>
                <input id="name" name="name" placeholder="Jenny Rosen" required>
            </div>
            <div class="form-row">
                <label for="name">
                    Email
                </label>
                <input id="email" name="email" placeholder="[e-mail]" required>
            </div>

            <div class="form-row">
                <label for="ideal-bank-element">
                    iDEAL Bank
                </label>
                <div id="ideal-bank-element">
                    <!-- A Stripe Element will be inserted here. -->
                </div>
            </div>
            <div class="bedrag">
                <p>
                    Bedrag &#8364; <span id="prijs"></span>
                </p>

            </div>
            <div class="info">
                <span>U heeft voor de bon: <b class="bon"><?= $_GET['betalen'] ?></b> gekozen</span>
            </div>

            <button>nu betalen</button>

            <!-- Used to display form errors. -->
            <div id="error-message" role="alert"></div>
            <div class="pedi">
                <a href="https://www.pedicurepraktijkpapendrecht.nl/">pedicurepraktijkpapendrecht</a>
            </div>
        </form>


    var stripe = Stripe('api key');

    // Create an instance of Elements.
    var elements = stripe.elements();

    var options = {
      // Custom styling can be passed to options when creating an Element.
      style: {
        base: {
          // Add your base input styles here. For example:
          fontSize: '16px',
          color: '#32325d',
          padding: '10px 12px',
        },
      }
    }

    // Create an instance of the idealBank Element.
    var idealBank = elements.create('idealBank', options);

    // Add an instance of the idealBank Element into
    // the `ideal-bank-element` <div>.
    idealBank.mount('#ideal-bank-element');
    idealBank.on('change', function(event) {
      var bank = event.value;
      // Perform any additional logic here...

    });
    // Create a source or display an error when the form is submitted.
    var form = document.getElementById('payment-form');

    form.addEventListener('submit', function(event) {
      event.preventDefault();
      var randNo = Math.floor(Math.random() * 100) + 2 + "" + new Date().getTime() +  Math.floor(Math.random() * 100) + 2 + (Math.random().toString(36).replace(/[^a-zA-Z]+/g, '').substr(0, 5));
      var email = document.querySelector('input[name="email"]').value;
      var sourceData = {
        type: 'ideal',
        amount: price,
        currency: 'eur',
        owner: {
          name: document.querySelector('input[name="name"]').value,
          email: document.querySelector('input[name="email"]').value,
        },
        // Specify the URL to which the customer should be redirected
        // after paying.
        redirect: {
          return_url: 'https://url/stripe/cadeau.php?gelukt=jaa' + '&email=' + email + '&id=' + randNo + '&bon=' + bon,

        },
      };

      // Call `stripe.createSource` with the idealBank Element and
      // additional options.
      stripe.createSource(idealBank, sourceData).then(function(result) {
        if (result.error) {
          // Inform the customer that there was an error.
          var errorElement = document.getElementById('error-message');
          errorElement.textContent = error.message;
        } else {
          // Redirect the customer to the authorization URL.
          stripeSourceHandler(result.source);
        }
      });
    });


    function stripeSourceHandler(source) {
      // Redirect the customer to the authorization URL.
      document.location.href = source.redirect.url;
    }

在 fetch.php 将接收来自付款的东西（电子邮件、姓名等）并将其插入数据库

获取.php

    if (isset($_GET['gelukt'], $_GET['email'], $_GET['id'])) {
    $input = @file_get_contents('php://input');
    $event_json = json_decode($input);
    if ($event_json->type == 'source.chargeable') {

    $aankoop_id = $_GET['id'];
    $email = $_GET['email'];
    $bon = $_GET['bon'];
    $select_stmt = $db->prepare('SELECT * FROM cadeau WHERE aankoop_id =?'); //sql select query
    $select_stmt->execute([$aankoop_id]); 
    $aankoopcheck = $select_stmt->fetch();
    unset($select_stmt);
    if ($aankoopcheck) {
        // email found
        echo"<h1 class='gestuurd'>De email is al verstuurd!</h1>";
    } else {
        $gebruikt = "nee";
        $sql = "INSERT INTO `cadeau` (`aankoop_id`, `gebruikt`, `bon`) VALUES (?,?,?)";
        $stmt= $db->prepare($sql);
        $stmt->execute([$aankoop_id, $gebruikt, $bon]);
        unset($stmt);

        $sender = '[e-mail]';    
        $subject = "Pedicurepraktijkpapenrecht tegoedbon";
        $message = "Bedankt voor uw bestelling.\r\n U kunt hem download via deze link: https://www.pedicurepraktijkpapendrecht.nl/stripe/download.php?email=" . $email . "&id=" . $aankoop_id . "&bon=" . $bon;
        $headers = 'From:' . $sender;

        if (mail($email, $subject, $message, $headers))
        {

        }
        else
        {

        }
    }
}


}

在 cadeau.php 上有点支付完成页面，电子邮件将从 cadeau.php发送

    <?php
include('fetch.php');

?>
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <script src="https://js.stripe.com/v3/"></script>
        <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"
            integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="style.css">
        <title>Email versturen naar uw email!</title>
    </head>

    <body>
        <div class="form-row">
            <h1>Bedankt voor het kopen van een tegoedbon!</h1>
            <p>Uw tegoedbon word gestuurd naar uw email!</p>
            <div class="flex">
                <a href="https://www.pedicurepraktijkpapendrecht.nl/"
                    class="btn text-center margin-right max-width">Naar de
                    website</a>
                <a href="checkout.php" class="btn text-center margin-right max-width">Nog een tegoedbon kopen?</a>
            </div>

        </div>





    </body>

</html>

标签： javascriptphpstripe-paymentspayment