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:
Alex Price
2019-07-22 12:25:55 -07:00
committed by Wesley Wigham
parent d793a23371
commit 74f51366f0
2 changed files with 49 additions and 40 deletions
+6 -3
View File
@@ -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.