一昔前の静的サイトでは、商品の情報と画像を掲載し、メールや電話で注文を受け付けるのが通例でした。しかし今日では、堅牢なEC機能が組み込まれた動的なオンラインストアが一般的。購買プロセスは劇的に簡素化され、買い物客は競合サイトを覗いたりすることなく、欲しい商品を購入することができます。

静的サイトに決済代行サービスを統合するのは非常に簡単です。API（アプリケーションプログラミングインターフェース）とサーバーレスアーキテクチャによって、静的サイトにEC機能を実装し、サイトでオンライン販売ができるようになります。

今回は、例として花屋の静的サイトにPayPalとStripeを統合する手順を見ていきます。サイトにEC機能を追加し、オンライン販売を始める参考にしてみてください。

はじめに

静的サイトに決済サービスを統合する手順をご紹介する前に、まずはおおまかな流れを見てみましょう。

  1. サンプルとして使用する静的サイトのコードをダウンロードし、Kinstaの静的サイトホスティングにデプロイ。
  2. PayPalアカウントを作成し、ビジネスアカウントを選択（決済ボタンのテストにはビジネスアカウントが必要）。その後、店舗情報を追加して、銀行口座を登録し、後で使用するPayPal DeveloperポータルからAPIの認証情報を取得する。
  3. Stripeアカウントを作成し、店舗や銀行口座などの詳細を入力。Stripeは、今回のプロジェクトに適したアカウントの有効化が可能で、アカウントが有効になると、すぐにStripeの管理画面にアクセスできる。後で使用するプロジェクトの鍵となるAPIキーを取得。

サンプルの静的サイトを確認する

既存の静的サイトを使用して、PayPalとStripeの決済機能を統合します。静的サイトですが、花屋のオンラインストアを模しています。

Kinstaの静的サイトホスティングインフラストラクチャは、PayPalとStripeの決済機能を導入してテストし、より洗練された魅力的な静的サイトを作成するための効率的な環境です。

Kinstaにサイトをデプロイした後、トップページにアクセスします。「Order Inquiry」（注文に関するお問い合わせ）ボタンをクリックしてみましょう。

サンプルサイトのトップページの「<strong>ORDER INQUIRY</strong>」ボタン
サンプルサイトのトップページの「ORDER INQUIRY」ボタン

「Flower Catalog」（お花一覧）ページで商品を選択します。

サンプルサイトの商品一覧ページ
サンプルサイトの商品一覧ページ

この商品の詳細ページに、PayPalとStripeの決済ボタンを実装していきます。

サンプルサイトの商品詳細ページ
サンプルサイトの商品詳細ページ

静的サイトにPayPal Checkoutを統合する方法

PayPal Checkoutを統合することで、ユーザーに安全かつ信頼できる支払い方法を提供し、取引プロセスを合理化してユーザー体験を改善することができます。さらに、サイトの機能性と顧客満足度を大幅に向上されます。

PayPal Checkoutを静的サイトに統合する手順は以下のとおり。

  1. PayPal Developerの管理画面にログイン。
  2. 「Apps & Credentials」を選択し、右上トグルスイッチを「Sandbox」に切り替えた上で、「Create App」をクリックします。
  3. アプリの名前を入力し（今回の例では「Kinsta Gateway Demo」）、「Merchant」（商用）を選択して、「Create App」をクリックする。

    PayPalのアプリ作成フォーム
    PayPalのアプリ作成フォーム

  4. 後ほどPayPalの決済ボタンを追加するため、「API credentials」セクションの「Client ID」をコピーしてください。

    PayPalアプリケーションの認証情報
    PayPalアプリケーションの認証情報

  5. ページをスクロールして、その他の設定も確認します。今回の例では、設定はすべてデフォルトでOKです。「Save Changes」で設定を保存します。

    PayPalアプリケーションの設定
    PayPalアプリケーションの設定

  6. PayPal Checkoutを静的サイトに統合します。PayPalの代替支払方法（APM、Alternative Payment Methodの略）であるPayPal JavaScript SDKを使用して決済ボタンを作成します。この方法により、バックエンドアプリケーションをセットアップすることなく、さまざまな支払い方法を静的サイトに統合できるようになります。product.htmlファイルの</body>タグを閉じる直前に、以下のJavaScriptコードを貼り付けてください。YOUR_CLIENT_IDは、実際のPayPalのクライアントIDに置き換えます。また、通貨はPayPalで使用可能な任意の通貨に置き換えることができます（日本円にする場合は、USDをJPYに変更）。 
    <!-- PAYPAL BUTTON SCRIPT-->
