cropped-Support-logo.png

【技術FAQ】站內付 2.0 WebJS SDK 使用範例

站內付 2.0

技術文件：

https://developers.ecpay.com.tw/?p=8972

WebJS SDK GitHub：

https://github.com/ECPay/ECPayPaymentGatewayKit_Web

以下為 WebJS SDK 最基本的作業流程範例，實務上請根據您的作業流程設計調整。

一、呼叫 GetTokenbyTrade

https://developers.ecpay.com.tw/?p=9040

Request 資料(Data 加密前)：
 
{
  MerchantID: “3002607”,
  RememberCard: 0,
  PaymentUIType: 2,
  ChoosePaymentList: “1”,
  OrderInfo: {
    MerchantTradeNo: “ECPAY1748414009600”,
    MerchantTradeDate: “2025/05/28 14:28:00”,
    TotalAmount: 83,
    ReturnURL: “https://www.ecpay.com.tw”,
    TradeDesc: “Test”,
    ItemName: “Cake”,
  },
  CardInfo: {
    OrderResultURL: “https://www.ecpay.com.tw”,
    CreditInstallment: “3”,
  },
  ATMInfo: { ExpireDate: 3 },
  CVSInfo: { StoreExpireDate: 10080, CVSCode: “CVS” },
  BarcodeInfo: { BarcodeInfo: 7 },
  ConsumerInfo: { Email: “ecpay@test.com” },
}
 

Request 資料(Data 加密後)：

{
  MerchantID: “3002607”,
  RqHeader: { Timestamp: 1748414009 },
  Data: “udqjXgM+7Q6lCrrculcvzUFnN5zv0ibax1glKFxrORpkePGqlZp2+VtkDaD9WGSHxjf+QpUWZPBbaCk6z/OImgmkCZg5oO8AJB8YTPOlB/b5/+gkfrxQ8Lciu38RbvUp1s2RAgiCbIByHhAvp+XV+2Gdbxez6yEJ/ueQFcF//druXkgZDsqq3RldQs3rQCOeE0bV//MU9yxaxK9nFJLLLIriYLE4Gvzoj04kIcheB02+bqWvgib8ulSGtPhEDKiQpXaFMK9D4R4ok5S1eFq6XdPrCK1G+RfjRClBOcSw5HWstHfnF1t9zsRkN6w2cj1acGbohsVibl1UiAR6ZJXM5L6O0HoVOs376SwzI1hWNnUGs5iFVjxMGTBk5vaKdN6TqvfpQD4fXeMiFYm9LDc9m0AKkWgLNGdqU7yN2OePXiZNit+PHNEna2Z9HsbV/P7XVku+FqPZdWNVJMenJyU5lAyKvU5tYMmNXPhBCtoKBMI7YoD6PqlaUA4lr3aFuSHUCNRdQelGIeaHwrlaoejpktBf0giGFRRVNzOPLx1fk1butUrAqcEwVbZPE/1zBGdW1YLmiUqLkXPA7D2bawCmnwIILpea6eiyp0N1zbfhG1A7UE0GKVqzJGVdDKh4YUuB3MAs3GjDw7z8ve9DjhBcRLiXmnJD8P1ZI44ZvStp7txraejtUI93Iy4U2piWXJyZkibiKTUdYt8befUCOyisxiBx2Eo+w1WEVa5RGFA3+84VF/rtLDhHEJJGbwBT2/lN+marajO/EROt3TDzhIuJ4gaAcGD9UFdNDTRCzkyE9MkyTFxzOO0hHsfQwVaNqdDOkPV9AdOAQOd8+ajU+ImKj6D1h5Ugack651cY6i3XLgWKo94ChemvB2Y5Is6XCqOTmg1wvFgB7LAqFD+jnWAdcIPLaNzksgpI7fyjkvMV7STeYAXtUPNx9EZt6lVo1MXdV0PpoeYTw969qv/TByYE3FHu2iR0IW99XF2DEoP89rQ0TJZ9IvEMOCcxQ7AZS+hRdu4L1oL1CDAuOfbkF7HTcA==”,
}

 

綠界回傳：

{
  MerchantID: “3002607”,
  RpHeader: { Timestamp: 1748414009 },
  Data: “O29c4hMFtVUU3qu5/+w0jGJUI0QIIw8PR51W4dYfKGeWHBKOtbi3mJU4ewThiqmPsKcpktZ1NhlEOiM4Nmv73Pz8XNP9Cfu7X5toMB8oTMq/2Tv+CW3ZEDpP9lhTS4fF5RSbvzCBFYL/gDLGwJ6bguBvSdpD3iCd9/Pjae7M/XHpRPllXXfE1qCLUFGEMYlJceQGaSDjvGb10+X3N/5U7wdlMPkIRKfc+sbWgXeWAExWHFVtltrS2o8TS81xFHL7gZjrTnCJGcztrUylccQaEXpOq4DRJECXqxBaTu3EESo=”,
  TransCode: 1,
  TransMsg: “Success!”,
};

 

