Stripe 未来付款设置显示您必须在 React Native 中提供付款方式类型与 Laravel 集成

Question

我在 React Native 和 Laravel 中集成了 Stripe Payment。我的目标是设置未来的付款方式，仅收集卡详细信息并稍后收费。

\n

这是我的反应本机代码：

\n

// Start App.js\nimport React, {useEffect, useState} from \'react\';\nimport { AuthProvider } from \'./context/AuthProvider\';\nimport Screens from "./navigation/Screens";\nimport { StripeProvider } from \'@stripe/stripe-react-native\';\nimport { fetchPublishableKey } from "./helper";\n\nexport default function App() {\nconst [publishableKey, setPublishableKey] = useState(\'\');\n\nconst fetchKey = async () => {\n    const key = await fetchPublishableKey()\n    if (key) {\n        setPublishableKey(key)\n    }\n};\n\nuseEffect(() => {\n    fetchKey();\n}, []);\n\nreturn (\n    <StripeProvider publishableKey={publishableKey}>\n        <AuthProvider>\n            <Screens />\n        </AuthProvider>\n    </StripeProvider>\n);}\n// End App.js\n\n// Start AccountNoBilling.js\nimport {CardField,useConfirmSetupIntent} from \'@stripe/stripe-react-native\';\nimport axiosConfig from "../../helpers/axiosConfig";\nimport {API_URL} from "../../Config";\nexport default function AccountNoBilling ({ route, navigation}) {\n\nconst fetchPaymentIntentClientSecret = async () => {\n    axiosConfig.defaults.headers.common[\'Authorization\'] = `Bearer ${user.token}`;\n    const response = await axiosConfig.post(`${API_URL}/payment-sheet`)\n        .catch(error => {\n            console.log(\'Error: \', error.response.data)\n            alert(\'Error: \'+ error.response.data)\n        });\n\n    if (typeof (response.data) === undefined) {\n        alert(\'Hello\')\n    } else {\n        return response.data;\n    }\n};\n\nconst handlePayPress = async () => {\n        // Gather the customer\'s billing information (for example, email)\n        const billingDetails: BillingDetails = {\n            email: \'test.card@example.com\',\n        };\n\n       // Create a setup intent on the backend\n       const clientSecret = await fetchPaymentIntentClientSecret();\n\n       const { setupIntent, error } = await confirmSetupIntent(clientSecret, {\n            paymentMethodType: \'Card\',\n            paymentMethodData: {\n                billingDetails,\n            }\n        });\n\n        if (error) {\n            Alert.alert(`Error code: ${error.code}`, error.message);\n        } else {\n            Alert.alert(\'Success\',setupIntent + \' Your payment method is successfully set up for future payments!\');\n        }\n}\n\nfunction renderCreditCard() {\n           return (\n                   <Block>\n                        <CardField\n                            postalCodeEnabled={true}\n                            placeholder={{\n                                number: \'4242 4242 4242 4242\',\n                            }}\n                            cardStyle={{\n                                backgroundColor: \'#edeff2\',\n                                textColor: \'#000000\',\n                                borderWidth: 1,\n                                borderColor: \'#000000\',\n                                borderRadius: 8\n                            }}\n                            style={styles.cardInput}\n                            onCardChange={(cardDetails) => {\n                                console.log(\'cardDetails\', cardDetails);\n                            }}\n                            onFocus={(focusedField) => {\n                                // console.log(\'focusField\', focusedField);\n                            }}\n                        />\n                    </Block>\n                 );\n           }\n\nfunction renderSaveButton() {\n                 return (\n                             <Block style={{ flex: 12 }} center>\n                                <Button\n                                    color="success"\n                                    style={loading ? styles.buttonDisabled : styles.buttonEnabled}\n                                    variant="primary"\n                                    disabled={loading}\n                                    onPress={handlePayPress}\n                                >\n                                    Save my billing details\n                                </Button>\n                                <Text color={argonTheme.COLORS.SUCCESS}>You do not pay now \xe2\x80\x93 cancel anytime</Text>\n                            </Block>\n                      )\n\nreturn (\n    <Block flex style={{ backgroundColor: argonTheme.COLORS.BACKGROUND}}>\n        <ScrollView showsVerticalScrollIndicator={false}>\n            { renderDescription() }\n            { renderBillingAddress() }\n            { renderCreditCard() }\n            { renderSaveButton() }\n        </ScrollView>\n    </Block>\n)}\n// End AccountNoBilling.js\n

\n

这是我的后端 laravel api 代码：

\n

public function createSetupIntent()\n{\n    try {\n        Stripe::setApiKey(env(\'STRIPE_SECRET\'));\n\n        $customer = User::find($request->userId ?? auth()->id());\n\n        $customer->createAsStripeCustomer();\n\n        $setupIntent = SetupIntent::create([\n            \'customer\' => $customer->stripe_id,\n        ]);\n\n        return response()->json($setupIntent->client_secret, 200);\n    } catch (Exception $e) {\n        return response()->json($e->getMessage(), 422);\n    }\n}\n

\n

我想知道为什么它说“您必须提供 paymentMethodType”，我已经提供了这一点，正如您在函数中看到的那样handlePayPress。

\n

\n

Answer 1

React Native SDK 的版本确实很重要。在版本 0.8.0 之前，该字段的名称已type更改为paymentMethodType，因此命名差异可能是看到此行为的部分原因。 stripe React Native SDK版本在这里更改