BLOG

R3 Cloud Journey

kintone に Stripe を組み込んで チャリン♪ チャリン♪ する

2017-12-18 22:56

先日 kintone Café 大阪 Vol.15 〜kintone Night Café 2017 〜 で LTをさせていただき、そこで ご紹介した kintone に Stripe 決済を組み込むデモのソースを掲載します。

まずは カード番号入力フォーム版がこちら。

r3-yamauchi/kintone-react-stripe-sample1
_kintone-react-stripe-sample1 - kintone に Stripe を組み込んで チャリン♪チャリン♪_github.com

そしてこちらが Payment Request API 呼び出し版です。

r3-yamauchi/kintone-react-stripe-sample1
_kintone-react-stripe-sample1 - kintone に Stripe を組み込んで チャリン♪チャリン♪_github.com

いずれも src/App.js が

import React, { Component } from 'react';

import { StripeProvider } from 'react-stripe-elements';
import MyStoreCheckout from './MyStoreCheckout';

class App extends Component {
render() {
return (






);
}
}

export default App;

となっており、StripeProvider エレメントに APIキーを渡すようになっているので、ご自身の Stripe アカウントの公開キーに置き換えてください。(デモの時は GitHubに公開した、ダミーのAPIキーを指定したソースをそのまま動かそうとして失敗しました。。。)

Lambda Function 側は以下の通りです。

環境変数「SK」に Stripe の シークレットキーを指定してください。

Stripe を使えば、簡単に決済処理を実装することが出来ます。

Stripe Subscription (定期支払い) については後日解説させていただきました。

うっちー

アールスリーインスティテュートで、これまでになかった画期的な kintoneカスタマイズサービス gusuku Customine(カスタマイン) を開発しています。 kintone認定アプリデザイン/カスタマイズ スペシャリスト

R3のご提供サービス
自社のシステム開発・移行などをご依頼したい方
お客様とともに作りながら考える
新しいシステム開発
kintone導入・アプリ開発・カスタマイズにお困りの方
kintoneをもっと使いやすくする
gusukuシリーズ