fix: correctly handles currency prop

src/index.tsx

@@ -1,214 +1,198 @@
-import "@babel/polyfill";
-import React from "react";
-import ReactDOM from "react-dom";
-import PropTypes from "prop-types";
+import '@babel/polyfill';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
 
 export interface PayPalButtonProps {
-    amount?: number|string,
-    currency?: number|string,
-    onSuccess?: Function,
-    catchError?: Function,
-    onError?: Function,
-    createOrder?: Function,
-    onApprove?: Function,
-    style?: object,
-    options?: PaypalOptions,
-    onButtonReady?: Function,
+  amount?: number | string;
+  currency?: number | string;
+  onSuccess?: Function;
+  catchError?: Function;
+  onError?: Function;
+  createOrder?: Function;
+  onApprove?: Function;
+  style?: object;
+  options?: PaypalOptions;
+  onButtonReady?: Function;
 }
 
 export interface PayPalButtonState {
-    isSdkReady: boolean
+  isSdkReady: boolean;
 }
 
 export interface PaypalOptions {
-    clientId?: string,
-    merchantId?: string,
-    currency?: number|string,
-    intent?: string,
-    commit?: boolean|string,
-    vault?: boolean|string,
-    component?: string,
-    disableFunding?: string,
-    disableCard?: string,
-    integrationDate?: string,
-    locale?: string,
-    buyerCountry?: string,
-    debug?: boolean|string
+  clientId?: string;
+  merchantId?: string;
+  currency?: number | string;
+  intent?: string;
+  commit?: boolean | string;
+  vault?: boolean | string;
+  component?: string;
+  disableFunding?: string;
+  disableCard?: string;
+  integrationDate?: string;
+  locale?: string;
+  buyerCountry?: string;
+  debug?: boolean | string;
 }
 
