JqueryPayment library and input format added.

PrplHaz4 · Mar 19, 2015 · 0a32d95 · 0a32d95
1 parent 06a42c6
commit 0a32d95
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -88,17 +88,40 @@ You can change the token name that will be sent to your action and error's conta
 ```php
 use ruskid\stripe\StripeForm;
 
- <?php $form = StripeForm::begin([
-        'tokenInputName' => 'stripeToken',
-        'errorContainerId' => 'payment-errors',
-        'options' => ['autocomplete' => 'on']
- ]); ?>
- <?= $form->field($model, 'amount') ?>
-
- <?= $form->numberInput(['class' => 'form-control']) ?>
- <?= $form->cvcInput() ?>
- <?= $form->yearInput() ?>
- <?= $form->monthInput() ?>
+ <?php
+ $form = StripeForm::begin([
+             'tokenInputName' => 'stripeToken',
+             'errorContainerId' => 'payment-errors',
+             'options' => ['autocomplete' => 'on']
+ ]);
+ ?>
+
+ <div class="form-group">
+     <label for="number" class="control-label">Card number</label>
+     <?= $form->numberInput() ?>
+ </div>
+
+ <div class="form-group">
+     <label for="cvc" class="control-label">CVC</label>
+     <?= $form->cvcInput() ?>
+ </div>
+
+ <!-- Use month and year in the same input. -->
+ <div class="form-group">
+     <label for="cvc" class="control-label">Card expiry</label>
+     <?= $form->monthAndYearInput() ?>
+ </div>
+
+ <!-- OR in two separate inputs. -->
+ <div class="form-group">
+     <label for="cvc" class="control-label">Month</label>
+     <?= $form->monthInput() ?>
+ </div>
+
+ <div class="form-group">
+     <label for="cvc" class="control-label">Year</label>
+     <?= $form->yearInput() ?>
+ </div>
 
  <div id="payment-errors"></div>
  <?php StripeForm::end(); ?>

diff --git a/StripeForm.php b/StripeForm.php
@@ -83,17 +83,17 @@ class StripeForm extends \yii\widgets\ActiveForm {
     public $errorContainerId = "payment-errors";
 
     /**
-     * This will load Jquery Payment library and apply format to the inputs.
+     * Apply Jquery Payment format to the inputs
      * @see https://github.com/stripe/jquery.payment.
      * @var boolean
      */
-    public $useJqueryPayment = true;
+    public $applyJqueryPaymentFormat = true;
 
     /**
      * Perform Jquery Payment client validation.
      * @var boolean
      */
-    public $performJqueryPaymentValidation = true;
+    public $applyJqueryPaymentValidation = true;
 
     //Stripe constants
     const NUMBER_ID = 'number';
@@ -146,7 +146,7 @@ public function init() {
      */
     public function run() {
         $this->registerFormScripts();
-        if ($this->useJqueryPayment) {
+        if ($this->applyJqueryPaymentFormat || $this->applyJqueryPaymentValidation) {
             $this->registerJqueryPaymentScripts();
         }
     }
@@ -167,23 +167,41 @@ public function registerFormScripts() {
     }
 
     /**
-     * Will register jquery payment scripts and apply them to the inputs.
+     * Will register Jquery Payment scripts
      */
     public function registerJqueryPaymentScripts() {
         $view = $this->getView();
         JqueryPaymentAsset::register($view);
 
-        $js = "jQuery(function($) {
+        if ($this->applyJqueryPaymentFormat) {
+            $js = "jQuery(function($) {
                 $('input[data-stripe=" . self::NUMBER_ID . "]').payment('formatCardNumber');
                 $('input[data-stripe=" . self::CVC_ID . "]').payment('formatCardCVC');
                 $('input[data-stripe=" . self::MONTH_YEAR_ID . "]').payment('formatCardExpiry');
                 $('input[data-stripe=" . self::MONTH_ID . "]').payment('restrictNumeric');
                 $('input[data-stripe=" . self::YEAR_ID . "]').payment('restrictNumeric');
-        });";
-        $view->registerJs($js);
+            });";
+            $view->registerJs($js);
+        }
+
+        if ($this->applyJqueryPaymentValidation) {
+            /* $js = "jQuery(function($) {
+              $.fn.toggleInputError = function(erred) {
+              this.parent('.form-group').toggleClass('has-error', erred);
+              return this;
+              };
 
-        if ($this->performJqueryPaymentValidation) {
-
+              $('form').submit(function(e) {
+              e.preventDefault();
+              var cardType = $.payment.cardType($('.cc-number').val());
+              $('.cc-number').toggleInputError(!$.payment.validateCardNumber($('.cc-number').val()));
+              $('.cc-exp').toggleInputError(!$.payment.validateCardExpiry($('.cc-exp').payment('cardExpiryVal')));
+              $('.cc-cvc').toggleInputError(!$.payment.validateCardCVC($('.cc-cvc').val(), cardType));
+              $('.cc-brand').text(cardType);
+              $('.validation').removeClass('text-danger text-success');
+              $('.validation').addClass($('.has-error').length ? 'text-danger' : 'text-success');
+              });
+              });"; */
         }
     }
 
@@ -195,6 +213,7 @@ public function registerJqueryPaymentScripts() {
     public function numberInput($options = []) {
         if (empty($options)) {
             $options = [
+                'id' => self::NUMBER_ID,
                 'class' => 'form-control',
                 'autocomplete' => self::AUTO_CC_ATTR,
                 'placeholder' => '•••• •••• •••• ••••',
@@ -217,6 +236,7 @@ public function numberInput($options = []) {
     public function cvcInput($options = []) {
         if (empty($options)) {
             $options = [
+                'id' => self::CVC_ID,
                 'class' => 'form-control',
                 'autocomplete' => 'off',
                 'placeholder' => '•••',
@@ -239,6 +259,7 @@ public function cvcInput($options = []) {
     public function yearInput($options = []) {
         if (empty($options)) {
             $options = [
+                'id' => self::YEAR_ID,
                 'class' => 'form-control',
                 'autocomplete' => self::AUTO_YEAR_ATTR,
                 'placeholder' => '••••',
@@ -262,6 +283,7 @@ public function yearInput($options = []) {
     public function monthInput($options = []) {
         if (empty($options)) {
             $options = [
+                'id' => self::MONTH_ID,
                 'class' => 'form-control',
                 'autocomplete' => self::AUTO_MONTH_ATTR,
                 'placeholder' => '••',
@@ -285,6 +307,7 @@ public function monthInput($options = []) {
     public function monthAndYearInput($options = []) {
         if (empty($options)) {
             $options = [
+                'id' => self::MONTH_YEAR_ID,
                 'class' => 'form-control',
                 'autocomplete' => self::AUTO_EXP_ATTR,
                 'placeholder' => '•• / ••',