getting stripe wired in

css/site.css

@@ -37,4 +37,32 @@ h4 {
 
 .box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
 
-.lh-condensed { line-height: 1.25; }
+.lh-condensed { line-height: 1.25; }
+
+.StripeElement {
+    box-sizing: border-box;
+
+    height: 40px;
+
+    padding: 10px 12px;
+
+    border: 1px solid transparent;
+    border-radius: 4px;
+    background-color: white;
+
+    box-shadow: 0 1px 3px 0 #e6ebf1;
+    -webkit-transition: box-shadow 150ms ease;
+    transition: box-shadow 150ms ease;
+}
+
+.StripeElement--focus {
+    box-shadow: 0 1px 3px 0 #cfd7df;
+}
+
+.StripeElement--invalid {
+    border-color: #fa755a;
+}
+
+.StripeElement--webkit-autofill {
+    background-color: #fefde5 !important;
+}

index.php

@@ -2,6 +2,9 @@
 
 use Bramus\Router\Router;
 use RedBeanPHP\R;
+use Stripe\Charge;
+use Stripe\Customer;
+use Stripe\Stripe;
 
 require __DIR__ . '/vendor/autoload.php';
 require __DIR__ . '/src/functions.php';
@@ -76,10 +79,22 @@ $router->post('/checkout', function () {
     $order = R::dispense('orders');
 
     // Check if credit checkout and valid
+    $stripeCustomerToken = null;
     if ($_POST['paymentMethod'] == 0) {
+        Stripe::setApiKey($_SERVER['STRIPE_API_SECRET_KEY']);
+        $customer = Customer::create([
+            "description" => $_POST['firstName'] . ' ' . $_POST['lastName'] . ' - ' . $_POST['email'],
+            "source" => $_POST['stripeToken'], // obtained with Stripe.js
+        ]);
+        // Charge the Customer instead of the card:
+        $charge = Charge::create([
+            'amount' => $cartTotal,
+            'currency' => 'usd',
+            'customer' => $customer->id,
+        ]);
         // make payment
-        $order->stripe_token = '1234';
-        $stripeCustomerToken = '1234'; // For Guest entry
+        $order->stripe_token = $charge->id;
+        $stripeCustomerToken = $customer->id; // For Guest entry
     }
 
     $order->ticket_quantity = $originalTicketQty;

src/.env.example

@@ -5,4 +5,6 @@ DB_HOST="localhost"
 DB_NAME="ditw"
 DB_USER="root"
 DB_PASS="root"
-POSTMARK_API_KEY="special"
+POSTMARK_API_KEY="special"
+STRIPE_API_SECRET_KEY="sk"
+STRIPE_API_PUBLIC_KEY="pk"

views/common/footer.php

@@ -29,5 +29,8 @@
         }, false);
     })();
 </script>
+<script type="application/javascript">
+    <?php include 'stripe.php'; ?>
+</script>
 </body>
 </html>

views/common/head.php

@@ -8,6 +8,7 @@
 
     <title>Dinner in the Woods 2019 - Tickets on sale March 15th!</title>
 
+    <script src="https://js.stripe.com/v3/"></script>
     <!-- Bootstrap core CSS -->
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
           integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

views/common/stripe.php

@@ -0,0 +1,70 @@
+// Create a Stripe client.
+var stripe = Stripe('<?=$_SERVER['STRIPE_API_PUBLIC_KEY']?>');
+
+// Create an instance of Elements.
+var elements = stripe.elements();
+
+// Custom styling can be passed to options when creating an Element.
+// (Note that this demo uses a wider set of styles than the guide below.)
+var style = {
+base: {
+color: '#32325d',
+fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
+fontSmoothing: 'antialiased',
+fontSize: '16px',
+'::placeholder': {
+color: '#aab7c4'
+}
+},
+invalid: {
+color: '#fa755a',
+iconColor: '#fa755a'
+}
+};
+
+// Create an instance of the card Element.
+var card = elements.create('card', {style: style});
+
+// Add an instance of the card Element into the `card-element` <div>.
+    card.mount('#card-element');
+
+    // Handle real-time validation errors from the card Element.
+    card.addEventListener('change', function(event) {
+    var displayError = document.getElementById('card-errors');
+    if (event.error) {
+    displayError.textContent = event.error.message;
+    } else {
+    displayError.textContent = '';
+    }
+    });
+
+    // Handle form submission.
+    var form = document.getElementById('payment-form');
+    form.addEventListener('submit', function(event) {
+    event.preventDefault();
+
+    stripe.createToken(card).then(function(result) {
+    if (result.error) {
+    // Inform the user if there was an error.
+    var errorElement = document.getElementById('card-errors');
+    errorElement.textContent = result.error.message;
+    } else {
+    // Send the token to your server.
+    stripeTokenHandler(result.token);
+    }
+    });
+    });
+
+    // Submit the form with the token ID.
+    function stripeTokenHandler(token) {
+    // Insert the token ID into the form so it gets submitted to the server
+    var form = document.getElementById('payment-form');
+    var hiddenInput = document.createElement('input');
+    hiddenInput.setAttribute('type', 'hidden');
+    hiddenInput.setAttribute('name', 'stripeToken');
+    hiddenInput.setAttribute('value', token.id);
+    form.appendChild(hiddenInput);
+
+    // Submit the form
+    form.submit();
+    }

views/step2.php

@@ -16,7 +16,7 @@
     </div>
     <div class="col-md-8 order-md-1">
         <h4 class="mb-3">Billing address</h4>
-        <form class="needs-validation" novalidate method="POST" action="/checkout">
+        <form class="needs-validation" novalidate method="POST" action="/checkout" id="payment-form">
             <?php
             $eventTicketQty = getInteger($_POST['eventTicketQty']);
             $ticketEnhancerQty = getInteger($_POST['ticketEnhancerQty']);
@@ -165,38 +165,16 @@
                     </p>
                 </div>
             </div>
-            <div class="row" id="creditDetails">
-                <div class="col-md-6 mb-3">
-                    <label for="cc-name">Name on card</label>
-                    <input type="text" class="form-control" id="cc-name" placeholder="" required>
-                    <small class="text-muted">Full name as displayed on card</small>
-                    <div class="invalid-feedback">
-                        Name on card is required
-                    </div>
-                </div>
-                <div class="col-md-6 mb-3">
-                    <label for="cc-number">Credit card number</label>
-                    <input type="text" class="form-control" id="cc-number" placeholder="" required>
-                    <div class="invalid-feedback">
-                        Credit card number is required
-                    </div>
-                </div>
-                <div class="row">
-                    <div class="col-md-3 mb-3">
-                        <label for="cc-expiration">Expiration</label>
-                        <input type="text" class="form-control" id="cc-expiration" placeholder="" required>
-                        <div class="invalid-feedback">
-                            Expiration date required
-                        </div>
-                    </div>
-                    <div class="col-md-3 mb-3">
-                        <label for="cc-expiration">CVV</label>
-                        <input type="text" class="form-control" id="cc-cvv" placeholder="" required>
-                        <div class="invalid-feedback">
-                            Security code required
-                        </div>
-                    </div>
+            <div id="creditDetails">
+                <label for="card-element">
+                    Credit or debit card
+                </label>
+                <div id="card-element">
+                    <!-- A Stripe Element will be inserted here. -->
                 </div>
+
+                <!-- Used to display form errors. -->
+                <div id="card-errors" role="alert"></div>
             </div>
             <hr class="mb-4">
             <button class="btn btn-primary btn-lg btn-block" type="submit">Checkout</button>