Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

5,046 views

Published on

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

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

Published 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

×