読者です 読者をやめる 読者になる 読者になる

実はhokkai7go

hatenablogに移行しまんた

WebPay Extendを利用して作れるECサイト実装例 8個

こちらのblogでも、WebPayについての情報発信をしていくことになりました。 どうぞよろしくお願いします!

WebPay ExtendとStripe Connect

先日、WebPay Extendという機能をリリースしました。WebPay Extendは、OAuth2.0を利用し認可したユーザのWebPay上のデータを取得したり、課金を発生させるなどの権限を得ることが出来る機能です。 同様にOAuthを利用した機能を提供している決済サービスには、

などがあります。 当シリーズ記事では、この中からStripeが提供するStripe Connectに注目し、利用例を紹介したいと思います。 Stripe Connectの利用例には、ECから分析、顧客管理システム(CRM)まで幅広いウェブサービスがあります。具体的にどのようなウェブサービスがあるのでしょうか。今回はECサイトをピックアップして紹介します。

Stripe Connectを利用したウェブサービス

EC

課金を発生させるという利用方法は想像しやすいものの一つでしょう。一番利用例が多いカテゴリになっています。複数の決済ゲートウェイを選択できるサービスが多いです。決済ゲートウェイとつなぎ込む際に、Stripe Connectを利用し、認可を行っています。”Connect to Stripe”ボタンにより認可を行い、売上やカードに関する情報をStripeで確認することができます。

3dcart

オンラインストアを簡単に立ち上げられます。取引ごとの手数料がかからず、24時間電話サポートが受けられます。PCI準拠のセキュリティレベルが確保されています。

Online Store Builder   eCommerce Shopping Cart Software   3dCart.png

Stripeを経由して課金を行えるようにするにはSettingsからPaymentの中にあるOnline Methodsへと進みます。Accept Credit Cardsに進み、Other Payment GatewayのプルダウンリストからStripeを選択します。"Connect with Stripe"より認可を行います。Stripeによる決済を有効にするために、Activeにチェックを入れ、Saveするのを忘れないようにしましょう。connect to stripe.png

実際にストアを作ってみたところ次の写真のようになりました。sample_store_tshirts.png

Bigcommerce

オンラインで販売するために必要な全てを提供しています。クーポンによるトラフィック増加など、マーケティングツールも一緒になっています。

Ecommerce Software   Shopping Cart Solutions   Bigcommerce.png

Stripeを経由して課金を行えるようにするにはSetup&ToolsからPaymentsを選び、StripeのSetupを行います。select_stripe.png

Stripe Connectの画面で、Bigcommerceを認可します。Connect my Stripe accountをクリックします。 Stripe__Connect_with_Bigcommerce2.png

設定の終盤で、Stripeのテストモードで課金を使用するか選択することができます。設定が完了したら、デモストアが使えるようになっています。試しにテスト用カードで買い物をしてみたところ問題なく買い物が終了し、Stripe上でも決済の詳細を見ることができました。

hokkai store cart.png ストアの様子 Test_Payment_ch_55BfyWMqolfGH3.png Stripe上での決済の詳細

Celery

ネットショップに事前注文の仕組みを取り入れられます。機会損失を少なくすることができそうです。

Accept Pre Orders Easily   Celery.png

Stripeを経由して課金を行えるようにするにはSettingsからPaymentを選択して、Add Payment Gatewayに進みます。Stripe Connectの画面から認可を行います。Stripe__Connect_with_Celery.png

Celeryでは、商品(Product)を外部に公開するための方法をいくつか選択することができます。決済するボタンをクリックした際にポップアップで表示する方法や、リンクにより公開する方法などがあります。ここでは、ポップアップで見えるように設定してみました。checkout_helper.html.png

Stripe上で、テストモードを選択できなかったため、テスト用カードではカードが拒まれています。 yakiniku_card_declined.png

Ecwid

簡単にオンラインストアを作成し、既存のウェブサイト、ブログやFacebookのページに追加することができます。

 1 Free Ecommerce Shopping Cart   Online Store Solution   Try Ecwid .png

Stripeを経由して課金を行えるようにするにはSystem Settingsから、Paymentに進み、Credit or debit cardからChoose payment processorをクリックします。Stripeについての説明とともに、Connect with Stripeボタンが表示されます。stripe_selected.pngこれをクリックしStripe Connectの画面で認可を行います。

デフォルトでは、このようなストアを作ることができます。Fruit.png

Highwire

複数のチャネルでネットショップを作ることができます。

Build your own eCommerce Store — Highwire.com.png

Stripeを経由して課金を行えるようにするにはSettingsからPayment Settingsに進み、Credit Card Gatewayを設定します。We use Stripeを選択すると、Connect with Stripeボタンが現れます。

Highwireで試しにストアを作ってみました。簡単に作ることが出来ました。store

Squarespace

簡単にウェブサイトやギャラリー、店舗を作成することができます。パララックスを利用した縦スクロール型のカッコイイウェブサイトが作れます。

Stripeの設定方法について書かれたFAQはあるのですが、トライアルでは設定画面を見つけることができませんでした。Squarespaceを有料で使用するときに設定するのではないかと思います。

実際にストアを作ってみました。デザインはいくつものサンプルから選ぶことができます。hokkai store.png

Volusion

小規模から中規模ビジネスに向けた、ECソリューションです。Ecommerce Software   Website Builder by Volusion.png

Stripeを経由して課金を行えるようにするにはSettingsからPaymentを選び、Payment Gatewayの設定画面に進みます。Stripeを選択すると、Connect to Stripeボタンが出てきました。Admin  Payment.png

実際にストアを作ってみました。次のようなデザインのストアができあがりました。Volusionで特徴的だと感じたのは、管理者であれば買い物をするフローの中でボタンなどの編集ができてしまうところです。ブラウザのタブなどを切り替えて、ストア画面と管理画面を行き来しなくてよいのは便利そうです。Storefront__SAMPLE_PRODUCT_FOUR.png

ECに関連した利用例を紹介しました。ECのシステムと決済ゲートウェイが連携している様子を確認できたかと思います。 次回は、請求書や会計システムとの連携について紹介します。 みなさんのWebPay Extend実装のインスピレーションを刺激する記事になればうれしい限りです。