Epic: Update PayPal gateway to use card fields API

package.json

@@ -63,8 +63,8 @@
         "@givewp/form-builder-library": "^1.7.1",
         "@hookform/error-message": "^2.0.1",
         "@hookform/resolvers": "^2.9.10",
-        "@paypal/paypal-js": "^5.1.4",
-        "@paypal/react-paypal-js": "^7.8.2",
+        "@paypal/paypal-js": "^8.2.0",
+        "@paypal/react-paypal-js": "^8.8.2",
         "@picocss/pico": "^1.5.7",
         "@stripe/react-stripe-js": "^2.1.0",
         "@stripe/stripe-js": "^1.52.0",

src/DonationForms/resources/app/hooks/useFormData.ts

@@ -44,22 +44,26 @@ const amountToMinorUnit = (amount: string, currency: string) => {
 /**
  * Donation total calculation
  *
+ * @unreleased Round return value
  * @since 4.0.0
  */
 const getAmountTotal = (totals: DonationTotals, amount: number) =>
-    Number(
-        Object.values({
-            ...totals,
-            amount,
-        }).reduce((total: number, amount: number) => {
-            return total + amount;
-        }, 0)
+    normalizeAmount(
+        Number(
+            Object.values({
+                ...totals,
+                amount,
+            }).reduce((total: number, amount: number) => {
+                return total + amount;
+            }, 0)
+        )
     );
 
 /**
  * Subscription total calculation
  * TODO: figure out which totals will be included in subscriptions
  *
+ * @unreleased Round return value
  * @since 4.0.0
  */
 const getSubscriptionTotal = (totals: DonationTotals, amount: number) => {
@@ -74,9 +78,14 @@ const getSubscriptionTotal = (totals: DonationTotals, amount: number) => {
         }
     }
 
-    return Number(total + amount);
+    return normalizeAmount(Number(total + amount));
 };
 
+/**
+ * @unreleased
+ */
+const normalizeAmount = (amount: number) => Math.round(amount * 100) / 100;
+
 /**
  * @since 4.0.0
  */

src/PaymentGateways/Gateways/PayPalCommerce/PayPalCommerceGateway.php

@@ -5,6 +5,7 @@
 use Exception;
 use Give\DonationForms\Actions\GenerateDonationFormValidationRouteUrl;
 use Give\Framework\Support\Scripts\Concerns\HasScriptAssetFile;
+use Give\Helpers\Form\Utils;
 use Give\Helpers\Language;
 use Give\PaymentGateways\PayPalCommerce\Models\MerchantDetail;
 use Give\PaymentGateways\PayPalCommerce\PayPalCommerce;
@@ -85,25 +86,52 @@ private function getPayPalSDKOptions(int $formId): array
         // Add hosted fields if payment field type is auto and connect account type supports custom payments.
         $paymentFieldType = give_get_option('paypal_payment_field_type', 'auto');
         $paymentComponents[] = 'buttons';
-        if ('auto' === $paymentFieldType && $merchantDetailModel->supportsCustomPayments) {
-            $paymentComponents[] = 'hosted-fields';
-        }
+
+        $formIsV3 = Utils::isV3Form($formId);
+        $venmoEnabled = give_is_setting_enabled(give_get_option('paypal_commerce_accept_venmo', 'disabled'));
+        $fieldsEnabled = 'auto' === $paymentFieldType && $merchantDetailModel->supportsCustomPayments;
 
         $data = [
-            // data-namespace is required for multiple PayPal SDKs to load in harmony.
-            'data-namespace' => 'givewp/paypal-commerce',
-            'client-id' => $merchantDetailModel->clientId,
-            'components' => implode(',', $paymentComponents),
-            'disable-funding' => 'credit',
             'intent' => 'capture',
             'vault' => 'false',
-            'data-partner-attribution-id' => give('PAYPAL_COMMERCE_ATTRIBUTION_ID'),
-            'data-client-token' => $merchantDetailRepository->getClientToken(),
             'currency' => give_get_currency($formId),
         ];
 
-        if (give_is_setting_enabled(give_get_option('paypal_commerce_accept_venmo', 'disabled'))) {
-            $data['enable-funding'] = 'venmo';
+        if ($formIsV3) {
+            if ($fieldsEnabled) {
+                $paymentComponents[] = 'card-fields';
+            }
+
+            $data = array_merge($data, [
+                'dataNamespace' => 'givewp/paypal-commerce',
+                'clientId' => $merchantDetailModel->clientId,
+                'disableFunding' => 'credit',
+                'dataPartnerAttributionId' => give('PAYPAL_COMMERCE_ATTRIBUTION_ID'),
+                'dataClientToken' => $merchantDetailRepository->getClientToken(),
+                'components' => implode(',', $paymentComponents),
+            ]);
+
+            if ($venmoEnabled){
+                $data['enableFunding'] = 'venmo';
+            }
+        } else {
+            if ($fieldsEnabled) {
+                $paymentComponents[] = 'hosted-fields';
+            }
+
+            $data = array_merge($data, [
+                // data-namespace is required for multiple PayPal SDKs to load in harmony.
+                'data-namespace' => 'givewp/paypal-commerce',
+                'client-id' => $merchantDetailModel->clientId,
+                'disable-funding' => 'credit',
+                'data-partner-attribution-id' => give('PAYPAL_COMMERCE_ATTRIBUTION_ID'),
+                'data-client-token' => $merchantDetailRepository->getClientToken(),
+                'components' => implode(',', $paymentComponents),
+            ]);
+
+            if ($venmoEnabled){
+                $data['enable-funding'] = 'venmo';
+            }
         }
 
         return $data;