laravel - 条纹 future 付款设置显示您必须提供付款方式类型以响应 native 与 laravel 集成

Question

我用 laravel 将 stripe payment 集成到 react native 中。我的目标是设置 future 的付款方式，只收集卡的详细信息并在以后收费。

这是我的 native react 代码:

// Start App.js
import React, {useEffect, useState} from 'react';
import { AuthProvider } from './context/AuthProvider';
import Screens from "./navigation/Screens";
import { StripeProvider } from '@stripe/stripe-react-native';
import { fetchPublishableKey } from "./helper";

export default function App() {
const [publishableKey, setPublishableKey] = useState('');

const fetchKey = async () => {
    const key = await fetchPublishableKey()
    if (key) {
        setPublishableKey(key)
    }
};

useEffect(() => {
    fetchKey();
}, []);

return (
    <StripeProvider publishableKey={publishableKey}>
        <AuthProvider>
            <Screens />
        </AuthProvider>
    </StripeProvider>
);}
// End App.js

// Start AccountNoBilling.js
import {CardField,useConfirmSetupIntent} from '@stripe/stripe-react-native';
import axiosConfig from "../../helpers/axiosConfig";
import {API_URL} from "../../Config";
export default function AccountNoBilling ({ route, navigation}) {

const fetchPaymentIntentClientSecret = async () => {
    axiosConfig.defaults.headers.common['Authorization'] = `Bearer ${user.token}`;
    const response = await axiosConfig.post(`${API_URL}/payment-sheet`)
        .catch(error => {
            console.log('Error: ', error.response.data)
            alert('Error: '+ error.response.data)
        });

    if (typeof (response.data) === undefined) {
        alert('Hello')
    } else {
        return response.data;
    }
};

const handlePayPress = async () => {
        // Gather the customer's billing information (for example, email)
        const billingDetails: BillingDetails = {
            email: 'test.card@example.com',
        };

       // Create a setup intent on the backend
       const clientSecret = await fetchPaymentIntentClientSecret();

       const { setupIntent, error } = await confirmSetupIntent(clientSecret, {
            paymentMethodType: 'Card',
            paymentMethodData: {
                billingDetails,
            }
        });

        if (error) {
            Alert.alert(`Error code: ${error.code}`, error.message);
        } else {
            Alert.alert('Success',setupIntent + ' Your payment method is successfully set up for future payments!');
        }
}

function renderCreditCard() {
           return (
                   <Block>
                        <CardField
                            postalCodeEnabled={true}
                            placeholder={{
                                number: '4242 4242 4242 4242',
                            }}
                            cardStyle={{
                                backgroundColor: '#edeff2',
                                textColor: '#000000',
                                borderWidth: 1,
                                borderColor: '#000000',
                                borderRadius: 8
                            }}
                            style={styles.cardInput}
                            onCardChange={(cardDetails) => {
                                console.log('cardDetails', cardDetails);
                            }}
                            onFocus={(focusedField) => {
                                // console.log('focusField', focusedField);
                            }}
                        />
                    </Block>
                 );
           }

function renderSaveButton() {
                 return (
                             <Block style={{ flex: 12 }} center>
                                <Button
                                    color="success"
                                    style={loading ? styles.buttonDisabled : styles.buttonEnabled}
                                    variant="primary"
                                    disabled={loading}
                                    onPress={handlePayPress}
                                >
                                    Save my billing details
                                </Button>
                                <Text color={argonTheme.COLORS.SUCCESS}>You do not pay now – cancel anytime</Text>
                            </Block>
                      )

return (
    <Block flex style={{ backgroundColor: argonTheme.COLORS.BACKGROUND}}>
        <ScrollView showsVerticalScrollIndicator={false}>
            { renderDescription() }
            { renderBillingAddress() }
            { renderCreditCard() }
            { renderSaveButton() }
        </ScrollView>
    </Block>
)}
// End AccountNoBilling.js

这是我的后端 laravel api 代码:

public function createSetupIntent()
{
    try {
        Stripe::setApiKey(env('STRIPE_SECRET'));

        $customer = User::find($request->userId ?? auth()->id());

        $customer->createAsStripeCustomer();

        $setupIntent = SetupIntent::create([
            'customer' => $customer->stripe_id,
        ]);

        return response()->json($setupIntent->client_secret, 200);
    } catch (Exception $e) {
        return response()->json($e->getMessage(), 422);
    }
}

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

Answer 1

对 React Native SDK 的版本非常重要。在版本 0.8.0 之前，该字段曾经被命名为 type，现在已更改为 paymentMethodType，因此命名差异可能是看到此行为的部分原因。 stripe react native SDK version changes here