react-native - 找不到变量:文档 ReactNative Js
问题描述
我尝试使用 Stripe API。当我加载时:https ://js.stripe.com/v3和Feed.js文件的末尾
我收到以下错误:
找不到变量:文档
由于这个错误,我无法使用 Stripe Api,有人知道我错过了什么吗?
我正在使用 Expo 并且我尝试过import storybook
,但它并没有解决我的问题。下面index.html文件和我的Feed.js文件
<!DOCTYPE html>
<html>
<head>
<title>demo | react-stripe-elements</title>
<script src="https://js.stripe.com/v3/"></script>
<style>
* {
box-sizing: border-box;
}
body,
html {
background-color: #f6f9fc;
font-size: 18px;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
h1 {
color: #32325d;
font-weight: 400;
line-height: 50px;
font-size: 40px;
margin: 20px 0;
padding: 0;
}
.Checkout {
margin: 0 auto;
max-width: 800px;
box-sizing: border-box;
padding: 0 5px;
}
label {
color: #6b7c93;
font-weight: 300;
letter-spacing: 0.025em;
}
button {
white-space: nowrap;
border: 0;
outline: 0;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 14px;
box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
color: #fff;
border-radius: 4px;
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.025em;
background-color: #6772e5;
text-decoration: none;
-webkit-transition: all 150ms ease;
transition: all 150ms ease;
margin-top: 10px;
}
form {
margin-bottom: 40px;
padding-bottom: 40px;
border-bottom: 3px solid #e6ebf1;
}
button:hover {
color: #fff;
cursor: pointer;
background-color: #7795f8;
transform: translateY(-1px);
box-shadow: 0 7px 14px rgba(50, 50, 93, .10), 0 3px 6px rgba(0, 0, 0, .08);
}
input,
.StripeElement {
display: block;
margin: 10px 0 20px 0;
max-width: 500px;
padding: 10px 14px;
font-size: 1em;
font-family: 'Source Code Pro', monospace;
box-shadow: rgba(50, 50, 93, 0.14902) 0px 1px 3px, rgba(0, 0, 0, 0.0196078) 0px 1px 0px;
border: 0;
outline: 0;
border-radius: 4px;
background: white;
}
input::placeholder {
color: #aab7c4;
}
input:focus,
.StripeElement--focus {
box-shadow: rgba(50, 50, 93, 0.109804) 0px 4px 6px, rgba(0, 0, 0, 0.0784314) 0px 1px 3px;
-webkit-transition: all 150ms ease;
transition: all 150ms ease;
}
.StripeElement.IdealBankElement,
.StripeElement.PaymentRequestButton {
padding: 0;
}
</style>
</head>
<body>
<div class="App">
</div>
<script src="/Ecran/UtilisateurConnecte/BottomTab/Feed.js"></script>
</body>
</html>
饲料.js
import React from 'react';
import {render} from 'react-dom';
import ReactDOM from 'react-dom';
import { View, Text } from 'react-native';
import type {InjectedProps} from '../../../src/components/inject';
import {
CardElement,
CardNumberElement,
CardExpiryElement,
CardCVCElement,
PaymentRequestButtonElement,
IbanElement,
IdealBankElement,
StripeProvider,
Elements,
injectStripe,
} from '../../../src/index';
const handleBlur = () => {
console.log('[blur]');
};
const handleChange = (change) => {
console.log('[change]', change);
};
const handleClick = () => {
console.log('[click]');
};
const handleFocus = () => {
console.log('[focus]');
};
const handleReady = () => {
console.log('[ready]');
};
const createOptions = (fontSize, padding) => {
return {
style: {
base: {
fontSize,
color: '#424770',
letterSpacing: '0.025em',
fontFamily: 'Source Code Pro, monospace',
'::placeholder': {
color: '#aab7c4',
},
padding,
},
invalid: {
color: '#9e2146',
},
},
};
};
class _CardForm extends React.Component {
handleSubmit = (ev) => {
ev.preventDefault();
if (this.props.stripe) {
this.props.stripe
.createToken()
.then((payload) => console.log('[token]', payload));
} else {
console.log("Stripe.js hasn't loaded yet.");
}
};
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Card details
<CardElement
onBlur={handleBlur}
onChange={handleChange}
onFocus={handleFocus}
onReady={handleReady}
{...createOptions(this.props.fontSize)}
/>
</label>
<button>Pay</button>
</form>
);
}
}
const CardForm = injectStripe(_CardForm);
class _SplitForm extends React.Component {
handleSubmit = (ev) => {
ev.preventDefault();
if (this.props.stripe) {
this.props.stripe
.createToken()
.then((payload) => console.log('[token]', payload));
} else {
console.log("Stripe.js hasn't loaded yet.");
}
};
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Card number
<CardNumberElement
onBlur={handleBlur}
onChange={handleChange}
onFocus={handleFocus}
onReady={handleReady}
{...createOptions(this.props.fontSize)}
/>
</label>
<label>
Expiration date
<CardExpiryElement
onBlur={handleBlur}
onChange={handleChange}
onFocus={handleFocus}
onReady={handleReady}
{...createOptions(this.props.fontSize)}
/>
</label>
<label>
CVC
<CardCVCElement
onBlur={handleBlur}
onChange={handleChange}
onFocus={handleFocus}
onReady={handleReady}
{...createOptions(this.props.fontSize)}
/>
</label>
<label>
Postal code
<PostalCodeElement
onBlur={handleBlur}
onChange={handleChange}
onFocus={handleFocus}
onReady={handleReady}
{...createOptions(this.props.fontSize)}
/>
</label>
<button>Pay</button>
</form>
);
}
}
const SplitForm = injectStripe(_SplitForm);
class _PaymentRequestForm extends React.Component {
constructor(props) {
super(props);
const paymentRequest = props.stripe.paymentRequest({
country: 'US',
currency: 'usd',
total: {
label: 'Demo total',
amount: 1000,
},
});
paymentRequest.on('token', ({complete, token, ...data}) => {
console.log('Received Stripe token: ', token);
console.log('Received customer information: ', data);
complete('success');
});
paymentRequest.canMakePayment().then((result) => {
this.setState({canMakePayment: !!result});
});
this.state = {
canMakePayment: false,
paymentRequest,
};
}
render() {
return this.state.canMakePayment ? (
<PaymentRequestButtonElement
className="PaymentRequestButton"
onBlur={handleBlur}
onClick={handleClick}
onFocus={handleFocus}
onReady={handleReady}
paymentRequest={this.state.paymentRequest}
style={{
paymentRequestButton: {
theme: 'dark',
height: '64px',
type: 'donate',
},
}}
/>
) : null;
}
}
const PaymentRequestForm = injectStripe(_PaymentRequestForm);
class _IbanForm extends React.Component {
handleSubmit = (ev) => {
ev.preventDefault();
if (this.props.stripe) {
this.props.stripe
.createSource({
type: 'sepa_debit',
currency: 'eur',
owner: {
name: ev.target.name.value,
email: ev.target.email.value,
},
mandate: {
notification_method: 'email',
},
})
.then((payload) => console.log('[source]', payload));
} else {
console.log("Stripe.js hasn't loaded yet.");
}
};
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name
<input name="name" type="text" placeholder="Jane Doe" required />
</label>
<label>
Email
<input
name="email"
type="email"
placeholder="jane.doe@example.com"
required
/>
</label>
<label>
IBAN
<IbanElement
supportedCountries={['SEPA']}
onBlur={handleBlur}
onChange={handleChange}
onFocus={handleFocus}
onReady={handleReady}
{...createOptions(this.props.fontSize)}
/>
</label>
<button>Pay</button>
</form>
);
}
}
const IbanForm = injectStripe(_IbanForm);
class _IdealBankForm extends React.Component {
handleSubmit = (ev) => {
ev.preventDefault();
if (this.props.stripe) {
this.props.stripe
.createSource({
type: 'ideal',
amount: 1099,
currency: 'eur',
owner: {
name: ev.target.name.value,
},
redirect: {
return_url: 'https://example.com',
},
})
.then((payload) => console.log('[source]', payload));
} else {
console.log("Stripe.js hasn't loaded yet.");
}
};
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name
<input name="name" type="text" placeholder="Jane Doe" required />
</label>
<label>
iDEAL Bank
<IdealBankElement
className="IdealBankElement"
onBlur={handleBlur}
onChange={handleChange}
onFocus={handleFocus}
onReady={handleReady}
{...createOptions(this.props.fontSize, '10px 14px')}
/>
</label>
<button>Pay</button>
</form>
);
}
}
const IdealBankForm = injectStripe(_IdealBankForm);
class Checkout extends React.Component {
constructor() {
super();
this.state = {
elementFontSize: window.innerWidth < 450 ? '14px' : '18px',
};
window.addEventListener('resize', () => {
if (window.innerWidth < 450 && this.state.elementFontSize !== '14px') {
this.setState({elementFontSize: '14px'});
} else if (
window.innerWidth >= 450 &&
this.state.elementFontSize !== '18px'
) {
this.setState({elementFontSize: '18px'});
}
});
}
render() {
const {elementFontSize} = this.state;
return (
<div className="Checkout">
<h1>Available Elements</h1>
<Elements>
<CardForm fontSize={elementFontSize} />
</Elements>
<Elements>
<SplitForm fontSize={elementFontSize} />
</Elements>
<Elements>
<PaymentRequestForm />
</Elements>
<Elements>
<IbanForm fontSize={elementFontSize} />
</Elements>
<Elements>
<IdealBankForm fontSize={elementFontSize} />
</Elements>
</div>
);
}
}
const App = () => {
return (
<StripeProvider apiKey="pk_test_6pRNASCoBOKtIshFeQd4XMUh">
<Checkout />
</StripeProvider>
);
};
ReactDOM.render(<App />, document.querySelector('.App'));
解决方案
请注意,由于 Stripe 约束需要在 post 操作之间进行安全传输,因此我的解决方案尚未在 localhost 中运行。我的本地主机正在使用自签名证书,但这对于 Stripe 来说还不够。我需要将该站点发布到以 SSL 模式运行的站点。
我的解决方案没有像您那样实现任何 html。相反,我将 React 应用程序用于前端,该应用程序与后端的 Express 应用程序通信,两者都在同一台服务器上运行,但在它们自己的端口下。例如,React 运行在 3000 端口,Express 运行在 8000 端口。 Express 应用有一个用于条带的 package.json 行,如下所示:
"dependencies": {
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"body-parser": "^1.18.3",
"cors": "^2.8.5",
"express": "^4.16.4",
"morgan": "^1.9.1",
"passport-stripe": "^0.2.3",
"serve-favicon": "^2.5.0",
"stripe": "^7.8.0"
},
然后在 React 应用程序中,我在 package.json 中为 Stripe 提供了以下内容:
"react-stripe-checkout": "^2.6.3",
"react-stripe-elements": "^4.0.1",
和这样的组件页面:
import React, {Component} from 'react';
import {Text, View} from 'react-native';
//import { StripeProvider, Elements, CardNumberElement } from 'react-stripe-elements';
import '../App.css'
import Styles from '../components/Styles'
import Checkout from '../stripe/Checkout';
export default class Give extends Component {
render() {
return (
<div className="topSpace">
<View style={Styles.backroundView}>
<View style={Styles.mainView}>
<Text>
Click to pay with card:
</Text>
<Checkout
name={'Test Sending A Charge'}
description={'This will send a checkout to stripe api'}
amount={1}
/>
</View>
</View>
</div>
);
}
}
HTH。
推荐阅读
- excel - 每 3 行将 excel 表中的连续值引用到新工作表
- codenameone - 代号一,不使用Display.getInstance().openGallery()可以访问照片吗?
- node.js - 如何使用 Three.js 导入带有纹理的 Blender 3D 模型?
- javascript - 看似相等的对象并不相等
- shell - 检查每个参数是否是 shell 中的整数
- python - 将多个 div 类中的数据抓取到 pandas 数据框中
- java - Java 微优化:缓存或不缓存 System.currentTimeMillis() 返回值?
- c# - c# 谷歌图表日期的日期时间格式(yyyy-mm-ddT00:00:00)
- ios - Azure 语音转文本 API
- python - 慢循环python在python的antoher数据框中搜索数据