Flutter - 使用 laravel api 進行條帶支付

Question

所以基本上我想做的是讓客戶添加信用卡供以后使用，我在顫振上所做的是：

StripePayment.setOptions(StripeOptions(
        publishableKey: "MY_KEY_HERE"));

並添加了一個按鈕：

onPressed: () async {
                    dynamic value =
                        await StripePayment.paymentRequestWithCardForm(
                      CardFormPaymentRequest(),
                    ).catchError(setError).then(
                      (PaymentMethod paymentMethod) async {
                        try {
                          addCreditCard(paymentMethod);    // post request to laravel cashier api with the payment method
                          print("Payment Method ID: ${paymentMethod.id}");
                        } catch (e) {
                          print(e);
                        }
                      },
                    );
                  },

所以我在這里所做的是，用戶可以按下一個按鈕，彈出一個輸入表單，其中包含所有必需的卡片詳細信息以及條帶驗證算法，一旦輸入所有內容，我將返回一個 PaymentMethod 對象（其中包含一個令牌和最后 4digits 等..）之后，我將此 PaymentMethod 對象發送到包含此功能的 laravel 收銀員 api：

public function create_card(Request $request)
    {
        $user = $request->user();
        $user->addPaymentMethod($request->method); //Laravel billable cashier function
        return response()->json([
            'message' => 'Successfully updated credit card'
        ], 201);
    }

我收到了 No such payment method 的回復，我不知道如何從這里繼續，因為我找不到任何相關的文檔。任何幫助都會很棒。

Laravel 的收銀台計費 addPaymentMethod 函數：

public function addPaymentMethod($paymentMethod)
    {
        $this->assertCustomerExists();

        $stripePaymentMethod = $this->resolveStripePaymentMethod($paymentMethod);

        if ($stripePaymentMethod->customer !== $this->stripe_id) {
            $stripePaymentMethod = $stripePaymentMethod->attach(
                ['customer' => $this->stripe_id], $this->stripeOptions()
            );
        }

        return new PaymentMethod($this, $stripePaymentMethod);
    }

Answer 1

嘗試刪除“async”並打印 paymentMethod 以檢查您是否收到付款方式 ID：

StripePayment
.paymentRequestWithCardForm(CardFormPaymentRequest())
.then((paymentMethod) {
print(paymentMethod);
}).catchError((error)=>{print(error)});

Answer 2

對於仍然在此問題上苦苦掙扎的任何人，我終於找到了添加付款方式的可行解決方案。

我的設置是這樣的：

Laravel Framework 8.37.0
    "laravel/cashier": "^12.12",
    "laravel/sanctum": "^2.9",

Flutter (Channel stable, 2.0.5)
    Dart 2.12.3
    stripe_payment: ^1.0.11

顫振側：

sample_view.dart是包含調用 Stripe 方法的按鈕的屏幕：

import 'package:my_sample_package/services/payment_services.dart';
import 'package:flutter/material.dart';
import 'package:stripe_payment/stripe_payment.dart';


class Subscribe extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: ElevatedButton(
            child: Text("Add new Payment Method"),
            onPressed: () {
              StripeService.addNewPayment();
            },
          )
        )
      ),
    );
  }
}

payment_services.dart是處理 Stripe 和 Api 調用的文件：

import 'dart:convert';
import 'dart:developer';
import 'package:dio/dio.dart';
import 'package:flutter/services.dart';
import 'package:stripe_payment/stripe_payment.dart';

class StripeService {
  Dio dio = new Dio();
  static Future<dynamic> addNewPayment() async {
    StripePayment.setOptions(
      StripeOptions(
        publishableKey: "your_stripe_publishable_key",
        merchantId: "Test",
        androidPayMode: 'test'
      )
    );

    Dio dio = new Dio(); // I'm using Dio instead of the http package
    String baseUrl = 'http://192.168.1.122:8000/api/'; // Your host, I started mine using ## php artisan serve --host 192.168.1.122 --port 8000 ##
    String token = 'my_laravel_access_token'; // This is the token I get from Laravel Sanctum

    await StripePayment.paymentRequestWithCardForm(
      CardFormPaymentRequest(), // This will show the Native Payment Card form 
    )
    .then(
      (PaymentMethod paymentMethod) async {
        try {
          inspect(paymentMethod);
          final response = await dio.post(
            baseUrl + "user/subscription/payment-method/update", // My Laravel endpoint for updating the payment method
            options: Options(
              headers: { 'Authorization': 'Bearer $token' },
            ),
            data: {
              "payment_method": paymentMethod
            }
          );
          inspect(response);
        } catch (e) {
          inspect(e);
        }
      },
    ).onError((error, stackTrace) {
      inspect(error);
    });
  }
}

Laravel 方面：

routes/api.php文件來注冊我們需要的路由：

...
Route::group(['prefix' => 'user', 'middleware' => ['auth:sanctum']], function () {
    Route::post('subscription/payment-method/update', [UserController::class, 'updatePaymentMethod']);
});
...

Controllers/UserController.php文件來注冊我們的方法：

public function updatePaymentMethod(Request $request): \Illuminate\Http\JsonResponse
    {
        $user = auth()->user();
        $user->updateDefaultPaymentMethod($request->payment_method['id']); // You need to pass just the payment method ID, not the whole object

        return response()->json([
            'message' => 'Payment method saved'
        ], 200);
    }