diff --git a/src/index.tsx b/src/index.tsx index 1addd87..9049d9f 100644 --- a/src/index.tsx +++ b/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 { - 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 ( +