PWA에 결제를 넣어 보았습니다.

PWA 내에서 카드 결제를 하면 기존 Apple Pay나 Android
Pay등을 통하지 않고 결제할 수 있으므로, 인앱 과금을 해도 Apple에 30% 수수료를 지불하지 않고, 결제 회사에의 수수료만으로 결제를 실시할 수 있게 됩니다.

PWA에서 결제할 수 있는 몇 가지 방법을 소개합니다.

Payment Request API
Google에서 개발한 Payment Request
API를 사용하여 PWA 내에서도 원활하게 결제를 할 수 있습니다.

Google의 자세한 기사

Payment Request API는 Android용 Chrome에서만 사용할 수 있으며 iOS PWA에서는 아직 지원되지 않습니다.

Stripe를 사용한 결제 데모
Stripe 은 우아하게 구현할 수 있는 결제 서비스입니다. 지금까지 다양한 실적이 있습니다.

Stripe 결제의 데모를 PWA로 만들어 보았습니다.
h tps : // 파 y 멘 t-에서도 - b9f1 아. 흠뻑 빠지다 p. 코m/



이것은 Stripe의 테스트 환경을 사용하여 구현되기 때문에 동작 확인은 가능하지만 실제 결제는 이루어지지 않습니다.

이 URL의 홈 화면에서 다음을 입력해 보세요.

카드 번호: 4242424242424242 (4242를 4회) 유효 연월: 클릭하여 연월을 선택한다 (뭐든지 좋다) CVC: 333
(3자리 숫자라면 뭐든 좋다)

이 후 "카드 등록"을 클릭하면 다음과 같은 경고가 표시됩니다.

「카드 등록 완료」아래에 있는 tok_로 시작되는 값은 Stripe의 token으로 이것을 내부적으로 보존해 두면 카드 번호 없이 결제를 실시할 수가 있습니다.

그리고 「번호 결제」페이지는 번호로 결제할 수 있는 기능의 데모입니다.

「결제 번호」의 곳에 1234라든지 적당하게 숫자 넣고 「이것으로 결제」를 클릭하면 결제를 진행할 수 있습니다.

이런 흐름으로 결제가 가능해지는 것을 알았습니다.

가게가 주문에 붙은 결제 번호를 가게용 PWA로 발행

결제 번호를 구매자에게 전달합니다. 메일로 보내도 되고, 앱 그 자리에서 보여도 좋다.

구매자는 결제 번호를 결제 PWA에 입력하여 결제 내용을 확인하고 결제 완료

결제 번호로 결제를 하는 것으로 한 번 앱에 카드를 등록해 두면, 결제시에는 특히 카드를 지참하지 않아도 결제가 ​​가능하게 됩니다.

또 등록한 카드에 정기 구독을 붙일 수 있으므로, 매월 980엔을 자동적으로 결제하고 싶은 일을 하는 것도 가능합니다.

이렇게 PWA에서도 부담없이 결제는 할 수 있기 때문에, 앞으로의 여러가지 응용 씬이 기대되네요.

Medium의 원래 기사