Paidy Checkoutで送信する顧客の住所を、StripeのAddress Elementで収集する

決済手段としてPaidyを追加する場合、商品の発送先住所をPaidy Checkoutを開始するAPIリクエストに送信する必要があります。この記事では、Paidyで顧客の住所情報を収集する際に、Stripeの住所フォーム機能を使う方法を紹介します。

Paidyでは発送先住所が必須

Paidy Checkoutでは、shipping_addressで郵便番号から始まる住所を送信する必要があります。

const payload = {
    ...
    "shipping_address": {
        "line1": "AXISビル 10F",
        "line2": "六本木4-22-1",
        "city": "港区",
        "state": "東京都",
        "zip": "106-2004"
    }
};
 paidyHandler.launch(payload);

この値を取得するための住所フォームを、Stripeの埋め込みフォームで簡単に実装してみましょう。

Stripeを使って住所フォームを実装する

Stripe.js SDKを利用して、　Address Elementを表示させましょう。SDKを利用して、対象のHTMLにフォームをマウントさせる形で実装します。

<div id="address-element"></div>
<script>

const appearance = { /* appearance */ };
const options = { mode: 'shipping' };
const elements = stripe.elements({ clientSecret, appearance });
const addressElement = elements.create('address', options);
addressElement.mount('#address-element');
</script>

GoogleのAPIを利用した住所のオートコンプリートにも対応していますので、住所フォームをより簡単に作ることができます。

住所の入力完了判定と、データの取得方法

住所の入力が完了したかどうかは、changeイベントで判断できます。event.completeがtrueであれば、住所入力が完了していると判断できます。また、event.value.addessから住所情報をオブジェクト形式で受け取ることができますので、この内容をPaidy Checkoutを実行する処理に利用しましょう。

addressElement.mount('#address-element');

let customerAddress
addressElement.on('change', (event) => {
  if (event.complete){
    // Extract potentially complete address
    address = event.value.address;
  }
})

StripeのAddress Elementを利用する場合、オブジェクトのキーが一部Paidyと異なる点に注意しましょう。countryの削除とpostal_codeキーをzipキーに変更することで、Paidyへのリクエストに使えるようになります。

+if (!address) return;
+const {
+  postal_code: zip,
+  state,
+  city,
+  line1,
+  line2,
+} = address;
const payload = {
    ...
    "shipping_address": {
+        zip,
+       state,
+       city,
+       line1,
+       line2,
    }
};
 paidyHandler.launch(payload);

まとめ

Paidyのような住所情報が必須の決済サービスを使う際でも、Stripe.jsのSDKを使うことで開発工数を削減することができます。決済手段を選択するUIのカスタマイズにもStripeを活用できますので、こちらの記事もあわせてご覧ください。