mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-08-12 04:50:18 +00:00
Updated react-stripe-elements CVC definitions (#36881)
* Updated react-stripe-elements CVC definitions In version [4.0](https://github.com/stripe/react-stripe-elements/blob/master/CHANGELOG.md#v400---2019-07-05) of react-stripe-elements the CardCVCElement was renamed CardCvcElement. The old name will be aliased until v5. This PR adds this alias. * Removed silly semi * Removed unnecessary semi-colon
This commit is contained in:
committed by
Wesley Wigham
parent
d793a23371
commit
74f51366f0
+6
-3
@@ -1,4 +1,4 @@
|
||||
// Type definitions for react-stripe-elements 1.1
|
||||
// Type definitions for react-stripe-elements 1.2
|
||||
// Project: https://github.com/stripe/react-stripe-elements#readme
|
||||
// Definitions by: dan-j <https://github.com/dan-j>
|
||||
// Santiago Doldan <https://github.com/santiagodoldan>
|
||||
@@ -7,6 +7,7 @@
|
||||
// Thomas Chia <https://github.com/thchia>
|
||||
// Piotr Dabrowski <https://github.com/yhnavein>
|
||||
// Victor Irzak <https://github.com/virzak>
|
||||
// Alex Price <https://github.com/remotealex>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.8
|
||||
|
||||
@@ -85,8 +86,10 @@ export class CardNumberElement extends React.Component<ReactStripeElements.Eleme
|
||||
export class CardExpiryElement extends React.Component<ReactStripeElements.ElementProps> {
|
||||
}
|
||||
|
||||
export class CardCVCElement extends React.Component<ReactStripeElements.ElementProps> {
|
||||
}
|
||||
export class CardCvcElement extends React.Component<ReactStripeElements.ElementProps> {}
|
||||
|
||||
// Deprecated but aliased until react-stripe-elements v5
|
||||
export class CardCVCElement extends CardCvcElement {}
|
||||
|
||||
export class PostalCodeElement extends React.Component<ReactStripeElements.ElementProps> {
|
||||
}
|
||||
|
||||
@@ -6,6 +6,7 @@ import {
|
||||
injectStripe,
|
||||
CardNumberElement,
|
||||
CardExpiryElement,
|
||||
CardCvcElement,
|
||||
CardCVCElement,
|
||||
PostalCodeElement,
|
||||
ReactStripeElements,
|
||||
@@ -49,25 +50,22 @@ const cardElementProps: ElementsOptions = {
|
||||
};
|
||||
|
||||
const fontElementsProps: ElementsCreateOptions = {
|
||||
fonts: [
|
||||
{
|
||||
cssSrc: "https://fonts.googleapis.com/css?family=Dosis"
|
||||
},
|
||||
{
|
||||
family: "Dosis, sanz",
|
||||
src: "url(https://somewebsite.com/path/to/font.woff)",
|
||||
style: "normal",
|
||||
weight: "bold",
|
||||
unicodeRange: "U+26"
|
||||
}
|
||||
],
|
||||
locale: "es"
|
||||
fonts: [
|
||||
{
|
||||
cssSrc: 'https://fonts.googleapis.com/css?family=Dosis',
|
||||
},
|
||||
{
|
||||
family: 'Dosis, sanz',
|
||||
src: 'url(https://somewebsite.com/path/to/font.woff)',
|
||||
style: 'normal',
|
||||
weight: 'bold',
|
||||
unicodeRange: 'U+26',
|
||||
},
|
||||
],
|
||||
locale: 'es',
|
||||
};
|
||||
|
||||
<CardElement
|
||||
{...cardElementProps}
|
||||
onReady={(el: HTMLStripeElement) => el.clear()}
|
||||
/>;
|
||||
<CardElement {...cardElementProps} onReady={(el: HTMLStripeElement) => el.clear()} />;
|
||||
|
||||
const ElementsWithPropsTest: React.SFC = () => (
|
||||
<div>
|
||||
@@ -92,6 +90,13 @@ const ElementsWithPropsTest: React.SFC = () => (
|
||||
onReady={(el: HTMLStripeElement) => void 0}
|
||||
onFocus={(event: ElementChangeResponse) => void 0}
|
||||
/>
|
||||
<CardCvcElement
|
||||
{...cardElementProps}
|
||||
onChange={(event: ElementChangeResponse) => void 0}
|
||||
onBlur={(event: ElementChangeResponse) => void 0}
|
||||
onReady={(el: HTMLStripeElement) => void 0}
|
||||
onFocus={(event: ElementChangeResponse) => void 0}
|
||||
/>
|
||||
<CardCVCElement
|
||||
{...cardElementProps}
|
||||
onChange={(event: ElementChangeResponse) => void 0}
|
||||
@@ -113,28 +118,29 @@ interface ComponentProps {
|
||||
tokenCallback(token: PatchedTokenResponse): void;
|
||||
}
|
||||
|
||||
class WrappedComponent extends React.Component<
|
||||
ComponentProps & InjectedStripeProps
|
||||
> {
|
||||
class WrappedComponent extends React.Component<ComponentProps & InjectedStripeProps> {
|
||||
constructor(props: ComponentProps & InjectedStripeProps) {
|
||||
super(props);
|
||||
// Test for paymentRequest
|
||||
const paymentRequest = props.stripe && props.stripe.paymentRequest({
|
||||
country: 'US',
|
||||
currency: 'usd',
|
||||
total: {
|
||||
label: 'Demo total',
|
||||
amount: 1
|
||||
}
|
||||
});
|
||||
const paymentRequest =
|
||||
props.stripe &&
|
||||
props.stripe.paymentRequest({
|
||||
country: 'US',
|
||||
currency: 'usd',
|
||||
total: {
|
||||
label: 'Demo total',
|
||||
amount: 1,
|
||||
},
|
||||
});
|
||||
if (paymentRequest) {
|
||||
paymentRequest.on('token', ({complete, token, ...data}) => undefined);
|
||||
paymentRequest.on('token', ({ complete, token, ...data }) => undefined);
|
||||
paymentRequest.canMakePayment().then(res => undefined);
|
||||
}
|
||||
}
|
||||
|
||||
onSubmit = () => {
|
||||
this.props.stripe!
|
||||
.createToken({
|
||||
this.props
|
||||
.stripe!.createToken({
|
||||
name: '',
|
||||
address_line1: '',
|
||||
address_line2: '',
|
||||
@@ -144,9 +150,7 @@ class WrappedComponent extends React.Component<
|
||||
address_country: '',
|
||||
currency: '',
|
||||
})
|
||||
.then((response: PatchedTokenResponse) =>
|
||||
this.props.tokenCallback(response)
|
||||
);
|
||||
.then((response: PatchedTokenResponse) => this.props.tokenCallback(response));
|
||||
}
|
||||
|
||||
isFormValid = () => {
|
||||
@@ -194,6 +198,7 @@ const ElementsDefaultPropsTest: React.SFC = () => (
|
||||
<CardElement />
|
||||
<CardNumberElement />
|
||||
<CardExpiryElement />
|
||||
<CardCvcElement />
|
||||
<CardCVCElement />
|
||||
<PostalCodeElement />
|
||||
</div>
|
||||
@@ -222,13 +227,14 @@ const TestStripeProviderProps3: React.SFC<{
|
||||
* See: https://github.com/stripe/react-stripe-elements#loading-stripejs-asynchronously
|
||||
*/
|
||||
const TestStripeProviderProps4: React.SFC<{
|
||||
stripe: null | stripe.Stripe
|
||||
}> = props =>
|
||||
stripe: null | stripe.Stripe;
|
||||
}> = props => (
|
||||
<StripeProvider stripe={props.stripe}>
|
||||
<Elements>
|
||||
<div />
|
||||
</Elements>
|
||||
</StripeProvider>;
|
||||
</StripeProvider>
|
||||
);
|
||||
|
||||
/**
|
||||
* StripeProvider should be able to accept options.
|
||||
|
||||
Reference in New Issue
Block a user