-class PayPalButton extends React.Component<PayPalButtonProps, PayPalButtonState> {
-    static propTypes = {
-        amount: PropTypes.oneOfType([
-            PropTypes.number,
-            PropTypes.string,
-        ]),
-        currency: PropTypes.oneOfType([
-            PropTypes.number,
-            PropTypes.string,
-        ]),
-        onSuccess: PropTypes.func,
-        catchError: PropTypes.func,
-        onError: PropTypes.func,
-        createOrder: PropTypes.func,
-        onApprove: PropTypes.func,
-        style: PropTypes.object,
-        options: PropTypes.shape({
-            clientId: PropTypes.string,
-            merchantId: PropTypes.string,
-            currency: PropTypes.oneOfType([
-                PropTypes.number,
-                PropTypes.string,
-            ]),
-            intent: PropTypes.string,
-            commit: PropTypes.oneOfType([
-                PropTypes.bool,
-                PropTypes.string
-            ]),
-            vault: PropTypes.oneOfType([
-                PropTypes.bool,
-                PropTypes.string
-            ]),
-            component: PropTypes.string,
-            disableFunding: PropTypes.string,
-            disableCard: PropTypes.string,
-            integrationDate: PropTypes.string,
-            locale: PropTypes.string,
-            buyerCountry: PropTypes.string,
-            debug: PropTypes.oneOfType([
-                PropTypes.bool,
-                PropTypes.string
-            ])
-        }),
-        onButtonReady: PropTypes.func,
+class PayPalButton extends React.Component<
+  PayPalButtonProps,
+  PayPalButtonState
+> {
+  static propTypes = {
+    amount: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    currency: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    onSuccess: PropTypes.func,
+    catchError: PropTypes.func,
+    onError: PropTypes.func,
+    createOrder: PropTypes.func,
+    onApprove: PropTypes.func,
+    style: PropTypes.object,
+    options: PropTypes.shape({
+      clientId: PropTypes.string,
+      merchantId: PropTypes.string,
+      currency: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+      intent: PropTypes.string,
+      commit: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+      vault: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+      component: PropTypes.string,
+      disableFunding: PropTypes.string,
+      disableCard: PropTypes.string,
+      integrationDate: PropTypes.string,
+      locale: PropTypes.string,
+      buyerCountry: PropTypes.string,
+      debug: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
+    }),
+    onButtonReady: PropTypes.func
+  };
+
+  static defaultProps = {
+    style: {},
+    options: {
+      clientId: 'sb',
+      currency: 'USD'
     }
-
-    static defaultProps = {
-        style: {},
-        options: {
-            clientId: "sb",
-            currency: "USD"
-        },
-    }
-
-    constructor(props: PayPalButtonProps) {
-        super(props);
-
-        this.state = {
-            isSdkReady: false,
-        };
+  };
+
+  constructor(props: PayPalButtonProps) {
+    super(props);
+
+    this.state = {
+      isSdkReady: false
+    };
+  }
+
+  componentDidMount() {
+    if (window !== undefined && window.paypal === undefined) {
+      this.addPaypalSdk();
+    } else if (
+      window !== undefined &&
+      window.paypal !== undefined &&
+      this.props.onButtonReady
+    ) {
+      this.props.onButtonReady();
     }
-
-    componentDidMount() {
-        if (
-            window !== undefined &&
-            window.paypal === undefined
-        ) {
-            this.addPaypalSdk();
+  }
+
+  createOrder(data: any, actions: any) {
+    return actions.order.create({
+      purchase_units: [
+        {
+          amount: {
+            currency_code: this.props.currency
+              ? this.props.currency
+              : this.props.options && this.props.options.currency
+              ? this.props.options.currency
+              : 'USD',
+            value: this.props.amount.toString()
+          }
         }
-        else if (
-            window !== undefined &&
-            window.paypal !== undefined &&
-            this.props.onButtonReady
-        ) {
-            this.props.onButtonReady();
+      ]
+    });
+  }
+
+  onApprove(data: any, actions: any) {
+    return actions.order
+      .capture()
+      .then(details => {
+        if (this.props.onSuccess) {
+          return this.props.onSuccess(details, data);
         }
-    }
+      })
+      .catch(err => {
+        if (this.props.catchError) {
+          return this.props.catchError(err);
+        }
+      });
+  }
 
-    createOrder(data: any, actions: any) {
-        return actions.order
-            .create({
-                purchase_units: [{
-                    amount: {
-                        currency_code: this.props.currency
-                            ? this.props.currency
-                            : this.props.options && this.props.options.currency
-                            ? this.props.options.currency
-                            : "USD",
-                        value: this.props.amount.toString()
-                    },
-                }]
-            });
-    }
+  render() {
+    const { amount, onSuccess, createOrder, onApprove, style } = this.props;
+    const { isSdkReady } = this.state;
 
-    onApprove(data: any, actions: any) {
-        return actions.order
-            .capture()
-            .then((details) => {
-                if (this.props.onSuccess) {
-                    return this.props.onSuccess(details, data);
-                }
-            })
-            .catch((err) => {
-                if (this.props.catchError) {
-                    return this.props.catchError(err);
-                }
-            });
+    if (!isSdkReady && window.paypal === undefined) {
+      return null;
     }
 
-    render() {
-        const {
-            amount,
-            onSuccess,
-            createOrder,
-            onApprove,
-            style,
-        } = this.props;
-        const { isSdkReady } = this.state;
-
-        if (!isSdkReady && window.paypal === undefined) {
-            return null;
+    const Button = window.paypal.Buttons.driver('react', {
+      React,
+      ReactDOM
+    });
+
+    return (
+      <Button
+        {...this.props}
+        createOrder={
+          amount && !createOrder
+            ? (data: any, actions: any) => this.createOrder(data, actions)
+            : (data: any, actions: any) => createOrder(data, actions)
         }
-
-        const Button = window.paypal.Buttons.driver("react", {
-            React,
-            ReactDOM,
-        });
-
-        return (
-            <Button
-                {...this.props}
-                createOrder={
-                    amount && !createOrder
-                        ? (data: any, actions: any) => this.createOrder(data, actions)
-                        : (data: any, actions: any) => createOrder(data, actions)
-                }
-                onApprove={
-                    onSuccess
-                        ? (data: any, actions: any) => this.onApprove(data, actions)
-                        : (data: any, actions: any) => onApprove(data, actions)
-                }
-                style={style}
-            />
-        );
-    }
-
-    private addPaypalSdk() {
-        const { options, onButtonReady } = this.props;
-        const queryParams: string[] = [];
-
-        // replacing camelCase with dashes
-        Object.keys(options).forEach(k => {
-            const name = k.split(/(?=[A-Z])/).join("-").toLowerCase();
-            queryParams.push(`${name}=${options[k]}`);
-        });
-
-        const script = document.createElement("script");
-        script.type = "text/javascript";
-        script.src = `https://www.paypal.com/sdk/js?${queryParams.join("&")}`;
-        script.async = true;
-        script.onload = () => {
-            this.setState({ isSdkReady: true });
-
-            if (onButtonReady) {
-                onButtonReady();
-            }
-        };
-        script.onerror = () => {
-            throw new Error("Paypal SDK could not be loaded.");
-        };
-
-        document.body.appendChild(script);
-    }
+        onApprove={
+          onSuccess
+            ? (data: any, actions: any) => this.onApprove(data, actions)
+            : (data: any, actions: any) => onApprove(data, actions)
+        }
+        style={style}
+      />
+    );
+  }
+
+  private addPaypalSdk() {
+    const { currency, options, onButtonReady } = this.props;
+    const queryParams: string[] = [];
+
+    console.log(Object.entries(options));
+
+    // replacing camelCase with dashes
+    Object.keys(options).forEach(k => {
+      const name = k
+        .split(/(?=[A-Z])/)
+        .join('-')
+        .toLowerCase();
+      queryParams.push(`${name}=${options[k]}`);
+    });
+
+    // Append currency from props
+    queryParams.push(`currency=${currency}`);
+
+    const script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.src = `https://www.paypal.com/sdk/js?${queryParams.join('&')}`;
+    script.async = true;
+    script.onload = () => {
+      this.setState({ isSdkReady: true });
+
+      if (onButtonReady) {
+        onButtonReady();
+      }
+    };
+    script.onerror = () => {
+      throw new Error('Paypal SDK could not be loaded.');
+    };
+
+    document.body.appendChild(script);
+  }
 }
 
 export { PayPalButton };