Stripe: upgrade module and API, switch to Checkout (#12785)

* upgrade stripe module

* switch stripe api to latest version

* fix api version in tests

* start upgrading client and server

* client: switch to redirect

* implement checkout session creation for gems, start implementing webhooks

* stripe: start refactoring one time payments

* working gems and gift payments

* start adding support for subscriptions

* stripe: migrate subscriptions and fix cancelling sub

* allow upgrading group plans

* remove console.log statements

* group plans: upgrade from static page / create new one

* fix #11885, correct group plan modal title

* silence more stripe webhooks

* fix group plans redirects

* implement editing payment method

* start cleaning up code

* fix(stripe): update in-code docs, fix eslint issues

* subscriptions tests

* remove and skip old tests

* skip integration tests

* fix client build

* stripe webhooks: throw error if request fails

* subscriptions: correctly pass groupId

* remove console.log

* stripe: add unit tests for one time payments

* wip: stripe checkout tests

* stripe createCheckoutSession unit tests

* stripe createCheckoutSession unit tests

* stripe createCheckoutSession unit tests (editing card)

* fix existing webhooks tests

* add new webhooks tests

* add more webhooks tests

* fix lint

* stripe integration tests

* better error handling when retrieving customer from stripe

* client: remove unused strings and improve error handling

* payments: limit gift message length (server)

* payments: limit gift message length (client)

* fix redirects when payment is cancelled

* add back "subUpdateCard" string

* fix redirects when editing a sub card, use proper names for products, check subs when gifting

website/client/src/components/group-plans/billing.vue

@@ -53,7 +53,7 @@
         v-if="!group.purchased.plan.dateTerminated
           && group.purchased.plan.paymentMethod === 'Stripe'"
         class="btn btn-primary"
-        @click="showStripeEdit({groupId: group.id})"
+        @click="redirectToStripeEdit({groupId: group.id})"
       >
         {{ $t('subUpdateCard') }}
       </div>

website/client/src/components/group-plans/createGroupModalPages.vue

@@ -202,7 +202,7 @@ export default {
 
       this.paymentMethod = paymentMethod;
       if (this.paymentMethod === this.PAYMENTS.STRIPE) {
-        this.showStripe(paymentData);
+        this.redirectToStripe(paymentData);
       } else if (this.paymentMethod === this.PAYMENTS.AMAZON) {
         paymentData.type = 'subscription';
         return paymentData;

website/client/src/components/groups/groupPlan.vue

@@ -155,7 +155,7 @@
     </div>
     <b-modal
       id="group-plan-modal"
-      title="Select Payment"
+      :title="activePage === PAGES.CREATE_GROUP ? 'Create your Group' : 'Select Payment'"
       size="md"
       hide-footer="hide-footer"
     >
@@ -524,7 +524,7 @@ export default {
       }
 
       if (this.paymentMethod === this.PAYMENTS.STRIPE) {
-        this.showStripe(paymentData);
+        this.redirectToStripe(paymentData);
       }
 
       return null;

website/client/src/components/payments/buyGemsModal.vue

@@ -135,7 +135,7 @@
         </div>
         <payments-buttons
           :disabled="!selectedGemsBlock"
-          :stripe-fn="() => showStripe({ gemsBlock: selectedGemsBlock })"
+          :stripe-fn="() => redirectToStripe({ gemsBlock: selectedGemsBlock })"
           :paypal-fn="() => openPaypal({
             url: paypalCheckoutLink, type: 'gems', gemsBlock: selectedGemsBlock
           })"

website/client/src/components/payments/sendGemsModal.vue

@@ -118,7 +118,9 @@
         class="form-control"
         rows="3"
         :placeholder="$t('sendGiftMessagePlaceholder')"
+        :maxlength="MAX_GIFT_MESSAGE_LENGTH"
       ></textarea>
+      <span>{{ gift.message.length || 0 }} / {{ MAX_GIFT_MESSAGE_LENGTH }}</span>
       <!--include ../formatting-help-->
     </div>
     <div class="modal-footer">
@@ -133,7 +135,7 @@
       <payments-buttons
         v-else
         :disabled="!gift.subscription.key && gift.gems.amount < 1"
-        :stripe-fn="() => showStripe({gift, uuid: userReceivingGems._id, receiverName})"
+        :stripe-fn="() => redirectToStripe({gift, uuid: userReceivingGems._id, receiverName})"
         :paypal-fn="() => openPaypalGift({
           gift: gift, giftedTo: userReceivingGems._id, receiverName,
         })"
@@ -181,6 +183,7 @@ import planGemLimits from '@/../../common/script/libs/planGemLimits';
 import paymentsMixin from '@/mixins/payments';
 import notificationsMixin from '@/mixins/notifications';
 import paymentsButtons from '@/components/payments/buttons/list';
+import { MAX_GIFT_MESSAGE_LENGTH } from '@/../../common/script/constants';
 
 // @TODO: EMAILS.TECH_ASSISTANCE_EMAIL, load from config
 const TECH_ASSISTANCE_EMAIL = 'admin@habitica.com';
@@ -208,6 +211,7 @@ export default {
       },
       sendingInProgress: false,
       userReceivingGems: null,
+      MAX_GIFT_MESSAGE_LENGTH: MAX_GIFT_MESSAGE_LENGTH.toString(),
     };
   },
   computed: {

website/client/src/components/settings/subscription.vue

@@ -132,7 +132,7 @@
             <button
               class="btn btn-primary btn-update-card
               d-flex justify-content-center align-items-center"
-              @click="showStripeEdit()"
+              @click="redirectToStripeEdit()"
             >
               <div
                 v-once

website/client/src/components/settings/subscriptionOptions.vue

@@ -27,7 +27,10 @@
     </b-form-group>
     <payments-buttons
       :disabled="!subscription.key"
-      :stripe-fn="() => showStripe({subscription:subscription.key, coupon:subscription.coupon})"
+      :stripe-fn="() => redirectToStripe({
+        subscription: subscription.key,
+        coupon: subscription.coupon,
+      })"
       :paypal-fn="() => openPaypal({url: paypalPurchaseLink, type: 'subscription'})"
       :amazon-data="{
         type: 'subscription',