Data 解密後：

{
  RtnCode: 1,
  RtnMsg: “”,
  PlatformID: null,
  MerchantID: “3002607”,
  Token: “8db76b1bff9848b2a5a5a5703e4bd26d”,
  TokenExpireDate: “2025/05/28+15:03:29”,
};
 
得到 Token。
 

二、將 Token 帶入 WebJS SDK

帶入 _token

三、得到付款畫面，再輸入信用卡卡號，確認付款後得到 PayToken

 

四、以 PayToken 呼叫 CreatePayment

https://developers.ecpay.com.tw/?p=9053

 

Request 資料(Data 加密前)

{

  “MerchantID”: 3002607,

  “RqHeader”: {

    “Timestamp”: 1748414102

  },

  “Data”: {

    “MerchantID”: “3002607”,

    “PayToken”: “ad1b1a0506c945e8b3dcd894a8774a26”,

    “MerchantTradeNo”: “ECPAY1748414009600”

  }

}

Request 資料(Data 加密後)

{

  “MerchantID”: 3002607,

  “RqHeader”: {

    “Timestamp”: 1748414102

  },

  “Data”: “udqjXgM+7Q6lCrrculcvzUFnN5zv0ibax1glKFxrORoCnwg2wOKvFKQSEIsVq6liJ4xLW5CzwMtJqHjLYS9m1ZoHN6mTFn3H/OLBaHx4Dea+71TyEdiSp87WJOGJ6aOaIkVi0Njudcws1Yw4q/rRBS6rNeKS7Y1H8SM/zVS4be6QPIKSTCCx+Fe2sn0dCjWGnSlN14Amb5jvp6yNZPMlrA==”

}

綠界回傳：

{

  “MerchantID”: “3002607”,

  “RpHeader”: {

    “Timestamp”: 1748414103

  },

  “Data”: “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”,

  “TransCode”: 1,

  “TransMsg”: “Success!”

}

Data 解密後：

{

  “PlatformID”: null,

  “MerchantID”: “3002607”,

  “OrderInfo”: {

    “ProcessFee”: 0,

    “MerchantTradeNo”: “ECPAY1748414009600”,

    “TradeNo”: null,

    “TradeDate”: null,

    “PaymentDate”: null,

    “TradeAmt”: 0,

    “PaymentType”: null,

    “ChargeFee”: 0,

    “TradeStatus”: null

  },

  “ThreeDInfo”: {

    “ThreeDURL”: “https://cc-stage.ecpay.com.tw/Payment/SendAuth?t=C00A5FA45CE35C134F8C75A06D8D7594”

  },

  “RqID”: “p5017ace3fa3d1d74e0f934894247f119e04”,

  “CardInfo”: {

    “AuthCode”: null,

    “Gwsr”: null,

    “ProcessDate”: null,

    “Amount”: null,

    “Stage”: null,

    “Stast”: null,

    “Staed”: null,

    “Eci”: null,

    “Card6No”: null,

    “Card4No”: null,

    “RedDan”: null,

    “RedDeAmt”: null,

    “RedOkAmt”: null,

    “RedYet”: null,

    “PeriodType”: null,

    “Frequency”: null,

    “ExecTimes”: null,

    “PeriodAmount”: null,

    “TotalSuccessTimes”: null,

    “TotalSuccessAmount”: null,

    “IssuingBank”: null,

    “IssuingBankCode”: null

  },

  “ATMInfo”: {

    “BankCode”: null,

    “vAccount”: null,

    “ExpireDate”: null

  },

  “CVSInfo”: {

    “PaymentNo”: null,

    “ExpireDate”: null,

    “PaymentURL”: null

  },

  “BarcodeInfo”: {

    “ExpireDate”: null,

    “Barcode1”: null,

    “Barcode2”: null,

    “Barcode3”: null

  },

  “ApplePayInfo”: {},

  “GooglePayInfo”: {},

  “SamsungPayInfo”: {},

  “OPayInfo”: {},

  “CustomField”: null,

  “UnionPayInfo”: {

    “UnionPayURL”: null

  },

  “CoBrandingInfo”: [],

  “RtnCode”: 1,

  “RtnMsg”: “Success!”

}

信用卡要完成  3D 驗證。

五、3D 驗證

先前的回傳資料中，有 3D 驗證網址：

“ThreeDURL”: “https://cc-stage.ecpay.com.tw/Payment/SendAuth?t=C00A5FA45CE35C134F8C75A06D8D7594”

前往網址，完成 3D 驗證，付款完成。


六、檢查訂單

至廠商管理後台檢查訂單

Copyright © Green World FinTech Service Co., Ltd. All rights reserved.

回到官網 / 綠界開發者