@navinc/base-react-components
Version:
Nav's Pattern Library
87 lines (69 loc) • 2.22 kB
Markdown
Use the `<CCInput />` component when credit card information is needed. Nav uses
Stripe as our merchant processor. Nav does not store credit card information in
our system. For this reason, the CCInput component works differently than most
other form components. CCInput is a fully uncontrolled component. No credit card
information is stored with Nav so a value is not given to the CCInput component.
```
<CCInput
onChange={this.handelStripeChangeAction}
createTokenRef={(token) => this.token = token}
label='Credit Card Info'
/>
```
Stripe passes certain information back to the consumer via a callback that is
accessible via the `onChange` prop. At certain points, when the value in the
component changes, a change event is fired. This is useful for setting
error classes. The change event object looks like this.
```
{
brand: String
complete: Boolean
elementType: String
empty: Boolean
error: null | {
code: String
message: String
type: String
}
value : { [fieldName]: String }
}
```
Not all fields will trigger changes as values are updated (credit card numbers
only fire change events on blur) and not all fields will be represented in the
value property (PII fields never return values).
#### createTokenRef
Similar to React's `createRef`, this prop is a callback to the component.
Unlike `createRef`, this callback passes a reference to a function that the
consumer is expected to call with the customer billing address information.
This function returns a promise that resolves with the Stripe token needed to
complete the billing process.
```
<CCInput createTokenRef={(token) => this.token = token} />
```
```
class BillingForm extends Component {
submitHandler = () => {
this.createToken(this.state.billing)
.then((token) => {
this.props.submitBillingForm({
...this.state.billing,
stripeToken: token
})
})
}
render () {
...
<CCInput
createTokenRef={(createToken) => { this.createStripeToken = createToken }
/>
...
}
}
```
The displayed field label.
An array of error messages that will be displayed below the field.