ReactNative、Django歴半年、Stripe歴二ヶ月の新米です。よろしくお願い致します。
ReactNativeでStripeを使用したいのですが、
リロード時に毎回ターミナルに黄文字でエラーが記載されてしまいます。
documentというものは使用していないような気がするのですが、どのようにアプローチすればよいか全くわかりません。
Can't find variable: document
at node_modules/@stripe/stripe-js/dist/stripe.js:8:17 in findScript
at node_modules/@stripe/stripe-js/dist/stripe.js:74:8 in Promise$argument_0
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:198110:31 in loadScript
package.json
"dependencies": {
"@stripe/react-stripe-js": "^1.8.1",
"@stripe/stripe-js": "^1.31.0",
"@stripe/stripe-react-native": "^0.9.0",
"expo-stripe-checkout": "^1.0.1",
"react-native-stripe-checkout-webview": "^0.0.13",
"stripe": "^9.1.0",
}
App.jsx
import React from 'react';
import {
StyleSheet,
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import CheckoutWithStripe from './src/screens/CheckoutWithStripe';
// eslint-disable-next-line react/function-component-definition
export default function App() {
return (
<NavigationContainer>
<CheckoutWithStripe />
</NavigationContainer>
);
}
const styles = StyleSheet.create({
headerButton: {
marginRight: 16,
marginTop: 6,
},
headerButtonText: {
color: '#fff',
backgroundColor: '#10b981',
},
});
CheckoutWithStripe.jsx
import React, { useState, useEffect } from "react";
import { View, Text, ActivityIndicator} from "react-native";
import Button from "../components/Button";
import { SafeAreaView } from "react-native-safe-area-context";
import { StripeProvider } from "@stripe/stripe-react-native";
import PaymentForm from "../components/PaymentForm";
const apiUrl = 'myUrl';
export default function CheckoutWithStripe() {
return (
<StripeProvider
publishableKey="publishableKey"
merchantIdentifier="merchant.identifier"
>
<SafeAreaView>
<Text>
決済画面になります。
</Text>
<PaymentForm />
<Button label="Pay" />
</SafeAreaView>
</StripeProvider>
)
}
PaymentForm.jsx
import React from 'react'
import { CardField } from '@stripe/stripe-react-native';
export default function PaymentForm() {
return (
<CardField
postalCodeEnabled={true}
placeholder={{
number: '4242 4242 4242 4242',
}}
cardStyle={{
backgroundColor: '#FFFFFF',
textColor: '#000000',
}}
style={{
width: '100%',
height: 50,
marginVertical: 30,
}}
onCardChange={(cardDetails) => {
console.log('cardDetails', cardDetails);
}}
onFocus={(focusedField) => {
console.log('focusField', focusedField);
}}
/>
)
}