Shopify チェックアウト機能の実装で詰まった話

はじめに

Shopifyでの注文アプリをNext.jsとGraphQLを用いて作ろうとしたのですが、全然うまくいかずにかなりドはまりしてしまったので、今後同じような実装をする方が役に立てるように共有させていただきます。

やりたかったこと

• Next.jsと状態管理ライブラリであるRecoilを用いてカート機能
• カート商品に応じた 決済機能(チェックアウト) の実装

試したこと

• Shopify storeFront APIのcheckoutCreate mutationの使用
• 公式ドキュメントでチェックアウトページ自体の調査

試した結果

Shopify側が提供しているGraphQl mutaitonでは必須項目に購入者名や住所などの個人情報をVariableとして渡す必要があり、今回実装するアプリの仕様からずれてしまうため断念（他の方はこのやり方でも実装できると思います。）

解決策

こちらの記事（Shopify公式ドキュメント）を参考にチェックアウトリンクをカスタマイズ実装しました。記事によると下記のような実装で可能です。

1. https://(ストア名[例: example-shop.myshopify.com])/cart/ というURLを配置する
2.　商品のvariant_idと数量をvariant_id:2のように並べる

例　商品variant_id:36485954240671、数量 5の場合
https://(ストア名[例: example-shop.myshopify.com])/cart/36485954240671:5

　ただGraphQLからIDを取得した場合”gid://shopify/ProductVariant/36485954240671”のように取得されるため先頭の文字列が不要なため削除してあげる必要があります。

また上記の方法では複数商品に対応できないため、文字列の整形が必要になります。
不要な文字列の削除と整形を行ったのが下記のコードとなります。

cart.js

  const orderList = cartItems.map((item)=>{
    const newObj =  { checkoutId:item.variantId.replace("gid://shopify/ProductVariant/",""), checkoutQuantity: item.quantity}
    return newObj
   })
    const products = productValue?.join(",")
    const checkoutLinkTest = `https://${shopName}.myshopify.com/cart/${products}`

参考記事

Shopify公式ドキュメント