<script    
src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID¤cy=USD"   
data-sdk-integration-source="button-factory"></script>
<script>
paypal.Buttons({
	createOrder: function(data, actions) {
	// 取引を設定
	return actions.order.create({
		purchase_units: [{
		amount: {
			value: '1.00'
		}
		}]
	});
	},
	onApprove: function(data, actions) {
	// 取引で発生した支払い金額を回収
	return actions.order.capture().then(function(details) {
		// 購入者に決済完了のメッセージを表示
		alert('Transaction completed by ' + details.payer.name.given_name);
	});
	}
}).render('#paypal-button-container');
</script>
<!-- PAYPAL BUTTON SCRIPT-->

    paypal.Buttons関数は、以下2つの関数を定義します。

    • createOrder─購入金額（この例では1.00米ドル）などの取引の詳細を設定
    • onApprove─取引の承認を処理し、資金を回収して、購入者に決済完了のメッセージを表示（この例ではalert()を使用）

    render関数は、PayPal ボタンがID paypal-button-containerを持つ既存の<div>内にレンダリングされるように指定しています。

    これで、静的サイトにPayPalを統合できました。

静的サイトにStripe Checkoutを統合する方法

Stripeは、あらゆる規模のビジネスに適した決済処理ソリューションを提供する、人気プラットフォームです。続いて、静的サイトにStripe Checkoutを統合する方法を見ていきましょう。

  1. Stripe Checkoutの決済ボタンを実装する前に、APIまたはStripeの管理画面で商品と価格を管理します。後者の場合は、管理画面で画面上部のトグルスイッチを「テスト環境」に切り替え、「商品」を選択します。

    Stripeの商品一覧ページ
    Stripeの商品一覧ページ

  2. 「商品を追加」をクリックして、「商品情報」フォームを開きます。

    Stripeの「商品情報」フォーム
    Stripeの「商品情報」フォーム

  3. 各フィールドを入力します。今回は、それぞれ以下のように設定します。
    • 名前：Turkish Rose
    • 説明：This is a beautiful Turkish Rose.
    • 画像：（imagesturkishrose.pngをアップロード）
    • 支払い方法：One-off（一括）
    • 価格：1.00
    • 通貨：米ドル（または任意の通貨）
  4. 各フィールドを埋めたら、「商品を保存」クリックします。
  5. 「商品」ページで一覧から「Turkish Rose」を選択します。

    Stripeの商品ページ
    Stripeの商品ページ

  6. 「料金」セクションで「支払いリンクを作成」をクリック。次に進む前に、商品の数量が1であることを確認してください。

    Turkish Roseの詳細を表示
    Turkish Roseの詳細を表示

  7. 「リンクを作成」をクリックします。

    Stripeの商品決済詳細
    Stripeの商品決済詳細

  8. 「支払いリンク」ページで、「購入ボタン」をクリックします。

    Stripeの「支払いリンク」ページ
    Stripeの「支払いリンク」ページ

  9. 「購入ボタン」パネルに生成された決済ボタンのコードが表示されます。ボタンのレイアウトを「設定」セクションで選択し、「ボタンのテキストを変更」をオンにして表示されるフィールドにボタンの文言を入力します（今回の例では「Buy with Stripe」）。最後に、「変更を保存してコードをコピーする」をクリックして、生成されたコードをOSのクリップボードにコピーします。

    Stripeの決済ボタンを作成
    Stripeの決済ボタンを作成

  10. PayPal同様、コピーしたコードをサンプルコードのproduct.htmlファイルの閉じタグ</body>の前（STRIPE BUTTON BEGINとSTRIPE BUTTON ENDの間）に貼り付けます。 
    <!-- STRIPE BUTTON BEGIN -->
<script> async
  src="https://js.stripe.com/v3/buy-button.js">
</script>

<stripe-buy-button>
  buy-button-id="BUY_BUTTON_ID"
  publishable-key="PUBLISHABLE_KEY"
>
</stripe-buy-button>
<!-- STRIPE BUTTON END -->

以上で完了です。PayPalとStripeを統合したら、静的サイトコードをKinstaの静的サイトホスティング環境にデプロイします。

決済プロセスをテストする

