Download - E-commerce 金流串接實作教學 AllPay(歐付寶)
![Page 1: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/1.jpg)
EPAYTW 金流串接實作教學使用AllPay歐付寶
![Page 2: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/2.jpg)
在開始之前...
請快速瀏覽後
再決定是否進行操作
![Page 5: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/5.jpg)
申請AllPay帳號-2
新使用者,點選註冊AllPay帳戶
點選註冊
![Page 6: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/6.jpg)
申請AllPay帳號-3
依需求選擇帳戶類型。每種會員類型都支援「收款」、「付款」。差別為額度上限
點選「加⼊入會員」
![Page 7: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/7.jpg)
申請AllPay帳號-4.1
填寫註冊資訊。 所有資料務必填寫真實資料,以免無法驗證身份與提領款項。
![Page 8: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/8.jpg)
申請AllPay帳號-4.2
輸入手機驗證碼。* 檢驗碼同為登入歐付寶的密碼。
⼿手機⾝身份驗證
![Page 9: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/9.jpg)
申請AllPay帳號-4.3
驗證後,註冊成功。
點擊這裡,回到主畫⾯面。
![Page 10: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/10.jpg)
申請PayPal帳號-5
AllPay登入主畫面,完成帳戶申請。
您的帳號
![Page 11: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/11.jpg)
製作付款按鈕• 在AllPay帳⼾戶中將欲銷售的商品建檔管理,並透過設定產⽣生「⼀一址付」結帳按鈕。 • 顧客點擊「⼀一址付」便可開始付費結帳,⽀支付的款項將匯⼊入您的AllPay帳⼾戶。 • 若欲提領AllPay款項,必須通過⾝身份驗證並申請銀⾏行帳號綁定,請詳⾒見AllPay使⽤用說明-
http://www.allpay.com.tw/Service/QA4
![Page 12: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/12.jpg)
製作付款按鈕在開始之前,您所需知道的事情...
AllPay提供⼀一種付款按鈕。
1. 「⼀一址付」 顧客⼀一張訂單能選購多種商品,進⾏行結帳。(以下⽰示範)
![Page 13: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/13.jpg)
一址付提供選購多種商品
(以下⽰示範)
![Page 14: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/14.jpg)
製作「一址付」按鈕-1
請登入AllPay,從主畫面點選「我要收款」
1. 點選「我要收款」
2. 點選「新增⼀一址付」
![Page 15: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/15.jpg)
製作「立即購」按鈕-2
申請「收款功能」
⾸首次使⽤用時,須先「申請收款」功能
![Page 16: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/16.jpg)
製作「一址付」按鈕-3
填寫基本資料,請確保真實無誤。
基本資料
打勾送出
![Page 17: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/17.jpg)
製作「一址付」按鈕-4
成為「賣家」會員
確定
![Page 18: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/18.jpg)
製作「一址付」按鈕-5
開通「收款」與「付款」功能
確定
![Page 19: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/19.jpg)
製作「一址付」按鈕-6
開通「收款」與「付款」功能
![Page 20: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/20.jpg)
製作「一址付」按鈕-7
點選「我要收款」- 「新增一址付」
新增⼀一址付
![Page 21: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/21.jpg)
製作「一址付」按鈕-8
新增「一址付」設定畫面
選擇商品類型輸⼊入商品名稱輸⼊入其他資訊
設定銷售期間
![Page 22: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/22.jpg)
製作「一址付」按鈕-9
新增「一址付」設定畫面
設定顧客可以選擇的付款⽅方式
寄送地址選項
![Page 23: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/23.jpg)
製作「一址付」按鈕-10
新增「商品」設定畫面新增賣場內的商品,可多樣。
![Page 24: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/24.jpg)
製作「一址付」按鈕-11
新增「商品」設定畫面
<!> 若您的畫⾯面無法全部呈現(如圖),請調整顯⽰示⽐比例。
![Page 25: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/25.jpg)
製作「一址付」按鈕-11
新增「商品」設定畫面
<!> Google Chrome的調整⽅方式
點擊
將「縮放」變⼩小
![Page 26: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/26.jpg)
製作「一址付」按鈕-12
新增「商品」設定畫面
商品資訊管理,請輸⼊入商品名稱、簡介、售價、庫存量、或是商品圖⽚片等
<!>調整後,可顯⽰示全部畫⾯面
![Page 27: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/27.jpg)
製作「一址付」按鈕-13
新增「商品」設定畫面
商品資訊管理,請輸⼊入商品名稱、簡介、售價、庫存量、或是商品圖⽚片等
點擊「完成」
![Page 28: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/28.jpg)
製作「一址付」按鈕-13
新增「商品」設定畫面
⾦金額受⽀支付⽅方式影響,請視情況調整。
![Page 29: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/29.jpg)
製作「一址付」按鈕-14
新增「商品」設定畫面
重複「新增商品」可建⽴立多項商品
![Page 30: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/30.jpg)
製作「一址付」按鈕-15
「運費」設定畫面
設定運費。
![Page 31: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/31.jpg)
製作「一址付」按鈕-16
「運費」設定畫面
可設定多家運費。
![Page 32: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/32.jpg)
製作「一址付」按鈕-17
設定畫面
確認送出。
![Page 33: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/33.jpg)
製作「一址付」按鈕-18
完成畫面
「⼀一址付」 程式代碼。請複製
![Page 34: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/34.jpg)
將「一址付」按鈕代碼嵌入在網頁中 -1
開啟編輯器,將複製的程式代碼,貼到<body>...</body>之中,
想要顯示付款按鈕的位置。
貼上「⼀一址付」的程式代碼簡易範例網頁
![Page 35: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/35.jpg)
將「一址付」按鈕代碼嵌入在網頁中 -2
檢視網頁以及「付款按鈕」
簡易範例網頁
![Page 36: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/36.jpg)
使用「一址付」按鈕-1
檢視網頁以及「付款按鈕」
「付款按鈕」點擊後進⾏行付款
簡易範例網頁
![Page 37: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/37.jpg)
使用「一址付」按鈕-2
導引至AllPay的結帳畫面
包含商店資訊、各種販售商品資訊與價格
![Page 38: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/38.jpg)
使用「一址付」按鈕-3
導引至AllPay的結帳畫面
點擊「付款去」
![Page 39: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/39.jpg)
使用「一址付」按鈕-4
導引至AllPay的結帳畫面
選擇「商品」與「數量」
![Page 40: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/40.jpg)
使用「一址付」按鈕-5
導引至AllPay的結帳畫面
選擇「商品」與「數量」
選擇「運送⽅方式」
![Page 41: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/41.jpg)
使用「一址付」按鈕-6
導引至AllPay的結帳畫面
訂單明細
顧客輸⼊入 「付款⼈人」資訊。
![Page 42: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/42.jpg)
使用「一址付」按鈕-7
導引至AllPay的結帳畫面
顧客輸⼊入 「收件⼈人」資訊。
完成後,前往付款
![Page 43: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/43.jpg)
使用「一址付」按鈕-8
導引至AllPay的結帳畫面
確認訂單資訊
⽀支援多種付款⽅方式
![Page 44: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/44.jpg)
使用「一址付」按鈕-9
結帳付款 - 「信用卡」
顧客可⽤用「信⽤用卡」付款
![Page 45: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/45.jpg)
使用「一址付」按鈕-10
結帳付款 - 「ATM」
顧客可⽤用「ATM」付款
![Page 46: E-commerce 金流串接實作教學 AllPay(歐付寶)](https://reader031.vdocuments.net/reader031/viewer/2022013112/5584c5dad8b42af8138b47f0/html5/thumbnails/46.jpg)
使用「一址付」按鈕-11
結帳付款 - 「海外支付」
顧客可⽤用「海外⽀支付」付款