-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
c126874
commit 4e6d85e
Showing
8 changed files
with
15,713 additions
and
9,912 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
import { Story, Subtitle, Props } from '@storybook/addon-docs/blocks'; | ||
import { propsSlotFor } from '../shared/prop-types'; | ||
import { RiskDataCollector } from '../../lib'; | ||
|
||
<Meta title="Components/RiskDataCollector"parameters={{ sortOrder: 6 }} /> | ||
|
||
# RiskDataCollector | ||
<Subtitle slot={() => 'Fraud protection for your checkout'} /> | ||
|
||
`import { RiskDataCollector } from '@recurly/react-recurly';` | ||
|
||
This component adds data collection elements to your checkout which are applied to any tokens generated within the bounds of its nearest ascendant parent `HTMLFormElement`. | ||
|
||
This component is compatible with [Recurly Fraud Management][doc-recurly-fraud-management] and [Kount][doc-kount]. | ||
|
||
```js | ||
import { RiskDataCollector } from '@recurly/react-recurly'; | ||
|
||
() => { | ||
const handleError = (error) => { | ||
// error.code | ||
// error.message | ||
}; | ||
|
||
return ( | ||
<RiskDataCollector | ||
strategy="kount" | ||
onError={handleError} | ||
/> | ||
); | ||
}; | ||
``` | ||
|
||
<Props slot={propsSlotFor(RiskDataCollector, {})} /> | ||
|
||
[doc-recurly-fraud-management]: https://docs.recurly.com/docs/fraud-management | ||
[doc-kount]: https://docs.recurly.com/docs/kount |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,86 @@ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import { RecurlyContext } from './provider'; | ||
|
||
export const RISK_STRATEGIES = ['kount']; | ||
|
||
/** | ||
* Injects risk data collection point in your checkout. | ||
* | ||
* <https://docs.recurly.com/docs/kount> | ||
*/ | ||
export default class RiskDataCollector extends React.Component { | ||
static propTypes = { | ||
/** | ||
* Applied to the container. | ||
*/ | ||
id: PropTypes.string, | ||
|
||
/** | ||
* Applied to the container. | ||
*/ | ||
className: PropTypes.string, | ||
|
||
/** | ||
* Risk data collection strategy. | ||
* | ||
* Possible values: 'kount' | ||
*/ | ||
strategy: PropTypes.oneOf(RISK_STRATEGIES), | ||
|
||
/** | ||
* Called when an error is encountered | ||
* @type {FraudDataCollector~onError} | ||
*/ | ||
|
||
/** | ||
* @callback FraudDataCollector~onError | ||
* @param {RecurlyError} | ||
*/ | ||
onError: PropTypes.func | ||
}; | ||
|
||
static defaultProps = { | ||
id: undefined, | ||
className: undefined, | ||
strategy: RISK_STRATEGIES[0], | ||
onError: e => { throw e } | ||
}; | ||
|
||
static contextType = RecurlyContext; | ||
|
||
constructor (props, context) { | ||
super(props, context); | ||
|
||
if (!context || !context.recurly) { | ||
throw new Error('<RiskDataCollector> must be within a <RecurlyProvider> tree.'); | ||
} | ||
|
||
/** | ||
* TODO | ||
* Once recurly.Fraud is decommissioned in favor of recurly.Risk.FraudConcern, | ||
* this will change to consume a RiskProvider. | ||
*/ | ||
this._container = React.createRef(); | ||
this._recurly = this.context.recurly; | ||
} | ||
|
||
componentDidMount () { | ||
const { _container: container, _recurly: recurly } = this; | ||
const { strategy, onError } = this.props; | ||
|
||
recurly.configure({ fraud: { [strategy]: { dataCollector: true, form: container } } }); | ||
const fraud = this._fraud = recurly.fraud; | ||
fraud.on('error', (...args) => onError(...args)); | ||
} | ||
|
||
render () { | ||
return ( | ||
<div | ||
id={this.props.id} | ||
className={this.props.className} | ||
ref={this._container} | ||
/> | ||
); | ||
} | ||
}; |
Oops, something went wrong.