소개

약 반년만의 투고입니다.
최근에는 Web 개발로부터 조금 떨어져 Flutter의 개발을 행하고 있습니다.

글꼴로 유행하고 있는 언어&Android와 IOS의 개발을 동일 언어로 할 수 있다는 것이 매우 매력으로 학습을 시작했습니다.

KBOY의 Flutter 대학
htps //w w. 요츠베. 코 m / 찬 l / u C Reu Rg Ji-BF Jio 8KBpjsw

자신은 이 채널에서 학습을 시작했습니다.
매우 정중하게 설명하실 수 있으므로 초학자에게 매우 추천합니다!

경위

원래 결제 처리는 WebView에서 결제 처리를 할 예정이었습니다.
그러나 조사하는 동안

이 기사를 발견하고 Rails에서도 할 수 있다면 Laravel에서도 할 수 있잖아요?
라고 생각한 것이 일의 발단입니다.

언어 차이는 있지만, 구현 예가 있는데 스스로 구현할 수 없는 것은 조금 억울하다고 생각 시행착오의 끝 구현할 수 있었습니다.

Stripe란?

이 기사가 매우 유용합니다.
htps : // m / t-kuni / ms / bf bac1dc695c0f18282

Flutter로 화면 만들기

화면을 만들기 전에 Stripe를 도입하는 데 필요한 패키지를 도입합니다.

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
...
# この辺は自分の環境にあったものを導入してください。
stripe_payment: ^1.0.6
stripe_sdk: ^3.0.1+1

main.dart

import 'package:flutter/material.dart';
import 'package:stripe_payment/stripe_payment.dart';
import 'package:stripe_sdk/stripe_sdk_ui.dart';


void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();
  final formKey = new GlobalKey<FormState>();
  final card = new StripeCard();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CardForm(card: card, formKey: formKey), // クレジットカード入力欄を表示します。
            FlatButton(
              child: Text("決済する"),
              onPressed: () async {
                if (formKey.currentState.validate()) {
                  formKey.currentState.save();

                  final CreditCard _creditCard = CreditCard(
                      number: card.number,
                      expMonth: card.expMonth,
                      expYear: card.expYear,
                     );
                      StripePayment.createTokenWithCard(
                      _creditCard,
                    ).then((token) async {
                      // apiに処理を渡します。              
                      final url = 'http://127.0.0.1/api/sample_stripe';
                      await http.post(
                       url,
                       body: {
                         'stripeToken': token,
                       }
                     );
                    } else {
                    print('処理が通りませんでした。');
                  }
               },
            ),
          ],
        ),
      ),
    );
  }
}

위의 이미지와 같은 페이지가 생성됩니다.

처리의 흐름으로서는 아래와 같은 흐름이 됩니다.
1.CardForm 클래스를 만들고 신용 카드 정보를 입력
2. '결제' 버튼을 탭
3. CreditCard 클래스를 만들고 입력한 값을 전달합니다.
4.stripeToken 만들기
5.Laravel 측에 stripeToken을 전달합니다.

작성할 수 없는 경우는 아래의 URL을 참고로 작성해 보세요.
htps // 푸 b. V / Pac 가게 s / St Ripe_SDK

Laravel 측에서 API 만들기

api.php

Route::post('/sample_stripe', 'SampleStripeController@stripe');

SampleStripeController.php

function stirpe(Request $request)
    {
        //  Stripeシークレットキーの取得
        Stripe::setApiKey(config('app.stripe_secret_key'));
        // 顧客の作成
        $customer = Customer::create(array(
            'email' => '[email protected]',
            'source' => $request->stripeToken //tokenを受け取る
        ));

        $charge = Charge::create(array(
            'description' => 'ストライプ決済',
            'amount' => 500,
            'currency' => 'jpy',
            'customer' => $customer->id,
        ));
    }

Stripe 관리 화면

이미지처럼 결제 처리가 완료되었습니다.
Flutter측만으로 처리하려고 하면 아무래도 모르는 부분이 많았기 때문에 중요한 처리는 Laravel측에 던져 해결했습니다.

처음에는 stripeToken을 취득할 수 없고 Stripe의 고객에게 데이터를 등록할 수 없었습니다만, 「createTokenWithCard」를 이용하는 것으로 고객 데이터의 등록을 할 수 있게 되었습니다!

본 기사에서는 구현하고 있지 않습니다만, 결제가 종료한 후 메일을 송신해 주거나 하면 더 좋을지도 모르겠네요!

이 시스템을 만드는 데 어려움을 겪었습니다.

Flutter × Laravel × Stripe 기사가 존재하지 않았다는 것이 고전되었습니다.
API에 처리를 건네준다는 것을 이해하고 있어도 stripeToken을 취득할 수 없거나 Rails의 기사의 내용을 Laravel로 옮겨놓아 구현해도 에러 계속이었습니다.
이해는 되어 있어도 실장할 수 없다고 하는 대단히 치아가 유이 생각을 하면서 개발했습니다(웃음)

지적 등이 있으면 부디 부탁드립니다.

결제 처리나 API를 이용할 수 있으면 구현의 폭이 증가한다고 생각하므로 꼭 참고해 보세요!

참고 URL

htps : // 메이 m. 이 m / f ぅ는 r에서 vs / st 리페 파 y 맨 t - ㅅ는 rd7f87f9 아 193c
htps : // ぢぎ ry하고. 코 m / b ぉ g / 포 sts / 온 네 파 y 맨 ts -까지 에어 r by ぢ 기 ry 와 by f ぅ r
htps // 푸 b. V / Pac 가게 s / St Ripe_SDK