Zenn
💳

Salesforce の Experience Cloud で Stripe による決済

2020/12/30に公開
Stripe
Salesforce
APEX
LWC
tech

今回は、 Salesforce の Experience Cloud のページ上に Stripe による決済を導入してみます。
Community Cloud が Experience Cloud にリブランディングされたことで、この製品の可能性がより広がったようにも感じますね。もはや簡単な E コマースのサイトくらいなら作れるのではないかということで、検証を兼ねて Stripe による決済機能を作ってみたいと思います。

前提事項

全ての手順を説明すると非常に長くなるので、以下は事前に完了している想定で実施します。

  • Salesforce 組織でコミュニティを作成済み
  • Stripe アカウントを取得済み

Stripe で公開キーとシークレットキーを取得

Stripe にログインし、サイドバーの　開発者 > API キー からテスト環境用の 公開可能キー と シークレットキー を控えておきます。

Salesforce で CSP と指定ログイン情報を設定

Salesforce にログインし、 Expereince Cloud から Stripe の JavaScript を読み込む準備として、 セキュリティ > CSP 信頼済みサイト > 新規信頼済みサイト から https://js.stripe.com を信頼済みサイトに登録します。

次に、セキュリティ > 指定ログイン情報 > 新規指定ログイン情報 を開き、Apex から Stripe にリクエストを送信するためのエンドポイントと認証情報を登録しておきます。

ラベル 値 説明
名前 Stripe
URL https://api.stripe.com
ユーザ名 sk_XXXX... Stripe のシークレットキー
パスワード Password Stripe の認証の仕様上不要だが、 Salesforce の UI 上は入力必須のため Password などを入れておく

コミュニティの設定

エクスペリエンスビルダーを開き、設定 > セキュリティ から以下の通り設定を変更します。スクリプト用の信頼済みサイトには、CSP 信頼済みサイトに登録したのと同じ要領で https://js.stripe.com を登録します。

ここまで出来たら、コミュニティサイトのヘッダーに Stripe の JavaScript を読み込むための １ 行を追加します。設定 > 詳細 > ヘッドマークアップを編集 から <script src="https://js.stripe.com/v3/"></script> を追加して保存します。

決済を開始するための Lightning コンポーネントを作成

現状では Stripe で決済を行う方法は ２ つあります。

  1. Prebuilt Checkout Page: Stripe の決済ページを開く方法
  2. Custom payment flow: 自分で UI から作る方法

今回はとりあえず簡単そうな 1 の方法で実装してみたいと思います。
まずは Stripe に対して新しいセッションをリクエストするための Apex クラスを作成します。今回は 300 円のりんごを 2 つ買った想定の固定値で実装しています。決済成功時の URL なども今回はサンプル値です。

CheckoutController.cls
public with sharing class CheckoutController {
    public class Session {
        public String id;
    }
    @AuraEnabled(cacheable=false)
    public static String createCheckoutSession(){

        // リクエストボディを作成
        String body = 'success_url=https://example.com/success'
                      + '&cancel_url=https://example.com/cancel'
                      + '&payment_method_types[0]=card'
                      + '&line_items[0][quantity]=2'
                      + '&line_items[0][price_data][currency]=jpy'
                      + '&line_items[0][price_data][unit_amount]=300'
                      + '&line_items[0][price_data][product_data][name]=りんご'
                      + '&mode=payment';

        // リクエストを送信
        HttpRequest req = New HttpRequest();
        req.setEndpoint('callout:Stripe/v1/checkout/sessions');
        req.setMethod('POST');
        req.setBody(body);
        Http http = new Http();
        HttpResponse res = http.send(req);

        // セッション ID を返す
        Session session = (Session)JSON.deserialize(res.getBody(), Session.class);
        return session.id;
    }
}

次に、決済ページに遷移するための Lightning コンポーネントを作成します。UI 上の Checkout ボタンを押すと、Apex を介してセッションを作成します。それが成功すると決済ページに遷移するという動きになります。

checkout.html
<template>
    <lightning-button variant="brand" 
		      label="Checkout"  
		      icon-name="utility:cart" 
		      onclick={onCheckout}>
    </lightning-button>
</template>

JavaScript では Stripe インスタンスの初期化時に Stripe から取得した公開可能キーを指定する必要があります。

checkout.js
import { LightningElement } from "lwc";
import createCheckoutSession from "@salesforce/apex/CheckoutController.createCheckoutSession";
export default class Checkout extends LightningElement {
  renderedCallback() {
    this.stripe = Stripe(
        "pk_test_51HW..."
      );
  }
  onCheckout() {
    createCheckoutSession()
      .then((sessionId) => {
        this.stripe.redirectToCheckout({ sessionId });
      })
      .catch((error = console.error("Error:" + error)));
  }
}

Experience Cloud 上で決済処理の動作を確認

エクスペリエンスビルダーを開いたら、作成したコンポーネントを画面上に配置します。ビルダーのままでは検証できないので、 右上のプレビュー > 次のユーザーとしてプレビュー からプレビュー画面を開きます。

全て設定が完了していると checkout ボタンが表示されるので、押してみると Stripe の決済画面が開くはずです。あとは、ココからテスト用のクレジットカード番号を選んで決済してみます。決済の処理が成功すると、 Apex の success_url で指定した URL にリダイレクトされて完了します。

最後に Stripe にログインすると、テストデータとして成功した支払いが登録されています。

参考

Discussion