Further improvements to our third-party payment processor flow.

* Brings back successUrl and the backend route
* If the payment type was Paypal (or another pop-up window based type) then redirect them to a window.close template.
* If the payment was not a pop-up window based type simply redirect them.
* Added and enhanced plenty of structural window timeouts -.-.

Author: MelissaAutumn

assets/app/vue/views/SubscribeView/components/CheckoutStep.vue

@@ -16,19 +16,24 @@ const initCurrencyFormatter = (code: string) => {
   });
 };
 
+const DEFAULT_PAYMENT_TYPE = 'card';
+const ARE_WE_DONE_YET_TIMER_MS = 2500;
+const SHORT_WAIT_MS = 2500;
+const EXCEPTIONS_UNTIL_ERROR_SHOWN = 3;
+
+// We don't need these to be reactive
 let currencyFormatter = initCurrencyFormatter('USD');
 let paddle = null;
 let doneCheckerHandler = null;
 let exceptionCounter = 0;
-
+let transactionId = null;
+let paymentType = DEFAULT_PAYMENT_TYPE;
 
 const planName = ref();
 const planSystemError = ref(false);
 const paymentComplete = ref(false);
 const paddleLoading = ref(true);
 const paddleUnknownError = ref(false);
-const ARE_WE_DONE_YET_TIMER_MS = 2500;
-const EXCEPTIONS_UNTIL_ERROR_SHOWN = 3;
 
 // Placeholder information for the skeletons
 const order_summary = ref({
@@ -60,6 +65,8 @@ onUnmounted(() => {
  * 
  * Poll the is-done api route every 2.5 seconds, and if we're doneish (paid or complete) 
  * then reload the window to let the payment verification screen do their magic.
+ * 
+ * Triggered by PaddleJS's checkout events. (Anyone with a transaction ID!)
  */
 const areWeDoneHere = async () => {
   try {
@@ -76,7 +83,16 @@ const areWeDoneHere = async () => {
 
     // For some reason PaddleJS has paid's constant as undefined. Hmmm...
     if (['completed', 'paid'].indexOf(status) > -1) {
-      window.location.reload();
+      // Remove the Paddle checkout form, and after a short wait reload the page.
+      paymentComplete.value = true;
+    }
+
+    if (status === 'completed') {
+      // We re-use this handler since it's not currently used, and it's hooked up to unMount.
+      doneCheckerHandler = window.setTimeout(() => {
+        window.location.reload();
+      }, SHORT_WAIT_MS);
+      return;
     }
 
     // Lastly clear up the exception counter, if we've reached here there's no exceptions happening and no errors need to be shown.
@@ -132,21 +148,34 @@ const onPaddleEvent = async (evt: PaddleEventData) => {
   // Just update the cart, every checkout.* event has all the information on it.
   if (evt.name.indexOf('checkout.') === 0) {
     const data = evt.data;
+    const backendNeedsUpdate = transactionId !== (data?.transaction_id ?? null) || paymentType !== data.payment.method_details.type;
+
+    // Transaction ID should only update if we're not falsey.
+    if (data?.transaction_id) {
+      transactionId = data?.transaction_id ?? null;
+    }
 
-    // Set the transaction id
-    if (!doneCheckerHandler && data?.transaction_id) {
+    // Payment type is only reliably updated on payment selected.
+    if (evt.name == 'checkout.payment.selected') {
+      paymentType = data.payment.method_details.type;
+    }
+
+    if (backendNeedsUpdate) {
       await fetch('/api/v1/subscription/paddle/tx/set/', {
         mode: 'same-origin',
         credentials: 'include',
         method: 'PUT',
         body: JSON.stringify({
-          txid: data?.transaction_id,
+          payment_type: paymentType,
+          txid: transactionId,
         }),
         headers: {
           'X-CSRFToken': csrfToken,
         },
       });
+    }
 
+    if (!doneCheckerHandler && transactionId) {
       // Setup our done checker
       doneCheckerHandler = window.setTimeout(() => areWeDoneHere(), ARE_WE_DONE_YET_TIMER_MS);
     }
@@ -208,8 +237,9 @@ const setupPaddle = async () => {
     eventCallback: onPaddleEvent,
     checkout: {
       settings: {
+        successUrl: `${window.location.origin}/subscription/paddle/complete/`,
         displayMode: 'inline',
-        frameTarget: 'checkout-container',
+        frameTarget: 'paddle-checkout',
         frameInitialHeight: 992,
         frameStyle: 'width: 100%; background-color: transparent; border: none;',
         variant: 'one-page',
@@ -241,10 +271,10 @@ export default {
     <h2>{{ t('views.subscribe.title') }}</h2>
     <notice-bar v-if="paddleUnknownError" :type="NoticeBarTypes.Critical">{{
       t('views.subscribe.paddleUnknownError')
-      }}</notice-bar>
+    }}</notice-bar>
     <notice-bar v-if="planSystemError" :type="NoticeBarTypes.Critical">{{
       t('views.subscribe.planSystemError')
-      }}</notice-bar>
+    }}</notice-bar>
     <div class="container">
       <card-container class="summary-card">
         <ul class="summary">
@@ -318,6 +348,7 @@ export default {
         <!-- Paddle's checkout will just disappear into the void once it starts redirecting us to successUrl.
              It looks ugly, so show a small message in its place. -->
         <p v-if="paymentComplete">{{ t('views.subscribe.paymentComplete') }}</p>
+        <div v-else class="paddle-checkout"></div>
       </card-container>
     </div>
   </div>
@@ -350,6 +381,7 @@ export default {
 
   .checkout-container {
     width: 100%;
+    min-height: 1090px;
   }
 
   .summary-card {

src/thunderbird_accounts/subscription/views.py

@@ -1,11 +1,13 @@
+from django.template.response import TemplateResponse
+from paddle_billing.Notifications.Entities.Shared.PaymentMethodType import PaymentMethodType
 import datetime
 import json
 import logging
 
 import sentry_sdk
 from django.conf import settings
 from django.contrib.auth.decorators import login_required
-from django.http import HttpResponse, JsonResponse
+from django.http import HttpResponse, JsonResponse, HttpRequest, HttpResponseRedirect
 from django.utils.translation import gettext_lazy as _
 from django.views.decorators.http import require_http_methods
 from django.core.signing import Signer
@@ -25,6 +27,7 @@
 
 # We only need this here right now
 SESSION_PADDLE_TRANSACTION_ID = 'paddle_txid'
+SESSION_PADDLE_PAYMENT_TYPE = str(PaymentMethodType.Card)
 
 
 def prefilter_paddle_webhook(event_type: str, event_data: dict) -> bool:
@@ -37,6 +40,48 @@ def prefilter_paddle_webhook(event_type: str, event_data: dict) -> bool:
     return True
 
 
+@login_required
+@inject_paddle
+def subscription_complete(request: HttpRequest, paddle: Client):
+    """User is redirected by Paddle via the successUrl. """
+    user = request.user
+    transaction_id = request.session.pop(SESSION_PADDLE_TRANSACTION_ID)
+    payment_type = request.session.pop(SESSION_PADDLE_PAYMENT_TYPE)
+
+    if not transaction_id or not payment_type:
+        pass
+
+    transaction = paddle.transactions.get(transaction_id=transaction_id)
+    status = transaction.status.value
+
+    if transaction and status in [Transaction.StatusValues.COMPLETED.value, Transaction.StatusValues.PAID.value]:
+        user.is_awaiting_payment_verification = True
+        user.save()
+
+        if settings.IS_DEV:
+            tasks.dev_only_paddle_fake_webhook.delay(transaction_id=transaction_id, user_uuid=user.uuid.hex)
+
+        """
+        Paddle folks mentioned these are the types that open pop-up windows:
+        """
+        if payment_type in [
+            PaymentMethodType.Paypal.value,
+            # We don't use these, but for completeness' sake. 
+            PaymentMethodType.Alipay.value,
+            PaymentMethodType.Bancontact.value,
+            PaymentMethodType.Ideal.value,
+            PaymentMethodType.KoreaLocal.value,
+        ]:
+            # Tell their window to close
+            return TemplateResponse(
+                request,
+                'close_window.html',
+                status=200,
+            )
+
+    return HttpResponseRedirect('/subscribe')
+
+
 @login_required
 @require_http_methods(['POST'])
 def get_paddle_information(request: Request):
@@ -66,6 +111,7 @@ def set_paddle_transaction_id(request: Request):
     It kinda sucks, but it works for now."""
     data = json.loads(request.body.decode())
     request.session[SESSION_PADDLE_TRANSACTION_ID] = data.get('txid')
+    request.session[SESSION_PADDLE_PAYMENT_TYPE] = data.get('payment_type')
     return JsonResponse({'success': True})
 
 
@@ -94,17 +140,6 @@ def is_paddle_transaction_done(request: Request, paddle: Client):
         if transaction:
             status = transaction.status
 
-    # Once the transaction is doneish, set the user to awaiting verification and if on dev mode deploy the fake webhook
-    if transaction and status in [Transaction.StatusValues.COMPLETED.value, Transaction.StatusValues.PAID.value]:
-        user.is_awaiting_payment_verification = True
-        user.save()
-
-        # Clean up transaction id if it's still in session
-        request.session.pop(SESSION_PADDLE_TRANSACTION_ID, default=None)
-
-        if settings.IS_DEV:
-            tasks.dev_only_paddle_fake_webhook.delay(transaction_id=transaction_id, user_uuid=user.uuid.hex)
-
     return JsonResponse({'status': status})
 
 

src/thunderbird_accounts/urls.py

@@ -49,6 +49,8 @@
     path('email-aliases/remove', mail_views.remove_email_alias, name='remove_email_alias'),
     # Authentication
     path('users/sign-up/', auth_views.sign_up, name='sign_up'),
+    # Subscription
+    path('subscription/paddle/complete/', subscription_views.subscription_complete, name='paddle_completed'),
     # CalDAV auto-setup for Appointment
     path('appointment/caldav/setup/', mail_views.appointment_caldav_setup, name='appointment_caldav_setup'),
     # API