refactor(examples): style buttons and add v-if

Author: softbeehive

examples/CardElement.vue

@@ -1,7 +1,6 @@
 <template>
-  <form @submit.prevent="handlePay">
+  <form v-if="stripeLoaded" @submit.prevent="handlePay">
     <StripeElements
-      v-if="stripeLoaded"
       class="py-3"
       :stripe-key="publishableKey"
       :instance-options="stripeOptions"
@@ -15,7 +14,7 @@
       />
     </StripeElements>
     <button 
-      class="w-full focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
+      class="w-full focus:outline-none text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-900"
     >
       Pay now
     </button>

examples/CardElementLegacy.vue

@@ -17,7 +17,7 @@
   <button
     type="button"
     @click="pay"
-    class="w-full focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
+    class="w-full focus:outline-none text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-900"
   >
     Pay now
   </button>

examples/PaymentElementDeferred.vue

@@ -1,7 +1,6 @@
 <template>
-  <form @submit.prevent="handleSubmit">
+  <form v-if="stripeLoaded" @submit.prevent="handleSubmit">
     <StripeElements
-      v-if="stripeLoaded"
       :stripe-key="stripeKey"
       :instance-options="stripeOptions"
       :elements-options="elementsOptions"
@@ -16,7 +15,7 @@
     </StripeElements>
     <button
       type="submit"
-      class="focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
+      class="focus:outline-none text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-900"
     >
       Submit
     </button>