paypal configs

Co-authored-by: Pete Matsyburka <pete@docuseal.com>
2026-07-28 19:27:25 +03:00
parent 972f38242e
commit b8c29324b8
11 changed files with 334 additions and 72 deletions
@@ -560,6 +560,7 @@
            :fields="formulaFields"
            :values="values"
            :readonly-values="readonlyFieldValues"
+            :provider="paymentProvider"
            @attached="attachments.push($event)"
            @focus="scrollIntoField(currentField)"
            @submit="!isSubmitting && submitStep()"
@@ -1000,6 +1001,11 @@ export default {
      required: false,
      default: ''
    },
+    paymentProvider: {
+      type: String,
+      required: false,
+      default: ''
+    },
    values: {
      type: Object,
      required: false,
@@ -107,6 +107,7 @@ const en = {
  email_has_been_sent: 'Email has been sent',
  processing: 'Processing',
  pay_with_stripe: 'Pay with Stripe',
+  pay_with_paypal: 'Pay with PayPal',
  reupload: 'Reupload',
  upload: 'Upload',
  files: 'Files',
@@ -225,6 +226,7 @@ const es = {
  email_has_been_sent: 'El correo electrónico ha sido enviado',
  processing: 'Procesando',
  pay_with_stripe: 'Pagar con Stripe',
+  pay_with_paypal: 'Pagar con PayPal',
  reupload: 'Volver a subir',
  upload: 'Subir',
  files: 'Archivos',
@@ -343,6 +345,7 @@ const it = {
  email_has_been_sent: "L'email è stata inviata",
  processing: 'Elaborazione',
  pay_with_stripe: 'Paga con Stripe',
+  pay_with_paypal: 'Paga con PayPal',
  reupload: 'Ricarica',
  upload: 'Carica',
  files: 'File',
@@ -461,6 +464,7 @@ const de = {
  email_has_been_sent: 'E-Mail wurde gesendet',
  processing: 'Verarbeitung',
  pay_with_stripe: 'Mit Stripe bezahlen',
+  pay_with_paypal: 'Mit PayPal bezahlen',
  reupload: 'Erneut hochladen',
  upload: 'Hochladen',
  files: 'Dateien',
@@ -579,6 +583,7 @@ const fr = {
  email_has_been_sent: "L'e-mail a été envoyé",
  processing: 'Traitement en cours',
  pay_with_stripe: 'Payer avec Stripe',
+  pay_with_paypal: 'Payer avec PayPal',
  reupload: 'Retéléverser',
  upload: 'Téléverser',
  files: 'Fichiers',
@@ -697,6 +702,7 @@ const pl = {
  email_has_been_sent: 'E-mail został wysłany',
  processing: 'Przetwarzanie',
  pay_with_stripe: 'Zapłać za pomocą Stripe',
+  pay_with_paypal: 'Zapłać za pomocą PayPal',
  reupload: 'Ponowne przesłanie',
  upload: 'Przesyłanie',
  files: 'Pliki',
@@ -815,6 +821,7 @@ const uk = {
  email_has_been_sent: 'Електронний лист був відправлений',
  processing: 'Обробка',
  pay_with_stripe: 'Сплатити за допомогою Stripe',
+  pay_with_paypal: 'Сплатити за допомогою PayPal',
  reupload: 'Перезавантажити',
  upload: 'Завантажити',
  files: 'Файли',
@@ -933,6 +940,7 @@ const cs = {
  email_has_been_sent: 'E-mail byl odeslán',
  processing: 'Zpracování',
  pay_with_stripe: 'Zaplatit přes Stripe',
+  pay_with_paypal: 'Zaplatit přes PayPal',
  reupload: 'Znovu nahrát',
  upload: 'Nahrát',
  files: 'Soubory',
@@ -1051,6 +1059,7 @@ const pt = {
  email_has_been_sent: 'Email enviado',
  processing: 'Processamento',
  pay_with_stripe: 'Pagar com Stripe',
+  pay_with_paypal: 'Pagar com PayPal',
  reupload: 'Recarregar',
  upload: 'Carregar',
  files: 'Arquivos',
@@ -1169,6 +1178,7 @@ const he = {
  email_has_been_sent: 'האימייל נשלח',
  processing: 'מעבד',
  pay_with_stripe: 'שלם עם סטרייפ',
+  pay_with_paypal: 'שלם עם פייפאל',
  reupload: 'העלה שוב',
  upload: 'העלאה',
  files: 'קבצים',
@@ -1287,6 +1297,7 @@ const nl = {
  email_has_been_sent: 'E-mail is verzonden',
  processing: 'Verwerken',
  pay_with_stripe: 'Betalen met Stripe',
+  pay_with_paypal: 'Betalen met PayPal',
  reupload: 'Opnieuw uploaden',
  upload: 'Uploaden',
  files: 'Bestanden',
@@ -1405,6 +1416,7 @@ const ar = {
  email_has_been_sent: 'تم إرسال البريد الإلكتروني',
  processing: 'جارٍ المعالجة',
  pay_with_stripe: 'الدفع بواسطة Stripe',
+  pay_with_paypal: 'الدفع بواسطة PayPal',
  reupload: 'إعادة التحميل',
  upload: 'تحميل',
  files: 'الملفات',
@@ -1523,6 +1535,7 @@ const ko = {
  email_has_been_sent: '이메일이 전송되었습니다',
  processing: '처리 중',
  pay_with_stripe: '스트라이프로 결제',
+  pay_with_paypal: 'PayPal로 결제',
  reupload: '다시 업로드',
  upload: '업로드',
  files: '파일',
@@ -1641,6 +1654,7 @@ const ja = {
  email_has_been_sent: 'メールが送信されました',
  processing: '処理中',
  pay_with_stripe: 'Stripeで支払う',
+  pay_with_paypal: 'PayPalで支払う',
  reupload: '再アップロード',
  upload: 'アップロード',
  files: 'ファイル',
@@ -1,6 +1,6 @@
 <template>
  <label
-    v-if="!modelValue && !sessionId"
+    v-if="!modelValue && !isProcessing"
    class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5 field-name-label"
  >
    <MarkdownContent
@@ -25,14 +25,14 @@
      class="hidden"
    >
    <div
-      v-if="modelValue && !sessionId"
+      v-if="modelValue && !isProcessing"
      class=" text-2xl mb-2"
    >
      {{ t('already_paid') }}
    </div>
    <div v-else>
      <button
-        v-if="sessionId"
+        v-if="isProcessing"
        type="button"
        disabled
        class="base-button w-full modal-save-button"
@@ -49,8 +49,8 @@
        v-else
        :id="field.uuid"
        type="button"
-        class="btn bg-[#7B73FF] text-white hover:bg-[#0A2540] text-lg w-full"
-        :class="{ disabled: isCreatingCheckout }"
+        class="btn text-white text-lg w-full"
+        :class="[isPaypal ? 'bg-[#003087] hover:bg-[#012169]' : 'bg-[#7B73FF] hover:bg-[#0A2540]', { disabled: isCreatingCheckout }]"
        :disabled="isCreatingCheckout"
        @click.prevent="postCheckout"
      >
@@ -59,12 +59,16 @@
          width="22"
          class="animate-spin"
        />
+        <IconBrandPaypal
+          v-else-if="isPaypal"
+          width="22"
+        />
        <IconBrandStripe
          v-else
          width="22"
        />
        <span>
-          {{ t('pay_with_stripe') }}
+          {{ isPaypal ? t('pay_with_paypal') : t('pay_with_stripe') }}
        </span>
      </button>
    </div>
@@ -72,13 +76,14 @@
 </template>

 <script>
-import { IconBrandStripe, IconInnerShadowTop, IconLoader } from '@tabler/icons-vue'
+import { IconBrandStripe, IconBrandPaypal, IconInnerShadowTop, IconLoader } from '@tabler/icons-vue'
 import MarkdownContent from './markdown_content'

 export default {
  name: 'PaymentStep',
  components: {
    IconBrandStripe,
+    IconBrandPaypal,
    MarkdownContent,
    IconInnerShadowTop,
    IconLoader
@@ -111,12 +116,18 @@ export default {
    submitterSlug: {
      type: String,
      required: true
+    },
+    provider: {
+      type: String,
+      required: false,
+      default: ''
    }
  },
  emits: ['focus', 'submit', 'update:model-value', 'attached'],
  data () {
    return {
      isCreatingCheckout: false,
+      isProcessing: false,
      isMathLoaded: false
    }
  },
@@ -131,8 +142,14 @@ export default {
    queryParams () {
      return new URLSearchParams(window.location.search)
    },
+    isPaypal () {
+      return this.provider === 'paypal'
+    },
+    paymentEndpoint () {
+      return this.isPaypal ? '/api/paypal_payments' : '/api/stripe_payments'
+    },
    sessionId () {
-      return this.queryParams.get('stripe_session_id')
+      return this.queryParams.get('stripe_session_id') || this.queryParams.get('paypal_order_id') || (this.isPaypal && this.queryParams.get('token'))
    },
    defaultName () {
      if (this.field.preferences?.price_id || this.field.preferences?.payment_link_id) {
@@ -159,6 +176,8 @@ export default {
  },
  async mounted () {
    if (this.sessionId) {
+      this.isProcessing = true
+
      this.$emit('submit')
    }

@@ -175,6 +194,21 @@ export default {
    }
  },
  methods: {
+    normalizedPaymentUrl () {
+      const url = new URL(window.location.href)
+      const keys = ['stripe_session_id', 'paypal_order_id', 'field_uuid']
+
+      if (this.isPaypal) {
+        keys.push('token', 'PayerID')
+      }
+
+      keys.forEach((key) => url.searchParams.delete(key))
+
+      return url.toString()
+    },
+    normalizedPaymentParams () {
+      window.history.replaceState({}, document.title, this.normalizedPaymentUrl())
+    },
    calculateFormula () {
      const transformedFormula = this.normalizeFormula(this.field.preferences.formula).replace(/{{(.*?)}}/g, (match, uuid) => {
        return this.readonlyValues[uuid] || this.values[uuid] || 0.0
@@ -195,7 +229,7 @@ export default {
    },
    async submit () {
      if (this.sessionId) {
-        return fetch(this.baseUrl + '/api/stripe_payments/' + this.sessionId, {
+        return fetch(this.baseUrl + this.paymentEndpoint + '/' + this.sessionId, {
          method: 'PUT',
          body: JSON.stringify({
            submitter_slug: this.submitterSlug
@@ -203,16 +237,22 @@ export default {
          headers: { 'Content-Type': 'application/json' }
        }).then(async (resp) => {
          if (resp.status === 422 || resp.status === 500) {
+            this.isProcessing = false
+
            const data = await resp.json()

-            alert(data.error || 'Unexpected error')
+            if (data.error) {
+              alert(data.error)
+            }

            return Promise.reject(new Error(data.error))
          }

          const attachment = await resp.json()

-          window.history.replaceState({}, document.title, window.location.pathname)
+          this.isProcessing = false
+
+          this.normalizedPaymentParams()

          this.$emit('update:model-value', attachment.uuid)
          this.$emit('attached', attachment)
@@ -226,13 +266,13 @@ export default {
    postCheckout ({ checkStatus } = {}) {
      this.isCreatingCheckout = true

-      fetch(this.baseUrl + '/api/stripe_payments', {
+      fetch(this.baseUrl + this.paymentEndpoint, {
        method: 'POST',
        body: JSON.stringify({
          submitter_slug: this.submitterSlug,
          field_uuid: this.field.uuid,
          check_status: checkStatus,
-          referer: document.location.href
+          referer: this.normalizedPaymentUrl()
        }),
        headers: { 'Content-Type': 'application/json' }
      }).then(async (resp) => {