サンプルの静的サイトの商品詳細ページを開き、PayPalとStripeの決済ボタンが正しく表示されていることを確認します。

PayPalとStripeの決済ボタンが実装されたサンプルサイトの商品ページ
PayPalとStripeの決済ボタンが実装されたサンプルサイトの商品ページ

PayPal Checkoutのボタンをクリックすると、以下のようなログインダイアログボックスが表示されます。買い物客はPayPalにログインし、決済を完了させます。

ログインまたは登録を促すPayPalのダイアログボックス
ログインまたは登録を促すPayPalのダイアログボックス

この段階でログインの問題が生じる場合、ビジネスアカウントではなく個人アカウントでテストしている可能性があります。

また、買い物客はデビットカードかクレジットカードを選択することもできます。クリックすると以下のようなダイアログボックスが表示され、アカウント情報の入力が促されます。

PayPal Checkoutでデビットカードまたはクレジットカードを選択
PayPal Checkoutでデビットカードまたはクレジットカードを選択

すると、商品情報とPayPalアカウントの詳細が表示されます。確認の上、「Complete Purchase」をクリックすれば決済完了です。

PayPalの商品購入確認画面
PayPalの商品購入確認画面

PayPalで取引が承認されると、クライアントサイトで実行されるJavaScriptコードにより、決済完了の通知が表示されます。なお、この通知は開発/デバッグ用です。本番コードでは使用しないようにしてください。

取引完了の通知
取引完了の通知

取引を確認するには、PayPal for Businessの管理画面を開きます。「取引」＞「最近の取引」＞「すべてを表示」をクリックすると、最近のすべての取引の詳細が一覧表示されます。

PayPalのビジネスアカウントの取引一覧
PayPalのビジネスアカウントの取引一覧

サンプルサイトのproduct.htmlページで、「Buy with Stripe」をクリックして、Stripe Checkoutの決済プロセスもテストしましょう。この操作によって、商品詳細とGoogle Pay、Link、クレジットカード決済などの支払い方法を選択できるStripeのダイアログボックスが表示されます。

Stripe Checkoutで支払い方法を選択
Stripe Checkoutで支払い方法を選択

今回はGoogle Payを選択してみます。以下のようなダイアログボックスが表示され、支払いを行うカードを選択し、Google Payで商品の購入を確定します。

StripeでGoogle Payを選択した決済プロセス
StripeでGoogle Payを選択した決済プロセス

「PAY」をクリックして決済が完了すると、購入確認が表示されます。

Stripeの購入確認
Stripeの購入確認

Stripeの管理画面で「入金」を開くと、金額、通貨、説明、顧客情報、日付などの詳細が表示されます。

Stripeで入金を確認
Stripeで入金を確認

決済プロセスのトラブルシューティング

決済プロセスのテスト中にエラーが発生した場合は、以下のようなトラブルシューティングを行ってみてください。

  • 決済代行サービスの設定を変更する
  • SSL証明書を検証する
  • 買い物客のブラウザの互換性をチェックする
  • 適切なエラー処理を適用する
  • 複数の環境でテストする
  • ログと監視の技術を使用する

まとめ

Kinstaでホストする花屋のオンラインストアに、PayPal CheckoutとStripe Checkoutを統合し、決済ボタンを実装する方法をご紹介しました。同様の手順でその他の静的サイトにも決済機能を追加し、オンラインでの販売を開始して収益を伸ばすことができます。

Kinstaの静的サイトホスティングサービスは、ECサイトと決済機能など、動的な要素を統合するのにぴったりなシームレスな環境を提供しています。堅牢なインフラストラクチャにより、高速なページ読み込みが保証され、スムーズなオンラインショッピング体験を実現することができます。

静的サイトホスティングに加えて、Kinstaではより動的なアプリケーション（サーバーサイド処理、データベースインタラクションのような高度な機能が必要となるウェブアプリケーションなど）向けに設計されたアプリケーションホスティングもご用意しています。

PayPalやStripeのような決済代行サービスを活用して、静的サイトに動的な体験を実現してみてください。お気に入りのサービスはありますか？以下のコメント欄でぜひお聞かせください。

Jeremy Holcombe Kinsta

Kinstaのコンテンツ＆マーケティングエディター、WordPress開発者、コンテンツライター。WordPress以外の趣味は、ビーチでのんびりすること、ゴルフ、映画。高身長が特徴。