diff --git a/docs/README.md b/docs/README.md index 3409fe5f..26781a3c 100644 --- a/docs/README.md +++ b/docs/README.md @@ -102,7 +102,8 @@ Example using JavaScript to generate a PayButton: wsBaseUrl: 'http://localhost:5000', apiBaseUrl: 'http://localhost:3000' disableAltpayment: true, - contributionOffset: 10 + contributionOffset: 10, + autoClose: true }; PayButton.render(document.getElementById('my_button'), config); @@ -983,6 +984,33 @@ contributionOffset = 10 ``` +## auto-close + +> **The ‘autoClose’ parameter automatically closes the payment dialog after a payment is received.** + +?> This parameter is optional. Default value is true. Possible values are true or false. +**Example:** + + +#### ** HTML ** + +```html +auto-close="false" +``` + +#### ** JavaScript ** + +```javascript +autoClose: false +``` + +#### ** React ** + +```react +autoClose = false +``` + + # Contribute PayButton is a community-driven open-source initiative. Contributions from the community are _crucial_ to the success of the project. diff --git a/docs/_sidebar.md b/docs/_sidebar.md index ffb60490..997f5571 100644 --- a/docs/_sidebar.md +++ b/docs/_sidebar.md @@ -29,6 +29,7 @@ - [api-base-url](/?id=api-base-url) - [disable-altpayment](/?id=disable-altpayment) - [contribution-offset](/?id=contribution-offset) + - [auto-close](/?id=auto-close) - [Contribute](/?id=contribute) - [Developer Quick Start](/?id=developer-quick-start) - [Getting Started](/?id=getting-started) diff --git a/docs/zh-cn/README.md b/docs/zh-cn/README.md index 42e77e1e..d31435db 100644 --- a/docs/zh-cn/README.md +++ b/docs/zh-cn/README.md @@ -979,6 +979,34 @@ contribution-offset: 10 contributionOffset = 10 ``` + +## auto-close + +> **‘autoClose’ 收到付款后，参数会自动关闭付款对话框** + +?> 此参数为可选参数。默认值为 true。可能的值为 true 或 false。 +**Example:** + + +#### ** HTML ** + +```html +auto-close="false" +``` + +#### ** JavaScript ** + +```javascript +autoClose: false +``` + +#### ** React ** + +```react +autoClose = false +``` + + # 贡献 PayButton是一个社群主导的开放源代码促进会。此项目的成功关键在于对社群的贡献。 diff --git a/docs/zh-cn/_sidebar.md b/docs/zh-cn/_sidebar.md index cee79266..1d7e1bdc 100644 --- a/docs/zh-cn/_sidebar.md +++ b/docs/zh-cn/_sidebar.md @@ -28,6 +28,7 @@ - [api-base-url](/zh-cn/?id=api-base-url) - [disable-altpayment](/zh-cn/?id=disable-altpayment) - [contribution-offset](/zh-cn/?id=contribution-offset) + - [auto-close](/zh-cn/?id=auto-close) - [贡献](/zh-cn/?id=贡献) - [开发人员快速入门](/zh-cn/?id=开发人员快速入门) - [入门](/zh-cn/?id=入门) diff --git a/docs/zh-tw/README.md b/docs/zh-tw/README.md index 34a2be1d..8a9a72e8 100644 --- a/docs/zh-tw/README.md +++ b/docs/zh-tw/README.md @@ -978,6 +978,34 @@ contribution-offset: 10 contributionOffset = 10 ``` + +## auto-close + +> **‘autoClose’ 收到付款後，參數會自動關閉付款對話框.** + +?> 此參數是可選的。預設值為 true。可能的值是真或假。 +**Example:** + + +#### ** HTML ** + +```html +auto-close="false" +``` + +#### ** JavaScript ** + +```javascript +autoClose: false +``` + +#### ** React ** + +```react +autoClose = false +``` + + # 貢獻 PayButton是一個社區主導的開放源代碼促進會。此項目的成功關鍵在於對社區的貢獻。 diff --git a/docs/zh-tw/_sidebar.md b/docs/zh-tw/_sidebar.md index a0e62748..a87ee3cb 100644 --- a/docs/zh-tw/_sidebar.md +++ b/docs/zh-tw/_sidebar.md @@ -28,6 +28,7 @@ - [api-base-url](/zh-tw/?id=api-base-url) - [disable-altpayment](/zh-tw/?id=disable-altpayment) - [contribution-offset](/zh-tw/?id=contribution-offset) + - [auto-close](/zh-tw/?id=auto-close) - [貢獻](/zh-tw/?id=貢獻) - [開發人員快速入門](/zh-tw/?id=開發人員快速入門) - [入門](/zh-tw/?id=入門) diff --git a/paybutton/src/index.tsx b/paybutton/src/index.tsx index 75671307..e7c9e205 100644 --- a/paybutton/src/index.tsx +++ b/paybutton/src/index.tsx @@ -100,7 +100,8 @@ const allowedProps = [ 'wsBaseUrl', 'apiBaseUrl', 'disableAltpayment', - 'contributionOffset' + 'contributionOffset', + 'autoClose' ]; const requiredProps = [ diff --git a/react/lib/components/PayButton/PayButton.tsx b/react/lib/components/PayButton/PayButton.tsx index 91e300bd..9206cf34 100644 --- a/react/lib/components/PayButton/PayButton.tsx +++ b/react/lib/components/PayButton/PayButton.tsx @@ -43,8 +43,9 @@ export interface PayButtonProps extends ButtonProps { onClose?: (success?: boolean, paymentId?:string) => void; wsBaseUrl?: string; apiBaseUrl?: string; - disableAltpayment?:boolean - contributionOffset?:number + disableAltpayment?: boolean + contributionOffset?: number + autoClose?: boolean } export const PayButton = (props: PayButtonProps): React.ReactElement => { @@ -81,7 +82,8 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => { wsBaseUrl, apiBaseUrl, disableAltpayment, - contributionOffset + contributionOffset, + autoClose } = Object.assign({}, PayButton.defaultProps, props); const [paymentId] = useState(!disablePaymentId ? generatePaymentId(8) : undefined); @@ -237,6 +239,7 @@ export const PayButton = (props: PayButtonProps): React.ReactElement => { hoverText={hoverText} disableAltpayment={disableAltpayment} contributionOffset={contributionOffset} + autoClose={autoClose} /> {errorMsg && (

{ @@ -82,6 +84,12 @@ export const PaymentDialog = ( const handleSuccess = (transaction: Transaction): void => { setSuccess(true); onSuccess?.(transaction); + setTimeout(() => { + setSuccess(false); + if (autoClose === true) { + handleWidgetClose(); + } + }, 3000); }; useEffect(() => { const invalidAmount = amount !== undefined && isNaN(+amount); @@ -167,6 +175,7 @@ PaymentDialog.defaultProps = { disabled: false, editable: false, dialogOpen: true, + autoClose: true, }; export default PaymentDialog; diff --git a/react/lib/components/Widget/WidgetContainer.tsx b/react/lib/components/Widget/WidgetContainer.tsx index d1229a4e..88fdd083 100644 --- a/react/lib/components/Widget/WidgetContainer.tsx +++ b/react/lib/components/Widget/WidgetContainer.tsx @@ -182,9 +182,11 @@ export const WidgetContainer: React.FunctionComponent = }Received ${receivedAmount} ${currencyTicker}`, snackbarOptions, ); - setSuccess(true); onSuccess?.(transaction); + setTimeout(() => { + setSuccess(false); + }, 3000); } else { onTransaction?.(transaction); }