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]
]);