FROM CACHE - jp_header
解決済

AdminAPIで作成した注文は,通知メール&サンクスページでManual決済と表示される問題&クレカアイコンについて

shumaikuro
遊覧客
14 1 1

実態はクレカ決済だが,Manual決済をした場合に通知メールにカード情報を載せる方法を教えてください。

 

AdminAPI(DraftOrderCreate&Complete)で注文作成し決済は別サービスで行っています。

この場合,注文通知メールとサンクスページの決済欄はManualと表示されます。

サンクスページの決済説明欄サンクスページの決済説明欄

この「Manual」にカード情報を表示すべく,customAttributeにカードブランドと下4桁を格納させ通知メールLiquidを編集しました。

その結果,注文通知メールにはカードブランドと下4桁を表示させることに成功しました。

その際に使用したsrcは以下の通りです。

 

 

 

 

 

<p class="customer-info__item-content">
  <img src="{{ attributes.cardBrand | payment_icon_png_url  }}" class="customer-info__item-credit" height="24" alt="{{ attributes.cardBrand }}">
  <span>(カード番号下4桁:{{ attributes.cardNum }}) <br /> <strong>{{ transaction.amount | money }}</strong></span>
</p>

 

 

 

 

 

これでテストしてみると,VISA・DC・Amexのアイコンは正常に出力されます。

しかし,JCB・Masterは正しく表示されません。この2社のアイコンも正しく表示したいのですが,どうすれば良いでしょうか?

開発ストアから実施している為にカードロゴが正しく表示されないのか?ShopifyPaymentsが有効になっていないことが原因なのか?

VISAアイコンVISAアイコンAMEXアイコンAMEXアイコンDinnersアイコンDinnersアイコン
JCBアイコンJCBアイコンMasterアイコンMasterアイコン 

 

よろしくお願いします。

また,サンクスページの「Manual」項目も同様に手を加えたいのですが,やり方がわかりません。

サンクスページのお客様情報欄は,チェックアウト>追加スクリプトで手を加えられるものなのでしょうか?

shopifyPlusでないとカスタムできない領域でしょうか?

よろしくお願いします。

 

1 件の受理された解決策
junichiokamura
Community Manager
1200 280 506

成功

Thank Youページのカスタマイズは、それ用のアプリでできることは追加スクリプトでも可能です。(アプリも内部で行っているのは、Scripttag APIでThank you ページに差し込んでいるだけです)

https://apps.shopify.com/thank-you-page?locale=ja

カードのロゴに関しては、Liquidで出せるもので対応されるのが無難かと思います。正式にサポートされたものではないので。

Draft orderは、管理画面からマーチャントが注文作成する操作のAPI版なので、意味的には決済は全てManual になると思います。

Senior Partner Solutions Engineer

元の投稿で解決策を見る

6件の返信6

株式会社フルバランス
Shopify Partner
1441 504 644

1.カード会社画像が出ない件

掲載されているサンプルで出ている様に見えますが、実際にはリンク切れするということでしょうか?

2.Thanksページを書き換える

おっしゃるとおりShopify Plusの契約が必要になります。

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
shumaikuro
遊覧客
14 1 1

回答ありがとうございます。

 

現在出力されているJCB・Masterのロゴですが,

JCB: https://ci5.googleusercontent.com/proxy/eOnMC4skOO-0FCO8o_bhMj3dalSOlWBmBpZCYMLg88rXgX_LHUDnmePKSK9O...

 

Master: https://ci5.googleusercontent.com/proxy/ClnTx-YysJcvCrM3swKct3jeDFnBqDhP9Ew_-EKcQ1c4Xeo87XDwCj0XhJpp...

です。

ShopifyCloud内のPNGファイルを取りに行っているようですが,

JCB: https://cdn.shopify.com/shopifycloud/web/assets/v1/d37fc6cf4a3be5aa8f8c836148204e52.svg

Master: https://cdn.shopify.com/shopifycloud/web/assets/v1/b07d7f70cd57ff74e7e2827f124bd756.svg

の用にJCBの文字が入ったロゴタイプを出力したいのです。この場合,svgファイルを取りに行く必要があります。

そこで試しに

 

img src="{{ attributes.cardBrand | payment_icon_png_url  }}"
↓
img src="{{ attributes.cardBrand | payment_icon_svg_url  }}"

 

と書き換えてみましたが,アイコンは出力されません。

私のLiguid srcだとPNGファイルを取りに行っているので,svgファイルを読みに行くにはどうすれば良いのでしょうか?

お力を借りたいです。

 

 

サンクスページの件,理解しました。

shumaikuro
遊覧客
14 1 1
<p class="customer-info__item-content">
{% if attributes.cardBrand == "JCB" %}
  <img src="https://cdn.shopify.com/s/files/1/XXXXXXXX" class="customer-info__item-credit" height="24" alt="{{ attributes.cardBrand }}"></img>
  {% else %}
  <img src="{{ attributes.cardBrand | payment_icon_png_url  }}" class="customer-info__item-credit" height="24" alt="{{ attributes.cardBrand }}"></img>
{% endif %}

{% if attributes.cardBrand == "Mastercard" %}
  <img src="https://cdn.shopify.com/s/files/1/XXXXXXX" class="customer-info__item-credit" height="24" alt="{{ attributes.cardBrand }}"></img>
  {% else %}
  <img src="{{ attributes.cardBrand | payment_icon_png_url  }}" class="customer-info__item-credit" height="24" alt="{{ attributes.cardBrand }}"></img>
{% endif %}

<span>(カード番号下4桁:{{ attributes.cardNum }}) <br /> <strong>{{ transaction.amount | money }}</strong></span>
</p>

上記のコードにすることで,無理矢理JCB・Masterロゴを出力することはできました。

「JCB・Mastterロゴをダウンロード>管理画面>設定>ファイルにアップロード>アセットURLをimg srcにペースト」というやり方です。

しかし,これはカードの著作権的に大丈夫なのでしょうか?

 

junichiokamura
Community Manager
1200 280 506

成功

Thank Youページのカスタマイズは、それ用のアプリでできることは追加スクリプトでも可能です。(アプリも内部で行っているのは、Scripttag APIでThank you ページに差し込んでいるだけです)

https://apps.shopify.com/thank-you-page?locale=ja

カードのロゴに関しては、Liquidで出せるもので対応されるのが無難かと思います。正式にサポートされたものではないので。

Draft orderは、管理画面からマーチャントが注文作成する操作のAPI版なので、意味的には決済は全てManual になると思います。

Senior Partner Solutions Engineer
junichiokamura
Community Manager
1200 280 506

決済は別サービスで行っています。

なお、オンラインの購入者のフローにこれを差し込んでいる場合、アプリ開発の規約違反に当たる可能性があるので、ご注意ください。

Senior Partner Solutions Engineer
shumaikuro
遊覧客
14 1 1

岡村様

回答ありがとうございます。

ロゴ・サンクスページ・規約の件,了解しました。