Stripe New JS Button Example
This is the New Stripe JS Integration with PHP. I had not done this in a while so it was a little hard getting integrated, but it was fun.
These are the code snippets to get started with the New Stripe JS Button.
HTML
<div id="card-element"> <!-- A Stripe Element will be inserted here. --> </div> <!-- Used to display form errors. --> <div id="card-errors" role="alert"></div>
JS
<script src="https://js.stripe.com/v3/"></script>
// Create a Stripe client. var stripe = Stripe(pk_stripe); // Create an instance of Elements. var elements = stripe.elements(); //payment form var paymentForm = { target: '#payment-target', beforeSubmit: showRequest, url: site_url + 'account/ccpayment', success: function(response) { console.log(response); $('.loaders').hide(); var $form = $("#payment-form"); $form.find("button").prop("disabled", false); } , error: function (response){ console.log(response); } }; function showRequest(){ $('.loaders').show(); } // 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: '#2f343b', fontFamily: '"Roboto", 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(); console.log("Validate"); //validate the form required 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 $('#payment-form').ajaxSubmit(paymentForm); // form.submit(); }
PHP
require_once('./application/helpers/stripe-php/init.php'); $stripe_sk_key = $this->config->item('stripe_sk_key'); StripeStripe::setApiKey($stripe_sk_key); $charge = StripeCharge::create([ 'amount' => $amount_stripe, 'currency' => 'usd', 'source' => $stripeToken, 'description' => 'Plan '.$plan_name.' For '.$email.' At '.$amount.'', 'metadata' => ["email" => $email] ]);