Implement Paypal enterprise

examples/nextjs/app/page.tsx

@@ -55,7 +55,7 @@ export default async function Home() {
       ],
       paymentMethods: {
         card: {
-          processor: 'godaddy',
+          processor: 'paypal',
           checkoutTypes: ['standard'],
         },
         express: {

packages/localizations/src/deDe.ts

@@ -248,6 +248,11 @@ export const deDe = {
     selectState: 'Bundesland/Provinz auswählen',
     selectCountry: 'Land auswählen',
     enterCountry: 'Land eingeben',
+    invalidCardNumber: 'Ungültige Kartennummer',
+    invalidExpiry: 'Ungültiges Ablaufdatum',
+    invalidCvv: 'Ungültiger Sicherheitscode',
+    paymentSubmissionFailed:
+      'Zahlung fehlgeschlagen. Bitte versuchen Sie es erneut.',
   },
   apiErrors: {
     INTERNAL_SERVER_ERROR: 'Serverfehler',

packages/localizations/src/enIe.ts

@@ -243,6 +243,10 @@ export const enIe = {
     selectState: 'Select a county',
     selectCountry: 'Select a country',
     enterCountry: 'Enter a country',
+    invalidCardNumber: 'Invalid card number',
+    invalidExpiry: 'Invalid expiration date',
+    invalidCvv: 'Invalid security code',
+    paymentSubmissionFailed: 'Payment submission failed. Please try again.',
   },
   apiErrors: {
     INTERNAL_SERVER_ERROR: 'Server error',

packages/localizations/src/enUs.ts

@@ -243,6 +243,10 @@ export const enUs = {
     selectState: 'Select a state/province',
     selectCountry: 'Select a country',
     enterCountry: 'Enter a country',
+    invalidCardNumber: 'Invalid card number',
+    invalidExpiry: 'Invalid expiration date',
+    invalidCvv: 'Invalid security code',
+    paymentSubmissionFailed: 'Payment submission failed. Please try again.',
   },
   apiErrors: {
     INTERNAL_SERVER_ERROR: 'Server error',

packages/localizations/src/esAr.ts

@@ -245,6 +245,11 @@ export const esAr = {
     selectState: 'Seleccioná una provincia/región',
     selectCountry: 'Seleccioná un país',
     enterCountry: 'Ingresá un país',
+    invalidCardNumber: 'Número de tarjeta no válido',
+    invalidExpiry: 'Fecha de vencimiento no válida',
+    invalidCvv: 'Código de seguridad no válido',
+    paymentSubmissionFailed:
+      'Error al procesar el pago. Por favor, inténtalo de nuevo.',
   },
   apiErrors: {
     INTERNAL_SERVER_ERROR: 'Error del servidor',

packages/localizations/src/esCl.ts

@@ -247,6 +247,11 @@ export const esCl = {
     selectState: 'Selecciona una región/provincia',
     selectCountry: 'Selecciona un país',
     enterCountry: 'Ingresa un país',
+    invalidCardNumber: 'Número de tarjeta no válido',
+    invalidExpiry: 'Fecha de vencimiento no válida',
+    invalidCvv: 'Código de seguridad no válido',
+    paymentSubmissionFailed:
+      'Error al procesar el pago. Por favor, inténtalo de nuevo.',
   },
   apiErrors: {
     INTERNAL_SERVER_ERROR: 'Error del servidor',

packages/localizations/src/esCo.ts

@@ -245,6 +245,11 @@ export const esCo = {
     selectState: 'Selecciona un departamento/región',
     selectCountry: 'Selecciona un país',
     enterCountry: 'Ingresa un país',
+    invalidCardNumber: 'Número de tarjeta no válido',
+    invalidExpiry: 'Fecha de vencimiento no válida',
+    invalidCvv: 'Código de seguridad no válido',
+    paymentSubmissionFailed:
+      'Error al procesar el pago. Por favor, inténtalo de nuevo.',
   },
   apiErrors: {
     INTERNAL_SERVER_ERROR: 'Error del servidor',

packages/localizations/src/esEs.ts

@@ -245,6 +245,11 @@ export const esEs = {
     selectState: 'Selecciona un estado/provincia',
     selectCountry: 'Selecciona un país',
     enterCountry: 'Introduce un país',
+    invalidCardNumber: 'Número de tarjeta no válido',
+    invalidExpiry: 'Fecha de vencimiento no válida',
+    invalidCvv: 'Código de seguridad no válido',
+    paymentSubmissionFailed:
+      'Error al procesar el pago. Por favor, inténtalo de nuevo.',
   },
   apiErrors: {
     INTERNAL_SERVER_ERROR: 'Error del servidor',

packages/localizations/src/esMx.ts

@@ -245,6 +245,11 @@ export const esMx = {
     selectState: 'Seleccione un estado/provincia',
     selectCountry: 'Seleccione un país',
     enterCountry: 'Ingrese un país',
+    invalidCardNumber: 'Número de tarjeta no válido',
+    invalidExpiry: 'Fecha de vencimiento no válida',
+    invalidCvv: 'Código de seguridad no válido',
+    paymentSubmissionFailed:
+      'Error al procesar el pago. Por favor, inténtalo de nuevo.',
   },
   apiErrors: {
     INTERNAL_SERVER_ERROR: 'Error del servidor',

packages/localizations/src/esPe.ts

@@ -245,6 +245,11 @@ export const esPe = {
     selectState: 'Seleccione un departamento/región',
     selectCountry: 'Seleccione un país',
     enterCountry: 'Ingrese un país',
+    invalidCardNumber: 'Número de tarjeta no válido',
+    invalidExpiry: 'Fecha de vencimiento no válida',
+    invalidCvv: 'Código de seguridad no válido',
+    paymentSubmissionFailed:
+      'Error al procesar el pago. Por favor, inténtalo de nuevo.',
   },
   apiErrors: {
     INTERNAL_SERVER_ERROR: 'Error del servidor',

packages/localizations/src/esUs.ts

@@ -245,6 +245,11 @@ export const esUs = {
     selectState: 'Seleccione un estado/provincia',
     selectCountry: 'Seleccione un país',
     enterCountry: 'Ingrese un país',
+    invalidCardNumber: 'Número de tarjeta no válido',
+    invalidExpiry: 'Fecha de vencimiento no válida',
+    invalidCvv: 'Código de seguridad no válido',
+    paymentSubmissionFailed:
+      'Error al procesar el pago. Por favor, inténtalo de nuevo.',
   },
   apiErrors: {
     INTERNAL_SERVER_ERROR: 'Error del servidor',

packages/localizations/src/frCa.ts

@@ -250,6 +250,11 @@ export const frCa = {
     selectState: 'Sélectionnez une province/état',
     selectCountry: 'Sélectionnez un pays',
     enterCountry: 'Entrez un pays',
+    invalidCardNumber: 'Numéro de carte invalide',
+    invalidExpiry: "Date d'expiration invalide",
+    invalidCvv: 'Code de sécurité invalide',
+    paymentSubmissionFailed:
+      'Échec de la soumission du paiement. Veuillez réessayer.',
   },
   apiErrors: {
     INTERNAL_SERVER_ERROR: 'Erreur de serveur',

packages/localizations/src/frFr.ts

@@ -250,6 +250,11 @@ export const frFr = {
     selectState: 'Sélectionnez un état/province',
     selectCountry: 'Sélectionnez un pays',
     enterCountry: 'Entrez un pays',
+    invalidCardNumber: 'Numéro de carte invalide',
+    invalidExpiry: "Date d'expiration invalide",
+    invalidCvv: 'Code de sécurité invalide',
+    paymentSubmissionFailed:
+      'Échec de la soumission du paiement. Veuillez réessayer.',
   },
   apiErrors: {
     INTERNAL_SERVER_ERROR: 'Erreur du serveur',

packages/localizations/src/idId.ts

@@ -243,6 +243,10 @@ export const idId = {
     selectState: 'Pilih provinsi',
     selectCountry: 'Pilih negara',
     enterCountry: 'Masukkan negara',
+    invalidCardNumber: 'Nomor kartu tidak valid',
+    invalidExpiry: 'Tanggal kedaluwarsa tidak valid',
+    invalidCvv: 'Kode keamanan tidak valid',
+    paymentSubmissionFailed: 'Pengiriman pembayaran gagal. Silakan coba lagi.',
   },
   apiErrors: {
     INTERNAL_SERVER_ERROR: 'Error server',

packages/localizations/src/itIt.ts

@@ -251,6 +251,10 @@ export const itIt = {
     selectState: 'Seleziona una regione/provincia',
     selectCountry: 'Seleziona un paese',
     enterCountry: 'Inserisci un paese',
+    invalidCardNumber: 'Numero di carta non valido',
+    invalidExpiry: 'Data di scadenza non valida',
+    invalidCvv: 'Codice di sicurezza non valido',
+    paymentSubmissionFailed: 'Invio del pagamento non riuscito. Riprova.',
   },
   apiErrors: {
     INTERNAL_SERVER_ERROR: 'Errore del server',

packages/localizations/src/ptBr.ts

@@ -245,6 +245,11 @@ export const ptBr = {
     selectState: 'Selecione um estado/província',
     selectCountry: 'Selecione um país',
     enterCountry: 'Digite um país',
+    invalidCardNumber: 'Número de cartão inválido',
+    invalidExpiry: 'Data de validade inválida',
+    invalidCvv: 'Código de segurança inválido',
+    paymentSubmissionFailed:
+      'Falha no envio do pagamento. Por favor, tente novamente.',
   },
   apiErrors: {
     INTERNAL_SERVER_ERROR: 'Erro no servidor',

packages/localizations/src/qaPs.ts

@@ -247,6 +247,11 @@ export const qaPs = {
     selectState: '[Šëlëçţ â šţâţë/þrövîñçë frôm ţhë âvâîlâblë öþţîöñš]',
     selectCountry: '[Šëlëçţ â çöüñţrÿ frôm ţhë âvâîlâblë öþţîöñš]',
     enterCountry: '[Ëñţër â çöüñţrÿ ñâmë fôr löçâţîöñ]',
+    invalidCardNumber: '[Invalid card number ℓσяєм]',
+    invalidExpiry: '[Invalid expiration date ℓσяєм ιρѕυм]',
+    invalidCvv: '[Invalid security code ℓσяєм]',
+    paymentSubmissionFailed:
+      '[Payment submission failed. Please try again. ℓσяєм ιρѕυм ∂σℓσя]',
   },
   apiErrors: {
     INTERNAL_SERVER_ERROR: '[Šërvër ërrör öççürrëd]',

packages/localizations/src/trTr.ts

@@ -244,6 +244,11 @@ export const trTr = {
     selectState: 'Bir il/eyalet seçin',
     selectCountry: 'Bir ülke seçin',
     enterCountry: 'Bir ülke girin',
+    invalidCardNumber: 'Geçersiz kart numarası',
+    invalidExpiry: 'Geçersiz son kullanma tarihi',
+    invalidCvv: 'Geçersiz güvenlik kodu',
+    paymentSubmissionFailed:
+      'Ödeme gönderimi başarısız oldu. Lütfen tekrar deneyin.',
   },
   apiErrors: {
     INTERNAL_SERVER_ERROR: 'Sunucu hatası',

packages/localizations/src/viVn.ts

@@ -243,6 +243,10 @@ export const viVn = {
     selectState: 'Chọn tỉnh/thành phố',
     selectCountry: 'Chọn quốc gia',
     enterCountry: 'Nhập quốc gia',
+    invalidCardNumber: 'Số thẻ không hợp lệ',
+    invalidExpiry: 'Ngày hết hạn không hợp lệ',
+    invalidCvv: 'Mã bảo mật không hợp lệ',
+    paymentSubmissionFailed: 'Gửi thanh toán thất bại. Vui lòng thử lại.',
   },
   apiErrors: {
     INTERNAL_SERVER_ERROR: 'Lỗi máy chủ',

packages/localizations/src/zhCn.ts

@@ -236,6 +236,10 @@ export const zhCn = {
     selectState: '选择省份/地区',
     selectCountry: '选择国家',
     enterCountry: '请输入国家',
+    invalidCardNumber: '卡号无效',
+    invalidExpiry: '有效期无效',
+    invalidCvv: '安全码无效',
+    paymentSubmissionFailed: '付款提交失败。请重试。',
   },
   apiErrors: {
     INTERNAL_SERVER_ERROR: '服务器错误',

packages/localizations/src/zhSg.ts

@@ -236,6 +236,10 @@ export const zhSg = {
     selectState: '选择州/省',
     selectCountry: '选择国家',
     enterCountry: '输入国家',
+    invalidCardNumber: '卡號無效',
+    invalidExpiry: '有效期無效',
+    invalidCvv: '安全碼無效',
+    paymentSubmissionFailed: '付款提交失敗。請重試。',
   },
   apiErrors: {
     INTERNAL_SERVER_ERROR: '服务器错误',

packages/react/src/components/checkout/payment/checkout-buttons/credit-card/paypal.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useCallback, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useCheckoutContext } from '@/components/checkout/checkout';
+import { usePayPalProvider } from '@/components/checkout/payment/utils/paypal-provider';
+import { useIsPaymentDisabled } from '@/components/checkout/payment/utils/use-is-payment-disabled';
+import { Button } from '@/components/ui/button';
+import { useGoDaddyContext } from '@/godaddy-provider';
+
+export function PayPalCreditCardCheckoutButton() {
+  const { t } = useGoDaddyContext();
+  const { isConfirmingCheckout } = useCheckoutContext();
+  const isPaymentDisabled = useIsPaymentDisabled();
+  const form = useFormContext();
+  const { cardFieldsRef, isCardFieldsReady } = usePayPalProvider();
+  const [_isProcessing, setIsProcessing] = useState(false);
+
+  const handleSubmit = useCallback(async () => {
+    try {
+      setIsProcessing(true);
+
+      // Validate the form first
+      const valid = await form.trigger();
+      if (!valid) {
+        const firstError = Object.keys(form.formState.errors)[0];
+        if (firstError) {
+          form.setFocus(firstError);
+        }
+        return;
+      }
+
+      // Check if PayPal card fields are ready
+      if (!cardFieldsRef.current || !cardFieldsRef.current.isEligible()) {
+        return;
+      }
+
+      // Submit the PayPal payment
+      await cardFieldsRef.current.submit();
+    } catch (_error) {
+      // PayPal checkout failed
+    } finally {
+      setIsProcessing(false);
+    }
+  }, [form, cardFieldsRef]);
+
+  if (!isCardFieldsReady || !cardFieldsRef.current) {
+    return null;
+  }
+
+  return (
+    <Button
+      className='w-full'
+      size='lg'
+      type='button'
+      onClick={handleSubmit}
+      disabled={isConfirmingCheckout || isPaymentDisabled || !isCardFieldsReady}
+    >
+      {t.payment.payNow}
+    </Button>
+  );
+}

packages/react/src/components/checkout/payment/checkout-buttons/paypal/paypal.tsx

@@ -1,8 +1,4 @@
-import {
-  PayPalButtons,
-  PayPalScriptProvider,
-  usePayPalScriptReducer,
-} from '@paypal/react-paypal-js';
+import { PayPalButtons, usePayPalScriptReducer } from '@paypal/react-paypal-js';
 import { useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useCheckoutContext } from '@/components/checkout/checkout';
@@ -113,7 +109,6 @@ function PayPalButtonsWrapper() {
 export function PayPalCheckoutButton() {
   const { t } = useGoDaddyContext();
   const { paypalConfig } = useCheckoutContext();
-  const { payPalRequest } = useBuildPaymentRequest();
 
   if (!paypalConfig) {
     return (
@@ -123,22 +118,7 @@ export function PayPalCheckoutButton() {
 
   return (
     <div className='w-full'>
-      <PayPalScriptProvider
-        options={{
-          clientId: paypalConfig?.clientId,
-          currency:
-            payPalRequest?.purchase_units?.[0]?.amount?.currency_code || 'USD',
-          intent: 'capture',
-          disableFunding: paypalConfig?.disableFunding || [
-            'credit',
-            'card',
-            'paylater',
-            'venmo',
-          ],
-        }}
-      >
-        <PayPalButtonsWrapper />
-      </PayPalScriptProvider>
+      <PayPalButtonsWrapper />
     </div>
   );
 }

packages/react/src/components/checkout/payment/lazy-payment-loader.tsx

@@ -33,6 +33,13 @@ const LazyComponents = {
       default: module.SquareCreditCardForm,
     }))
   ),
+  PayPalCreditCardForm: lazy(() =>
+    import(
+      '@/components/checkout/payment/payment-methods/credit-card/paypal'
+    ).then(module => ({
+      default: module.PayPalCreditCardForm,
+    }))
+  ),
 
   // Credit Card Buttons
   CreditCardCheckoutButton: lazy(() =>
@@ -56,6 +63,13 @@ const LazyComponents = {
       default: module.SquareCreditCardCheckoutButton,
     }))
   ),
+  PayPalCreditCardCheckoutButton: lazy(() =>
+    import(
+      '@/components/checkout/payment/checkout-buttons/credit-card/paypal'
+    ).then(module => ({
+      default: module.PayPalCreditCardCheckoutButton,
+    }))
+  ),
 
   // Express Buttons
   ExpressCheckoutButton: lazy(() =>
@@ -132,6 +146,10 @@ type PaymentComponentRegistry = {
       form: PaymentComponentKey;
       button: PaymentComponentKey;
     };
+    [PaymentProvider.PAYPAL]: {
+      form: PaymentComponentKey;
+      button: PaymentComponentKey;
+    };
   };
   [PaymentMethodType.EXPRESS]?: {
     [PaymentProvider.GODADDY]: {
@@ -177,6 +195,10 @@ export const lazyPaymentComponentRegistry: PaymentComponentRegistry = {
       form: 'SquareCreditCardForm',
       button: 'SquareCreditCardCheckoutButton',
     },
+    [PaymentProvider.PAYPAL]: {
+      form: 'PayPalCreditCardForm',
+      button: 'PayPalCreditCardCheckoutButton',
+    },
   },
   [PaymentMethodType.EXPRESS]: {
     [PaymentProvider.STRIPE]: {