

ReactNative、Django歴半年、Stripe歴二ヶ月の新米です。よろしくお願い致します。

ReactNativeでStripeを使用したいのですが、  
リロード時に毎回ターミナルに黄文字でエラーが記載されてしまいます。

documentというものは使用していないような気がするのですが、どのようにアプローチすればよいか全くわかりません。

Can't find variable: document  
[![エラーのスクショ](https://i.stack.imgur.com/4eb36.jpg)](https://i.stack.imgur.com/4eb36.jpg)

[code]

    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
    
[/code]

[code]

    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",
    }
    
[/code]

[code]

    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',
      },
    });
    
    
[/code]

[code]

    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>
        )
    }
    
[/code]

[code]

    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);
          }}
    />
      )
    }
    
    
[/code]


CC BY-SA 4.0
2022-05-29T12:08:48.970
89121
2022-05-31T06:36:30.943
2022-05-31T06:36:30.943
51934
51934
question
django reactjs react-native react-jsx
Can't find variable: document が解決できない（ReactNative,Expo, Stripe, Djangoを使用）