47
EPAYTW 金流串接實作教學 使用AllPay歐付寶

E-commerce 金流串接實作教學 AllPay(歐付寶)

Embed Size (px)

DESCRIPTION

金流串接實作教學,使用AllPay(支付寶)第三方支付服務。

Citation preview

Page 1: E-commerce 金流串接實作教學 AllPay(歐付寶)

EPAYTW 金流串接實作教學使用AllPay歐付寶

Page 2: E-commerce 金流串接實作教學 AllPay(歐付寶)

在開始之前...

請快速瀏覽後

再決定是否進行操作

Page 3: E-commerce 金流串接實作教學 AllPay(歐付寶)

實作教學:串接AllPay

http://www.allpay.com.tw/

Page 4: E-commerce 金流串接實作教學 AllPay(歐付寶)

申請AllPay帳號-1

打開瀏覽器連結至AllPay (http://www.allpay.com.tw/)

Page 5: E-commerce 金流串接實作教學 AllPay(歐付寶)

申請AllPay帳號-2

新使用者,點選註冊AllPay帳戶

點選註冊

Page 6: E-commerce 金流串接實作教學 AllPay(歐付寶)

申請AllPay帳號-3

依需求選擇帳戶類型。每種會員類型都支援「收款」、「付款」。差別為額度上限

點選「加⼊入會員」

Page 7: E-commerce 金流串接實作教學 AllPay(歐付寶)

申請AllPay帳號-4.1

填寫註冊資訊。 所有資料務必填寫真實資料,以免無法驗證身份與提領款項。

Page 8: E-commerce 金流串接實作教學 AllPay(歐付寶)

申請AllPay帳號-4.2

輸入手機驗證碼。* 檢驗碼同為登入歐付寶的密碼。

⼿手機⾝身份驗證

Page 9: E-commerce 金流串接實作教學 AllPay(歐付寶)

申請AllPay帳號-4.3

驗證後,註冊成功。

點擊這裡,回到主畫⾯面。

Page 10: E-commerce 金流串接實作教學 AllPay(歐付寶)

申請PayPal帳號-5

AllPay登入主畫面,完成帳戶申請。

您的帳號

Page 11: E-commerce 金流串接實作教學 AllPay(歐付寶)

製作付款按鈕• 在AllPay帳⼾戶中將欲銷售的商品建檔管理,並透過設定產⽣生「⼀一址付」結帳按鈕。 • 顧客點擊「⼀一址付」便可開始付費結帳,⽀支付的款項將匯⼊入您的AllPay帳⼾戶。 • 若欲提領AllPay款項,必須通過⾝身份驗證並申請銀⾏行帳號綁定,請詳⾒見AllPay使⽤用說明-

http://www.allpay.com.tw/Service/QA4

Page 12: E-commerce 金流串接實作教學 AllPay(歐付寶)

製作付款按鈕在開始之前,您所需知道的事情...

AllPay提供⼀一種付款按鈕。

1. 「⼀一址付」 顧客⼀一張訂單能選購多種商品,進⾏行結帳。(以下⽰示範)

Page 13: E-commerce 金流串接實作教學 AllPay(歐付寶)

一址付提供選購多種商品

(以下⽰示範)

Page 14: E-commerce 金流串接實作教學 AllPay(歐付寶)

製作「一址付」按鈕-1

請登入AllPay,從主畫面點選「我要收款」

1. 點選「我要收款」

2. 點選「新增⼀一址付」

Page 15: E-commerce 金流串接實作教學 AllPay(歐付寶)

製作「立即購」按鈕-2

申請「收款功能」

⾸首次使⽤用時,須先「申請收款」功能

Page 16: E-commerce 金流串接實作教學 AllPay(歐付寶)

製作「一址付」按鈕-3

填寫基本資料,請確保真實無誤。

基本資料

打勾送出

Page 17: E-commerce 金流串接實作教學 AllPay(歐付寶)

製作「一址付」按鈕-4

成為「賣家」會員

確定

Page 18: E-commerce 金流串接實作教學 AllPay(歐付寶)

製作「一址付」按鈕-5

開通「收款」與「付款」功能

確定

Page 19: E-commerce 金流串接實作教學 AllPay(歐付寶)

製作「一址付」按鈕-6

開通「收款」與「付款」功能

Page 20: E-commerce 金流串接實作教學 AllPay(歐付寶)

製作「一址付」按鈕-7

點選「我要收款」- 「新增一址付」

新增⼀一址付

Page 21: E-commerce 金流串接實作教學 AllPay(歐付寶)

製作「一址付」按鈕-8

新增「一址付」設定畫面

選擇商品類型輸⼊入商品名稱輸⼊入其他資訊

設定銷售期間

Page 22: E-commerce 金流串接實作教學 AllPay(歐付寶)

製作「一址付」按鈕-9

新增「一址付」設定畫面

設定顧客可以選擇的付款⽅方式

寄送地址選項

Page 23: E-commerce 金流串接實作教學 AllPay(歐付寶)

製作「一址付」按鈕-10

新增「商品」設定畫面新增賣場內的商品,可多樣。

Page 24: E-commerce 金流串接實作教學 AllPay(歐付寶)

製作「一址付」按鈕-11

新增「商品」設定畫面

<!> 若您的畫⾯面無法全部呈現(如圖),請調整顯⽰示⽐比例。

Page 25: E-commerce 金流串接實作教學 AllPay(歐付寶)

製作「一址付」按鈕-11

新增「商品」設定畫面

<!> Google Chrome的調整⽅方式

點擊

將「縮放」變⼩小

Page 26: E-commerce 金流串接實作教學 AllPay(歐付寶)

製作「一址付」按鈕-12

新增「商品」設定畫面

商品資訊管理,請輸⼊入商品名稱、簡介、售價、庫存量、或是商品圖⽚片等

<!>調整後,可顯⽰示全部畫⾯面

Page 27: E-commerce 金流串接實作教學 AllPay(歐付寶)

製作「一址付」按鈕-13

新增「商品」設定畫面

商品資訊管理,請輸⼊入商品名稱、簡介、售價、庫存量、或是商品圖⽚片等

點擊「完成」

Page 28: E-commerce 金流串接實作教學 AllPay(歐付寶)

製作「一址付」按鈕-13

新增「商品」設定畫面

⾦金額受⽀支付⽅方式影響,請視情況調整。

Page 29: E-commerce 金流串接實作教學 AllPay(歐付寶)

製作「一址付」按鈕-14

新增「商品」設定畫面

重複「新增商品」可建⽴立多項商品

Page 30: E-commerce 金流串接實作教學 AllPay(歐付寶)

製作「一址付」按鈕-15

「運費」設定畫面

設定運費。

Page 31: E-commerce 金流串接實作教學 AllPay(歐付寶)

製作「一址付」按鈕-16

「運費」設定畫面

可設定多家運費。

Page 32: E-commerce 金流串接實作教學 AllPay(歐付寶)

製作「一址付」按鈕-17

設定畫面

確認送出。

Page 33: E-commerce 金流串接實作教學 AllPay(歐付寶)

製作「一址付」按鈕-18

完成畫面

「⼀一址付」 程式代碼。請複製

Page 34: E-commerce 金流串接實作教學 AllPay(歐付寶)

將「一址付」按鈕代碼嵌入在網頁中 -1

開啟編輯器,將複製的程式代碼,貼到<body>...</body>之中,

想要顯示付款按鈕的位置。

貼上「⼀一址付」的程式代碼簡易範例網頁

Page 35: E-commerce 金流串接實作教學 AllPay(歐付寶)

將「一址付」按鈕代碼嵌入在網頁中 -2

檢視網頁以及「付款按鈕」

簡易範例網頁

Page 36: E-commerce 金流串接實作教學 AllPay(歐付寶)

使用「一址付」按鈕-1

檢視網頁以及「付款按鈕」

「付款按鈕」點擊後進⾏行付款

簡易範例網頁

Page 37: E-commerce 金流串接實作教學 AllPay(歐付寶)

使用「一址付」按鈕-2

導引至AllPay的結帳畫面

包含商店資訊、各種販售商品資訊與價格

Page 38: E-commerce 金流串接實作教學 AllPay(歐付寶)

使用「一址付」按鈕-3

導引至AllPay的結帳畫面

點擊「付款去」

Page 39: E-commerce 金流串接實作教學 AllPay(歐付寶)

使用「一址付」按鈕-4

導引至AllPay的結帳畫面

選擇「商品」與「數量」

Page 40: E-commerce 金流串接實作教學 AllPay(歐付寶)

使用「一址付」按鈕-5

導引至AllPay的結帳畫面

選擇「商品」與「數量」

選擇「運送⽅方式」

Page 41: E-commerce 金流串接實作教學 AllPay(歐付寶)

使用「一址付」按鈕-6

導引至AllPay的結帳畫面

訂單明細

顧客輸⼊入 「付款⼈人」資訊。

Page 42: E-commerce 金流串接實作教學 AllPay(歐付寶)

使用「一址付」按鈕-7

導引至AllPay的結帳畫面

顧客輸⼊入 「收件⼈人」資訊。

完成後,前往付款

Page 43: E-commerce 金流串接實作教學 AllPay(歐付寶)

使用「一址付」按鈕-8

導引至AllPay的結帳畫面

確認訂單資訊

⽀支援多種付款⽅方式

Page 44: E-commerce 金流串接實作教學 AllPay(歐付寶)

使用「一址付」按鈕-9

結帳付款 - 「信用卡」

顧客可⽤用「信⽤用卡」付款

Page 45: E-commerce 金流串接實作教學 AllPay(歐付寶)

使用「一址付」按鈕-10

結帳付款 - 「ATM」

顧客可⽤用「ATM」付款

Page 46: E-commerce 金流串接實作教學 AllPay(歐付寶)

使用「一址付」按鈕-11

結帳付款 - 「海外支付」

顧客可⽤用「海外⽀支付」付款

Page 47: E-commerce 金流串接實作教學 AllPay(歐付寶)

SEE POSSIBILITIES, ThinkinViz www.thinkinviz.com