iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 17
1
Modern Web

用Vue實作一個LINE@聊天機器人後台系列 第 17

[Day17] LinePay串接

  • 分享至 

  • xImage
  •  

line官方有提供LinePay的測試串接帳號申請,可以用這個測試帳號的金鑰+HttpClient的Api達到模擬串接的效果
Imgur

前端

script.js

 goPay(){
      const loading = this.$loading({
        lock: true
      });
      let param = {
        "productName":this.currentData.name,
        "productImageUrl":this.currentData.src,
        "amount":this.currentData.price,
        "currency":"TWD",
        "confirmUrl":"https://aico0118.github.io/line_prod/success?id=" + this.id,
        "orderId":"0001"
      };
      let settings = {
        "async": true,
        "crossDomain": true,
        "url": "https://line.aico0118.tw/api/LineAt/LinePay/GetLinePay",
        "method": "POST",
        "headers": {
          "charset": "UTF-8",
          "x-line-channelid": "line測試商家的channelid",
          "x-line-channelsecret": "line測試商家的token",
          "content-type": "application/json",
          "cache-control": "no-cache"
        },
        "processData": false,
        "data": JSON.stringify(param)
      }
      
      $.ajax(settings).done(function (response) {
        loading.close();
        window.location = response.info.paymentUrl.web;
      });
    }

後端

LinePayController

public class LinePayController : Controller
    {
        private HttpClient _client;
        private LineAtSetting _options;

        public LinePayController(lineatContext context, IOptions<LineAtSetting> options)
        {
            _options = options.Value;
            _options.api_setting.token = context.Setting.Where(c => c.Id.Equals("shop_channel_access_token")).SingleOrDefault().Value;
            _client = new HttpClient();
            _client.DefaultRequestHeaders.Add("charset", "UTF-8");
            _client.DefaultRequestHeaders.Add("X-LINE-ChannelId", context.Setting.Where(c => c.Id.Equals("X-LINE-ChannelId")).SingleOrDefault().Value);
            _client.DefaultRequestHeaders.Add("X-LINE-ChannelSecret", context.Setting.Where(c => c.Id.Equals("X-LINE-ChannelSecret")).SingleOrDefault().Value);
            _client.DefaultRequestHeaders
                  .Accept
                  .Add(new MediaTypeWithQualityHeaderValue("application/json"));//ACCEPT header
        }
        [Route("GetLinePay")]
        [HttpPost]
        [EnableCors("_myAllowSpecificOrigins")]
        public async Task<LinePayResp> GetLinePay([FromBody]LinePayParam param)
        {
            string url = "https://sandbox-api-pay.line.me/v2/payments/request";
            LinePayResp result = new LinePayResp();

            HttpRequestMessage request = new HttpRequestMessage(HttpMethod.Post, url);
            request.Content = new StringContent(JsonConvert.SerializeObject(param),
                                                   Encoding.UTF8,
                                                   "application/json");
            await _client.SendAsync(request).ContinueWith(async response => {
                string resp = await response.Result.Content.ReadAsStringAsync();
                result = JsonConvert.DeserializeObject<LinePayResp>(resp);
            });
            return result;
        }
    }

相關的回傳類別

public partial class LinePayResp
    {

        public string returnCode { get; set; }
        public string returnMessage { get; set; }
        public Info info { get; set; }

    }
    public class Info
    {
        public Paymenturl paymentUrl { get; set; }
        public long transactionId { get; set; }
        public string paymentAccessToken { get; set; }
    }

    public class Paymenturl
    {
        public string web { get; set; }
        public string app { get; set; }
    }

上一篇
[Day16] LIFF - 實作一個代送訊息小工具
下一篇
[Day18] 圖文選單API介紹
系列文
用Vue實作一個LINE@聊天機器人後台30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言