From c4575fa49d42bed187d56400f63dce5507100963 Mon Sep 17 00:00:00 2001 From: Chris Smith Date: Tue, 5 Mar 2019 13:34:39 -0600 Subject: [PATCH] getting stripe wired in --- css/site.css | 30 +++++++++++++++++- index.php | 19 +++++++++-- src/.env.example | 4 ++- views/common/footer.php | 3 ++ views/common/head.php | 1 + views/common/stripe.php | 70 +++++++++++++++++++++++++++++++++++++++++ views/step2.php | 42 ++++++------------------- 7 files changed, 133 insertions(+), 36 deletions(-) create mode 100644 views/common/stripe.php diff --git a/css/site.css b/css/site.css index fc82a4c..618e476 100644 --- a/css/site.css +++ b/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; } \ No newline at end of file +.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; +} \ No newline at end of file diff --git a/index.php b/index.php index 735ace2..3fe5162 100644 --- a/index.php +++ b/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; diff --git a/src/.env.example b/src/.env.example index c893175..2969f97 100644 --- a/src/.env.example +++ b/src/.env.example @@ -5,4 +5,6 @@ DB_HOST="localhost" DB_NAME="ditw" DB_USER="root" DB_PASS="root" -POSTMARK_API_KEY="special" \ No newline at end of file +POSTMARK_API_KEY="special" +STRIPE_API_SECRET_KEY="sk" +STRIPE_API_PUBLIC_KEY="pk" \ No newline at end of file diff --git a/views/common/footer.php b/views/common/footer.php index 6d89623..113d826 100644 --- a/views/common/footer.php +++ b/views/common/footer.php @@ -29,5 +29,8 @@ }, false); })(); + diff --git a/views/common/head.php b/views/common/head.php index a0907c1..8b859bf 100644 --- a/views/common/head.php +++ b/views/common/head.php @@ -8,6 +8,7 @@ Dinner in the Woods 2019 - Tickets on sale March 15th! + diff --git a/views/common/stripe.php b/views/common/stripe.php new file mode 100644 index 0000000..78736be --- /dev/null +++ b/views/common/stripe.php @@ -0,0 +1,70 @@ +// Create a Stripe client. +var stripe = Stripe(''); + +// 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`
. + 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(); + } \ No newline at end of file diff --git a/views/step2.php b/views/step2.php index 32a1a72..aff578b 100644 --- a/views/step2.php +++ b/views/step2.php @@ -16,7 +16,7 @@

Billing address

-
+
-
-
- - - Full name as displayed on card -
- Name on card is required -
-
-
- - -
- Credit card number is required -
-
-
-
- - -
- Expiration date required -
-
-
- - -
- Security code required -
-
+
+ +
+
+ + +