Shopifyの新しいチェックアウト機能への移行 1 - 代金引換と〇〇Pay
うちのECサイトのチェックアウト部分の開発で、今取り組んでいる課題について書いています。長いので3回の記事に分けます。
なんで記事にしようと思ったかというと、もし解決できる人が読んでいたら手伝ってもらえないかとか、やり方を教えてもらえないかと思っているからです。教えてあげてもいいよとか、手伝ってあげてもいいよ、という方がいたらご連絡ください。記事中で連絡用フォームをご案内します。
あと、うちと同じようなことをしようとしていて、情報を探している方がいたら参考になればと思い、部分的に解決できたことについてはその方法を記載しています。
では前置きはここまでにして、今の状況をざっと説明します。
スイッチサイエンスでは2022年にShopifyに移行しました。
それまではDjangoベースのECサイトを自社で改修しながら10年ぐらい使っていましたので、必要なら機能を自由に足せたのですが、Shopifyでは同じことが実現できなかったり、実現するにしてもカスタム開発が必要だったりします。
例えば販売店さん向けに卸売をしたり、ネコポスや宅急便で送料無料の金額が違ったりと、さまざまなことをカスタム開発で実現しています。（なお、Shopifyの機能もどんどん変わってゆくので、今までやったカスタマイズもそのうち不要になるかもしれません。）
こうしたカスタマイズの自由度が大きいことも1つの理由なのですが、スイッチサイエンスではShopifyの中でもPlusという、凡そ月額2000ドルの、Shopifyの中では高額なプランを利用しています。
Plusならチェックアウト部分の仕組みをcheckout.liquidやShopify Script （Script Editorアプリ）を使ってカスタマイズできるので、それを利用して今のサイトができています。これにはJavaScriptとRubyを使っています。
でもこれらの機能は2024年から2025年にかけて徐々に廃止され、替わりにShopify FunctionsとCheckout UI extensionsに移行されることになっているため、我々もそれに追従していかないとなりません。うちではJavaScriptとRustを使ってそれに取り組んでいます。
こうしたチェックアウトの機能変更によって、今までできていたけどできなくなる部分と、今までできなかったけどできるようになる部分、両方があるので今までと完全に同じものを作ることはできないのですが、ともかく新しいシステムでも今まで通りの支払と配送方法を選べることは維持しようと思っています。さらに支払方法として新規に〇〇Pay的なものを追加することも視野に入れています。
その中で今の所上がっている大きめの問題は代金引換に関すること。
具体的には
- 配送方法: 代金引換
- 支払方法: クレジットカード
- 配送方法: ネコポス
- 支払方法: 代金引換
今のところは、これが起きないようにcheckout.liquidを使っているのですが、checkout.liquidは2024年8月に廃止されるので別の方法を考えないとなりません。
思いついた解決方法は2つあって
- 不整合な組み合わせをお客様が選択した場合は注文ができないようにブロックする
- カートの画面で代金引換にするかどうかを選択してもらい、それに応じてチェックアウト画面に表示される支払方法や配送方法を変化させる
です。
1の実現方法は、Checkout UI Extensionsで、お客様の選択している支払方法と配送方法を把握し、それが両方代引である、または、両方とも代引でない、のどちらかでない場合、cart.attributesに不整合があることを書き込み、それをCart and Checkout Validation Functionsが読んで、メッセージを表示すると共に注文をブロックするという仕組みです。
2の実現方法は、テーマのカート画面のLiquidを編集して「代金引換を希望」といったラベルのチェックボックスを表示し、変更があったらShopifyのAjax APIの/cart/update.jsを呼び出してcart.attributesに「代金引換を希望している／いない」を書き込み、それをPayment Customization FunctionやDelivery Customization Functionが読んで、代金引換を希望している場合は、代金引換以外を隠す、そうでない場合は逆に代金引換を隠す、という仕組みです。
どちらも実際に期待通りの動作をしますが、1の方法は今のショップにGoogle PayやApple Payという選択肢が無いからこそ取り得るやり方で、テスト環境でそれらを有効にしてみたところ、期待した動作にはなりませんでした。
その理由は、お客様が支払い方法としてGoogle PayやApple Payを選択した場合、Checkout UI extensionsが機能しないからではないかと思っていますが、もし詳しいことをご存知の方や、機能させる方法をご存知の方がいらっしゃったら教えてください。
フォーム画面を開く
ともかく今の所、Google PayやApple Payを使うなら2の方法しかなさそうと考えています。
1回目の記事はここまでです。次回の記事はShop Payを使う場合はまた別の問題がある、という内容です。
システムエンジニア募集中です！
興味のある方はぜひカジュアル面談へ！お待ちしています。
