fix: capture one time and subscriptions separately (#38630)

client/src/components/Donation/PayPalButtonScriptLoader.js

@@ -42,14 +42,20 @@ export class PayPalButtonScriptLoader extends Component {
       'paypal-sdk',
       true,
       `https://www.paypal.com/sdk/js${queries}`,
-      this.OnScriptLoad
+      this.onScriptLoad
     );
   }
 
-  OnScriptLoad = () => {
+  onScriptLoad = () => {
     this.setState({ isSdkLoaded: true });
   };
 
+  captureOneTimePayment(data, actions) {
+    return actions.order.capture().then(details => {
+      return this.props.onApprove(details, data);
+    });
+  }
+
   render() {
     const { isSdkLoaded, isSubscription } = this.state;
     const {
@@ -72,7 +78,11 @@ export class PayPalButtonScriptLoader extends Component {
       <Button
         createOrder={isSubscription ? null : createOrder}
         createSubscription={isSubscription ? createSubscription : null}
-        onApprove={onApprove}
+        onApprove={
+          isSubscription
+            ? (data, actions) => onApprove(data, actions)
+            : (data, actions) => this.captureOneTimePayment(data, actions)
+        }
         onCancel={onCancel}
         onError={onError}
         style={style}

client/src/components/Donation/PaypalButton.js

@@ -97,10 +97,9 @@ export class PaypalButton extends Component {
           });
         }}
         isSubscription={isSubscription}
-        onApprove={(data, actions) => {
+        on={true}
-          return actions.order.capture().then(function(data) {
+        onApprove={data => {
           this.handleApproval(data);
-          });
         }}
         onCancel={() => {
           this.props.onDonationStateChange(