Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

電商網站開發 - 應用Weebly (Part 2 金流串接)

5.330 Aufrufe

Veröffentlicht am

Weebly是一個提供使用者假設網站的服務。Weebly提供視覺化模組,以免撰寫程式的方式(*亦保留可撰寫html code的彈性),讓大多數人能快速進入並制作屬於自己的網站。

請註冊/登入 Weebly.com (http://www.weebly.com)

Veröffentlicht in: Business

電商網站開發 - 應用Weebly (Part 2 金流串接)

  1. 1. + Website Solution Advance – 金流服務串接 (PayPal)
  2. 2. + Outline n Advance n 第三方金流支付基礎概念 n 免費快速建立銷售網站— Weebly.com n Weebly店鋪頁面簡介 n PayPal金流服務串接實作 n Weebly嵌入代碼元件 n PayPal賬戶申請與設定 n 串接Paypal與Weebly網站 n 成果展示與問答 (15 min) YS, Fang. ys.fang@thinkinviz.com
  3. 3. + YS, Fang. ys.fang@thinkinviz.com 第三方金流 支付基礎概念 3
  4. 4. + 3 Essentials to Commerce n 資訊流 n 物流 (實體商品) n 金流 n 支付界面的演進 n F2F, n PC/Internet n Mobile Devices with wireless connection ability YS, Fang. ys.fang@thinkinviz.com 4 現代商業活動三元素
  5. 5. + Payment n 支票 n 轉帳、劃撥、eATM n 信用卡 n 代收貨款 n 第三方支付 n PayPal, 支付寶, PayLink, 歐付寶, 第e支付… n 行動支付 YS, Fang. ys.fang@thinkinviz.com 5 各式金流服務
  6. 6. #
  7. 7. ! $ + 3rd Party Payment 第三⽅方⽀支付 YS, Fang. ys.fang@thinkinviz.com 6
  8. 8. + YS, Fang. ys.fang@thinkinviz.com 建立銷售網站 7
  9. 9. + 建置銷售網站 YS, Fang. ys.fang@thinkinviz.com 8 運用Weebly提供的店鋪頁面
  10. 10. + 建置銷售網站 YS, Fang. ys.fang@thinkinviz.com 9 運用Weebly提供的店鋪頁面:缺點1 沒有新台幣幣別
  11. 11. + 建置銷售網站 YS, Fang. ys.fang@thinkinviz.com 10 運用Weebly提供的店鋪頁面:缺點1 沒有新台幣幣別
  12. 12. + 建置銷售網站 YS, Fang. ys.fang@thinkinviz.com 11 運用Weebly提供的店鋪頁面:缺點2 支援刷卡, 但是要被抽成…
  13. 13. + 建置銷售網站 YS, Fang. ys.fang@thinkinviz.com 12 運用Weebly提供的店鋪頁面:缺點3 支援PayPal服務, 但是要升級為付費用戶…
  14. 14. YS, Fang. ys.fang@thinkinviz.com 13 自己動手做吧! Step1. 運用Weebly 內嵌代碼(embed code)元件 Stpe2 . 申請 PayPal賬戶 Stpe3. 建立商品銷售按鈕 Step4. 將PayPal按鈕代碼嵌入Weebly網頁 Step5. 試用(網頁/手機),完成!
  15. 15. + Use “Embed Code” component within Weebly Service. Step1 使用Weebly內嵌代碼 元件 YS, Fang. ys.fang@thinkinviz.com 14
  16. 16. + Step1 網站編輯進階操作 YS, Fang. ys.fang@thinkinviz.com 15 內嵌程式碼(Embed Code)元件。 可以寫程式碼了!
  17. 17. + Step1 網站編輯進階操作 YS, Fang. ys.fang@thinkinviz.com 16 內嵌程式碼(Embed Code)元件,提供自由組裝其他網站的 能力,可將找到的HTML code整合到Weebly中,增加彈性。 在網頁中的位置在 body… /body 之間
  18. 18. + Apply Your 3rd party payment account with PayPal. Step2 申請PayPal帳號 YS, Fang. ys.fang@thinkinviz.com 17
  19. 19. + PayPal支付服務 https://www.paypal.com/ YS, Fang. ys.fang@thinkinviz.com 18
  20. 20. + PayPal服務 YS, Fang. ys.fang@thinkinviz.com 19 註冊 – 特選
  21. 21. + PayPal服務 YS, Fang. ys.fang@thinkinviz.com 20 註冊 – 略過信用卡資訊
  22. 22. + PayPal服務 YS, Fang. ys.fang@thinkinviz.com 21 登入主畫面。
  23. 23. + PayPal服務 YS, Fang. ys.fang@thinkinviz.com 22 認證細節。 以銀行帳戶或信用卡 認證
  24. 24. + Setup shopping payment Button (Link) with PayPal. Step3 設定PayPal購物支付按鈕 連結 YS, Fang. ys.fang@thinkinviz.com 23
  25. 25. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 24 點擊「產品與服務」
  26. 26. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 25 可用線上支付方案,點選「網站付款標準版」 (可一併產生電子郵件付款方案)
  27. 27. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 26 使用結帳按鈕工廠
  28. 28. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 27 結帳按鈕工廠-主畫面
  29. 29. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 28 單一結帳按鈕-立即購
  30. 30. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 29 單一結帳按鈕-立即購:設定細節
  31. 31. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 30 單一結帳按鈕-立即購:產生HTML代碼 貼回Weebly的Embed Code元件
  32. 32. + Embed PayPal Button into Weebly Page Step4 將PayPal按鈕代碼嵌入 Weebly網頁 YS, Fang. ys.fang@thinkinviz.com 31
  33. 33. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 32 單一結帳按鈕-立即購:Weebly的Embed Code元件操作
  34. 34. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 33 單一結帳按鈕-立即購:產生HTML代碼 貼回Weebly的Embed Code元件,完成畫面
  35. 35. + Have a TEST! Step5 完成! 用網頁/手機來試用看看吧! YS, Fang. ys.fang@thinkinviz.com 34
  36. 36. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 35 PayPal結賬畫面 – 正確! (PayPal or 信用卡)
  37. 37. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 36 PayPal結賬畫面 – 正確! (信用卡付款,點選「沒有PayPal帳戶」)
  38. 38. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 37 PayPal結賬畫面 – 信用卡付款輸入界面 完成!
  39. 39. + PayPal support Different Checkout Interfaces. Compare following two. YS, Fang. ys.fang@thinkinviz.com 38 PayPal支援不同的結帳畫面。同樣是「立即購」,有分 Desktop 與 Mobile版本。 DESKTOP MOBILE
  40. 40. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 39 PayPal結賬畫面 – 錯誤! (編碼問題)
  41. 41. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 40 PayPal結賬畫面 – 錯誤! 我的個人檔案à我的銷售工具àPayPal 按鈕語⾔言編碼 改為UTF-8
  42. 42. YS, Fang. ys.fang@thinkinviz.com 41 你已經建立完成 一個銷售網站了 來些變化吧! 加入購物車 改變按鈕風格
  43. 43. + 加入購物車 一次結帳多個商品。 YS, Fang. ys.fang@thinkinviz.com 42
  44. 44. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 43 多筆結帳按鈕-購物車
  45. 45. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 44 多筆結帳按鈕-購物車:設定細節
  46. 46. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 45 多筆結帳按鈕-購物車:產生HTML代碼 貼回Weebly的Embed Code元件
  47. 47. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 46 多筆結帳按鈕-購物車:Weebly的Embed Code元件操作
  48. 48. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 47 多筆結帳按鈕-購物車:Weebly的Embed Code元件操作, 完成畫面
  49. 49. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 48 多筆結帳按鈕-檢視購物車
  50. 50. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 49 多筆結帳按鈕-檢視購物車:設定細節
  51. 51. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 50 多筆結帳按鈕-檢視購物車:產生HTML代碼 貼回Weebly的Embed Code元件
  52. 52. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 51 多筆結帳按鈕-檢視購物車:Weebly的Embed Code元件 操作
  53. 53. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 52 多筆結帳按鈕-檢視購物車:Weebly的Embed Code元件 操作,完成畫面
  54. 54. + 建立支付按鈕 YS, Fang. ys.fang@thinkinviz.com 53 「加到購物車」,跳轉後畫面。 「檢視購物車」,跳轉後畫面。
  55. 55. + 改變按鈕風格 自訂購物按鈕進階技巧 讓網站界面更專業。 YS, Fang. ys.fang@thinkinviz.com 54
  56. 56. + 自定義結帳按鈕外觀 YS, Fang. ys.fang@thinkinviz.com 55 PayPal風格與網站不一致?We Can change it! 同樣的新增結帳按鈕,但「無法」新增選項。 !不可添加選項
  57. 57. + 自定義結帳按鈕外觀 YS, Fang. ys.fang@thinkinviz.com 56 PayPal風格與網站不一致?We Can change it! 選擇「電子郵件」,可見一個URL,貼回Weebly。
  58. 58. + 自定義結帳按鈕外觀 YS, Fang. ys.fang@thinkinviz.com 57 PayPal風格與網站不一致?We Can change it! 選擇「電子郵件」,可見一個URL,貼回Weebly。
  59. 59. + 自定義結帳按鈕外觀 YS, Fang. ys.fang@thinkinviz.com 58 PayPal風格與網站不一致?We Can change it! 使用Weebly-Button元件,完成一致風格的結帳按鈕。 PayPal標準按鈕 使用付款URL, 所自定義的結帳按鈕
  60. 60. + 自定義結帳按鈕外觀 YS, Fang. ys.fang@thinkinviz.com 59 同樣的,可以產生 – 立即購、加到購物車、檢視購物車 等三組按鈕。後續結帳操作流程與原本一致。
  61. 61. + 自定義結帳按鈕外觀 YS, Fang. ys.fang@thinkinviz.com 60 ! 唯一的不足,無法選用下拉選單。 PayPal無法自動產生「電子郵件」結帳連結。
  62. 62. + Put All together! 整合今日所學 YS, Fang. ys.fang@thinkinviz.com 61
  63. 63. + 金流整合 n Weebly可免費、快速、簡易的建立電子商務網站的 [前端界面] n PayPal可讓賣家透過它販賣商品並收費(刷口)的 [後端服務] n 兩個獨立的工具,透過網站內嵌程式代碼,聯結在一 起了! n 簡單的程式運用 (Embed Code) YS, Fang. ys.fang@thinkinviz.com 62 前端(網站)+後端(金流)
  64. 64. + 台灣的第三方支付服務 n https://firstpay.firstbank.com.tw/ (第一銀行) n 可製作類似PayPal的付款按鈕 n https://firstpay.firstbank.com.tw/doc/簡易收款說明.pdf n https://www.pockii.com (中國信託) n 可製作單一收款HTML按鈕 與 整筆訂購單按鈕 n http://www.allpay.com.tw/Service/FAQQuickPayNormal 歐付寶 n 更貼近台灣的使用行為 n http://www.twq.com.tw/ (台灣支付) – 需邀請碼 YS, Fang. ys.fang@thinkinviz.com 63 開始蓬勃發展!
  65. 65. + 回家作業 n 對於前端、後端 略懂略懂後。 技術的價值在於能夠解決問題… n 想想: 有一家連鎖超商,遇到了一個問題: 中午時段來客數都蠻少的, 可以怎麼做來增加來客數呢? 如果是你,你會怎麼做呢? YS, Fang. ys.fang@thinkinviz.com 64
  66. 66. + 問答時間FAQ YS, Fang. ys.fang@thinkinviz.com 65

×