LIFF와 Stripe Checkout으로 LINE에서 사용할 수있는 결제 화면을 만들거야.

LINE상에서 LINE Pay 이외의 방법으로 결제를 하고 싶다고 하는 클라이언트님의 요망이 있어, LIFF와 Stripe를 얽힌 샘플을 만들어 보았습니다. 이 조합은 별로 기사가 없었기 때문에 기록으로서 남겨 둡니다.

이번에는 Stripe의 결제에 LINE의 사용자 ID를 메타데이터로 올려보겠습니다.
Stripe의 Github 에 올라 있던 샘플을 LIFF용으로 조금 수정했습니다.

완성된 것

데모 사이트
LINE이 일어납니다.
테스트용 카드 4242-4242-4242-4242를 사용하여 결제의 흐름을 확인하실 수 있습니다. 카드 만료일과 CVC, 소유자 이름, 이메일 주소는 적당하고 괜찮습니다.

Heroku의 무료 플랜이므로 느립니다. ⇒Firebase에 이사했습니다.

개발 환경

Node.js

LINE측 설정

먼저 LINE Developers 에서 채널을 만듭니다. LINE 로그인 채널에 LIFF 앱을 등록합니다.

인증 할 때 필요하므로 Scope의 openid에 체크를 넣는 것을 잊지 마세요.
엔드 포인트 URL은 일단 적당하고 괜찮습니다 (나중에 고칠 수 있습니다)


채널 ID와 LIFF ID를 삼가해 주십시오.
LIFF ID는 LIFF 앱을 만든 후에 부여됩니다.

Stripe측 설정

그런 다음 Stripe 대시보드에서 정기 결제 상품을 만듭니다.

세부정보 입력란의 상품 ID(prod_XXXXXX)와 요금란의 가격 ID(price_XXXXXXXX), 홈 화면에서 확인할 수 있는 공개 가능 키(pk_XXXXXXX) 및 비밀 키(sk_XXXXXXX)를 삼가해 주세요.

서버 설치

코드는 GitHub 리포지토리 를 공개하고 있으므로, 그쪽을 떨어뜨려 봐 주세요.

$ git clone https://github.com/kota-imai/liff-stripe-checkout-sample.git
$ cd liff-stripe-checkout-sample

↓ 프로젝트 종속 패키지 다운로드

$ npm install

↓프로젝트내의 파일을 2개소, 방금 앞두신 자신의 ID에 재기록해 주실 필요가 있습니다.

.env

# Stripe keys
STRIPE_PUBLISHABLE_KEY=(Stripeの公開可能キー)
STRIPE_SECRET_KEY=(Stirpeのシークレットキー)

# Required to run webhook
# See README on how to use the Stripe CLI to setup
# STRIPE_WEBHOOK_SECRET=whsec_1234

# Checkout options
DONATION_PRODUCT_ID=(作成した定期支払い商品のID)
SUBSCRIPTION_PRICE_ID=(価格ID)

# ex.https://amabot-payment.herokuapp.com
DOMAIN=(デプロイ先のドメイン)

# Environment variables 
STATIC_DIR=client

# LINE
CHANNEL_ID=(LINE Developersで設定したチャネルID)

client/index.js (1행째)

const liffId = (作成したLIFFアプリのLIFF ID)

LINE의 사용자 정보 취급에 주의! !

클라이언트 측에서 취득한 사용자 정보를 서버에 보내는 것은 공식적으로 금지되어 있습니다.
이번에는 클라이언트 측에서 ID 토큰을 발행하여 서버 측에서 토큰을 검증하여 사용자 정보를 얻도록 했습니다.
htps : //에서 ゔぇぺぺrs. 네. · · · · / cs / ぃ f / usin g-use rp 로후 ぇ /
htps : //에서 ゔぇぺぺrs. 네. 비 · 자 / 레후 렌세 / ぃ 네 ぉ ギン / #

마지막으로 LINE Developers의 LIFF 앱 세부정보에서 엔드포인트 URL을 자체로 다시 작성합니다.
여기가 어색하지만 LIFF 앱의 엔드 포인트 URL은 https가 아니면 등록 할 수 없습니다.

로컬에서 디버깅 할 때는 ngrok 경유로 움직임을 확인하는 것이 많은 것 같습니다.
나는 그대로 heroku에 배포했다.

또한 .env 파일의 DOMAIN 값도 여기와 일치하십시오.

결제해보자

↓ 서버를 시작합니다.

npm start

LIFF 앱의 URL을 열면 결제 화면이 시작될 것이라고 생각합니다.
결제한 후 Stripe 대시보드를 확인해 보면,


처리가 성공했습니다. 메타데이터 사용자 ID도 등록되었습니다!

참고로 한 사이트

공식 문서 중심입니다.

htps : //에서 ゔぇぺぺrs. 네. 비 · 자 / 레후 렌세 / ぃ 네 ぉ ギン /
htps : //에서 ゔぇぺぺrs. 네. · · · · / cs / ぃ f / usin g-use rp 로후 ぇ /
htps : // st 리페. 코 m / 드 cs / 아피 / 치 c c t / 세시 온 s / c
htps : // 꼬리 rt. st 리페. 코 m / 쿠에 s chion s / ushin g-medata-u-th-chi-c t-Setshion s

홍보

Chrome 확장 프로그램을 게시하고 있습니다. 좋으면 사용해보십시오.