### Utility Function to Get Environment

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateCvsOrder/WebJS.html

A helper function that converts an environment string ('STAGE' or 'PROD') into the format expected by the ECPay SDK ('Stage' or 'Prod').

```JavaScript
function getEnvi(env) {
    var result = 'STAGE';
    switch (env) {
        case 'STAGE':
            result = 'Stage';
            break;
        case 'PROD':
            result = 'Prod';
            break;
    }
    return result;
}
```

--------------------------------

### Get Initial Authentication Token

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateAtmOrder/WebJS.html

Fetches an initial authentication token and MerchantTradeNo from the server. This token is required for subsequent SDK operations. It makes a GET request to a PHP endpoint.

```JavaScript
// (1)產生廠商驗證 token 並渲染 UI
function getInitToken() {
    $.get(url + '/example/Payment/Ecpg/CreateAtmOrder/GetToken.php', function(data, status){
        let result = JSON.parse(data);
        console.log('{"Token":' + result.Token + ', "MerchantTradeNo":' + result.MerchantTradeNo + '}')
        $('#initToken').val(result.Token)
        $('#merchantTradeNo').val(result.MerchantTradeNo)
        __token = result.Token;
        initECpaySDK();
    });
}
```

--------------------------------

### Environment Configuration Helper

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateAllOrder/WebJS.html

A helper function to map environment names ('STAGE', 'PROD') to their corresponding string representations used by the ECPay SDK.

```JavaScript
function getEnvi(env) {
    var result = 'STAGE';
    switch (env) {
        case 'STAGE':
            result = 'Stage';
            break;
        case 'PROD':
            result = 'Prod';
            break;
    }
    return result;
}
```

--------------------------------

### Environment Configuration Helper

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateUnionPayOrder/WebJS.html

A helper function to map environment names ('STAGE', 'PROD') to their corresponding string representations used by the ECPay SDK.

```JavaScript
function getEnvi(env) {
    var result = 'STAGE';
    switch (env) {
        case 'STAGE':
            result = 'Stage';
            break;
        case 'PROD':
            result = 'Prod';
            break;
    }
    return result;
}
```

--------------------------------

### Get PayToken and Create Order (JavaScript)

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateApplePayOrder/WebJS.html

This code demonstrates how to obtain a PayToken from ECPay after the user has entered payment information and then use that token to create a transaction. It requires the SDK to be initialized and a valid token to be present.

```JavaScript
// (2)選擇及填寫付款資訊並送出取得 PayToken
$('#btnPayToken').on('click', function () {
    try {
        if (ECPay !== undefined && _token !== '') {
            ECPay.getPayToken(function (paymentInfo, errMsg) {
                if (errMsg != null) {
                    errHandle(errMsg);
                    return
                }
                _payToken = paymentInfo.PayToken
                createOrder()
            });
        } else {
            errHandle('請先產生初始驗證Token後再取得PayToken');
        }
    } catch (err) {
        errHandle('btnPayToken:' + err);
    }
});

// (3)建立交易
function createOrder() {
    $.post(url + '/example/Payment/Ecpg/CreateOrder.php', {
        PayToken: _payToken,
        MerchantTradeNo: $("#merchantTradeNo").val()
    }, function (response) {
        $('#ecpayResponse').text(JSON.stringify(response, null, 3))
    }, 'json');
}
```

--------------------------------

### Generate Authentication Token (JavaScript)

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateCreditOrder/WebJS.html

Fetches an authentication token and MerchantTradeNo from the server and updates the UI. This token is required for subsequent SDK operations. It makes a GET request to a PHP endpoint.

```JavaScript
// (1)產生廠商驗證 token 並渲染 UI
function getInitToken() {
    $.get(url + '/example/Payment/Ecpg/CreateCreditOrder/GetToken.php', function(data, status){
        let result = JSON.parse(data);
        console.log('{"Token":' + result.Token + ', "MerchantTradeNo":' + result.MerchantTradeNo + '}')
        $('#initToken').val(result.Token)
        $('#merchantTradeNo').val(result.MerchantTradeNo)
        _token = result.Token;
        initECpaySDK();
    });
}
```

--------------------------------

### Simulate ECPay Response Handling

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateAtmOrder/WebJS.html

Simulates receiving and displaying the ECPay payment response. This function makes a GET request to a PHP endpoint that mimics the ECPay callback.

```JavaScript
// (4)接收綠界回傳付款結果 response
function getReponse() {
    // 此路由為模擬綠界接收資訊並顯示前端，實際串接請參考 API 文件
    // (參考開發文件: https://developers.ecpay.com.tw/?p=9040)
    $.get(url + '/example/Payment/Ecpg/GetResponse.php', function(data, status) {
        $('#ecpayResponse').text(JSON.stringify(JSON.parse(data), null, 3));
    });
}
```

--------------------------------

### Simulate ECPay Response Handling

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateInstallmentOrder/WebJS.html

Simulates receiving and displaying the ECPay payment response. This function makes a GET request to a specified URL and displays the response data in a formatted JSON string.

```JavaScript
// (4)接收綠界回傳付款結果 response function getReponse() { // 此路由為模擬綠界接收資訊並顯示前端，實際串接請參考 API 文件 // (參考開發文件: https://developers.ecpay.com.tw/?p=9040) $.get(url + '/example/Payment/Ecpay/GetResponse.php', function(data, status) { $('#ecpayResponse').text(JSON.stringify(JSON.parse(data), null, 3)) }); }
```

--------------------------------

### Environment Configuration Helper

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateAtmOrder/WebJS.html

A helper function to map environment names ('STAGE', 'PROD') to their corresponding SDK string representations ('Stage', 'Prod').

```JavaScript
function getEnvi(env) {
    var result = 'STAGE';
    switch (env) {
        case 'STAGE':
            result = 'Stage';
            break;
        case 'PROD':
            result = 'Prod';
            break;
    }
    return result;
}
```

--------------------------------

### Initialize ECPay SDK with Environment and Language

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateAllOrder/WebJS.html

Initializes the ECPay SDK with a specified environment ('STAGE' or 'PROD') and language. It requires the environment to be set and then calls the `createPayment` function upon successful initialization.

```JavaScript
var environment = 'STAGE'; // 請設定要連線的環境: 測試 STAGE ,正式 PROD 
var envi = getEnvi(environment);

// 初始化 SDK 畫面
function initECpaySDK() {
    ECPay.initialize(envi, 1, function (errMsg) {
        try {
            createPayment();
        } catch (err) {
            errHandle(err);
        }
    })
}
```

--------------------------------

### Simulate ECPay Response Handling

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateUnionPayOrder/WebJS.html

This function simulates receiving and displaying a response from ECPay. It makes a GET request to a specific PHP endpoint designed to return mock ECPay data, which is then formatted and shown on the page.

```JavaScript
// (4)接收綠界回傳付款結果 response
function getReponse() {
    // 此路由為模擬綠界接收資訊並顯示前端，實際串接請參考 API 文件
    // (參考開發文件: https://developers.ecpay.com.tw/?p=9040)
    $.get(url + '/example/Payment/Ecpg/GetResponse.php', function(data, status) {
        $('#ecpayResponse').text(JSON.stringify(JSON.parse(data), null, 3))
    });
}
```

--------------------------------

### Initialize ECPay SDK and Create Payment

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateAtmOrder/WebJS.html

Initializes the ECPay SDK with the specified environment and language, then creates the payment interface. It requires an environment setting ('STAGE' or 'PROD') and an authentication token.

```JavaScript
var environment = 'STAGE'; // 請設定要連線的環境: 測試 STAGE ,正式 PROD
var envi = getEnvi(environment);
var __token = ''; // 請設定你取到的廠商驗證 token
var __payToken = ''; // 選擇付款方式並送出付款資訊的 PayToken，初始留白
var url = 'https://' + window.location.host;

// 初始化 SDK 畫面
function initECpaySDK() {
    ECPay.initialize(envi, 1, function (errMsg) {
        try {
            createPayment();
        } catch (err) {
            errHandle(err);
        }
    });
}

// 渲染付款界面 UI
function createPayment() {
    ECPay.createPayment(__token, $('#language').val(), function (errMsg) {
        if (errMsg != null) errHandle(errMsg);
    },'V2');
}
```

--------------------------------

### Initialize ECPay SDK and Create Payment (JavaScript)

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateApplePayOrder/WebJS.html

This snippet shows how to initialize the ECPay SDK with a given environment and language, and then create a payment interface. It relies on the ECPay library and requires a valid token.

```JavaScript
var environment = 'STAGE'; // 請設定要連線的環境: 測試 STAGE ,正式 PROD 
var envi = getEnvi(environment);
var _token = ''; // 請設定你取到的廠商驗證 token
var _payToken = ''; // 選擇付款方式並送出付款資訊的 PayToken，初始留白
var url = 'https://' + window.location.host; // 模擬流程:
// (1)產生廠商驗證 token 並渲染 UI
// (2)選擇及填寫付款資訊並送出取得 PayToken
// (3)建立交易
// (4)接收 ApplePay 回傳付款結果 response
$(function () {
    getInitToken()
})

// (1)產生廠商驗證 token 並渲染 UI
function getInitToken() {
    $.get(url + '/example/Payment/Ecpg/CreateApplePayOrder/GetToken.php', function (data, status) {
        let result = JSON.parse(data);
        console.log('{"Token":' + result.Token + ', "MerchantTradeNo":' + result.MerchantTradeNo + '}')
        $('#initToken').val(result.Token)
        $('#merchantTradeNo').val(result.MerchantTradeNo)
        _token = result.Token;
        initECpaySDK();
    });
}

// 初始化 SDK 畫面
function initECpaySDK() {
    ECPay.initialize(envi, 1, function (errMsg) {
        try {
            createPayment();
        } catch (err) {
            errHandle('initECpaySDK:' + err);
        }
    })
}

// 切換 SDK 語系
$('#language').on('change', function () {
    try {
        if (ECPay !== undefined && _token !== '') {
            createPayment();
        }
    } catch (err) {
        errHandle(err);
    }
});

// 渲染付款界面 UI
function createPayment() {
    ECPay.createPayment(_token, $('#language').val(), function (errMsg) {
        if (errMsg != null)
            errHandle('createPayment:' + errMsg);
    }, 'V2');
}
```

--------------------------------

### Simulate ECPay Response (JavaScript)

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateCreditOrder/WebJS.html

Fetches and displays a simulated ECPay response from a server endpoint. This is useful for testing the response handling logic without actual payment interactions. It makes a GET request to a PHP endpoint.

```JavaScript
// (4)接收綠界回傳付款結果 response
function getReponse() {
    // 此路由為模擬綠界接收資訊並顯示前端，實際串接請參考 API 文件
    // (參考開發文件: https://developers.ecpay.com.tw/?p=9040)
    $.get(url + '/example/Payment/Ecpg/GetResponse.php', function(data, status) {
        $('#ecpayResponse').text(JSON.stringify(JSON.parse(data), null, 3))
    });
}
```

--------------------------------

### Get Payment Token

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateAllOrder/WebJS.html

Retrieves a `PayToken` from ECPay after the user has selected and submitted their payment information. This token is essential for creating a transaction. The function checks if the SDK is initialized and a token is available before proceeding.

```JavaScript
$('#btnPayToken').on('click', function () {
    try {
        if (ECPay !== undefined && _token !== '') {
            ECPay.getPayToken(function (paymentInfo, errMsg) {
                if (errMsg != null) {
                    errHandle(errMsg);
                    return
                }
                _payToken = paymentInfo.PayToken;
                $("#payToken").val(_payToken);
            });
        } else {
            errHandle('請先產生初始驗證Token後再取得PayToken');
        }
    } catch (err) {
        errHandle(err);
    }
});
```

--------------------------------

### Initialize ECPay SDK and Create Payment (JavaScript)

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateCreditOrder/WebJS.html

Initializes the ECPay SDK with the specified environment and language, then creates the payment interface. It requires an authentication token and handles potential errors during initialization and payment creation.

```JavaScript
var environment = 'STAGE'; // 請設定要連線的環境: 測試 STAGE ,正式 PROD
var envi = getEnvi(environment);
var _token = ''; // 請設定你取到的廠商驗證 token
var _payToken = ''; // 選擇付款方式並送出付款資訊的 PayToken，初始留白
var url = 'https://' + window.location.host;

// 初始化 SDK 畫面
function initECpaySDK() {
    ECPay.initialize(envi, 1, function (errMsg) {
        try {
            createPayment();
        } catch (err) {
            errHandle(err);
        }
    })
}

// 渲染付款界面 UI
function createPayment() {
    ECPay.createPayment(_token, $('#language').val(), function (errMsg) {
        if (errMsg != null)
            errHandle(errMsg);
    },'V2');
}
```

--------------------------------

### Create Transaction

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateAllOrder/WebJS.html

Submits a transaction request to ECPay using the obtained `PayToken` and `MerchantTradeNo`. The response from the transaction creation is then displayed.

```JavaScript
$('#btnPay').on('click', function () {
    $.post(url + '/example/Payment/Ecpg/CreateOrder.php', {
        PayToken: $("#payToken").val(),
        MerchantTradeNo: $("#merchantTradeNo").val()
    }, function(response) {
        $('#ecpayResponse').text(JSON.stringify(response, null, 3))
    }, 'json');
})
```

--------------------------------

### Get PayToken for Payment

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateCvsOrder/WebJS.html

This code snippet handles the click event for a button to obtain a PayToken. It checks if the ECPay SDK is initialized and if a token is available, then calls ECPay.getPayToken() to retrieve the payment token. Errors during this process are handled by errHandle.

```JavaScript
$('#btnPayToken').on('click', function () {
    try {
        if (ECPay !== undefined && _token !== '') {
            ECPay.getPayToken(function (paymentInfo, errMsg) {
                if (errMsg != null) {
                    errHandle(errMsg);
                    return
                }
                _payToken = paymentInfo.PayToken;
                $("#payToken").val(_payToken);
            });
        } else {
            errHandle('請先產生初始驗證Token後再取得PayToken');
        }
    } catch (err) {
        errHandle(err);
    }
});
```

--------------------------------

### Get Bind Card Pay Token (JavaScript)

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateBindCardOrder/WebJS.html

This function is triggered when the 'Get Bind Card Pay Token' button is clicked. It uses the ECPay SDK to retrieve a payment token for binding a credit card and displays it. Error handling is included for cases where the initial token is not yet available.

```JavaScript
$('#btnBindCardPayToken').on('click', function () {
    try {
        if (ECPay !== undefined && _token !== '') {
            ECPay.getBindCardPayToken(function (bindCardPayToken, errMsg) {
                if (errMsg != null) {
                    errHandle(errMsg);
                    return
                }
                _bindCardPayToken = bindCardPayToken.BindCardPayToken;
                $("#bindCardPayToken").val(_bindCardPayToken);
                $('#err').empty();
            });
        } else {
            errHandle('請先產生初始廠商驗證碼 Token 後再取得 BindCardPayToken');
        }
    } catch (err) {
        errHandle(err);
    }
});
```

--------------------------------

### Initialize ECPay SDK and Create Payment Interface

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateBarcodeOrder/WebJS.html

This snippet demonstrates how to initialize the ECPay SDK with a specified environment and language, and then create the payment interface. It requires an initial authentication token and handles potential errors during initialization and payment creation.

```JavaScript
var environment = 'STAGE'; // 請設定要連線的環境: 測試 STAGE ,正式 PROD 
var envi = getEnvi(environment);
var _token = ''; // 請設定你取到的廠商驗證 token
var _payToken = ''; // 選擇付款方式並送出付款資訊的 PayToken，初始留白
var url = 'https://' + window.location.host;

// (1)產生廠商驗證 token 並渲染 UI
function getInitToken() {
    $.get(url + '/example/Payment/Ecpg/CreateBarcodeOrder/GetToken.php', function(data, status){
        let result = JSON.parse(data);
        console.log('{"Token":' + result.Token + ', "MerchantTradeNo":' + result.MerchantTradeNo + '}')
        $('#initToken').val(result.Token)
        $('#merchantTradeNo').val(result.MerchantTradeNo)
        _token = result.Token;
        initECpaySDK();
    });
}

// 初始化 SDK 畫面
function initECpaySDK() {
    ECPay.initialize(envi, 1, function (errMsg) {
        try {
            createPayment();
        } catch (err) {
            errHandle(err);
        }
    })
}

// 切換 SDK 語系
$('#language').on('change', function () {
    try {
        if (ECPay !== undefined && _token !== '') {
            createPayment();
        }
    } catch (err) {
        errHandle(err);
    }
});

// 渲染付款界面 UI
function createPayment() {
    ECPay.createPayment(_token, $('#language').val(), function (errMsg) {
        if (errMsg != null) errHandle(errMsg);
    },'V2');
}

$(function () {
    getInitToken()
})
```

--------------------------------

### Environment and Error Handling Utilities

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateInstallmentOrder/WebJS.html

Provides utility functions to determine the ECPay connection environment (STAGE or PROD) and to handle and display errors encountered during the SDK operations.

```JavaScript
function getEnvi(env) { var result = 'STAGE'; switch (env) { case 'STAGE': result = 'Stage'; break; case 'PROD': result = 'Prod'; break; } return result; }
function errHandle(strErr) { $('#err').empty(); if (strErr != null) { $('#err').append('<div style="text-align: center;"><label style="color: red;">' + strErr + '</label></div>'); } else { $('#err').append('<div style="text-align: center;"><label style="color: red;">Token取得失敗</label></div>'); } }
```

--------------------------------

### Environment Configuration (JavaScript)

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateBindCardOrder/WebJS.html

A helper function to determine the correct ECPay environment string ('Stage' or 'Prod') based on the input environment variable.

```JavaScript
function getEnvi(env) {
    var result = 'STAGE';
    switch (env) {
        case 'STAGE':
            result = 'Stage';
            break;
        case 'PROD':
            result = 'Prod';
            break;
    }
    return result;
}
```

--------------------------------

### Simulate ECPay Response Handling

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateCvsOrder/WebJS.html

This function simulates receiving a response from ECPay. It makes a GET request to a PHP endpoint that mimics ECPay's callback and displays the received data in a formatted JSON structure. This is for demonstration purposes, and actual integration should follow ECPay's API documentation.

```JavaScript
// (4)接收綠界回傳付款結果 response
function getReponse() {
    // 此路由為模擬綠界接收資訊並顯示前端，實際串接請參考 API 文件
    // (參考開發文件: https://developers.ecpay.com.tw/?p=9040)
    $.get(url + '/example/Payment/Ecpg/GetResponse.php', function(data, status) {
        $('#ecpayResponse').text(JSON.stringify(JSON.parse(data), null, 3))
    });
}
```

--------------------------------

### ECPay Environment Configuration

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateBarcodeOrder/WebJS.html

This utility function converts an environment string ('STAGE' or 'PROD') into the format expected by the ECPay SDK ('Stage' or 'Prod').

```JavaScript
function getEnvi(env) {
    var result = 'STAGE';
    switch (env) {
        case 'STAGE':
            result = 'Stage';
            break;
        case 'PROD':
            result = 'Prod';
            break;
    }
    return result;
}
```

--------------------------------

### Get PayToken for Payment

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateUnionPayOrder/WebJS.html

This code snippet handles the click event for a button to obtain a PayToken. It uses the ECPay SDK's getPayToken method, which requires a valid authentication token. The retrieved PayToken is then displayed.

```JavaScript
$('#btnPayToken').on('click', function () {
    try {
        if (ECPay !== undefined && _token !== '') {
            ECPay.getPayToken(function (paymentInfo, errMsg) {
                if (errMsg != null) {
                    errHandle(errMsg);
                    return
                }
                _payToken = paymentInfo.PayToken;
                $("#payToken").val(_payToken);
            });
        } else {
            errHandle('請先產生初始驗證Token後再取得PayToken');
        }
    } catch (err) {
        errHandle(err);
    }
});
```

--------------------------------

### Get Initial Authentication Token and Merchant Trade Number

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateAllOrder/WebJS.html

Fetches an initial authentication token and a Merchant Trade Number from the ECPay server. This token is necessary for subsequent operations like creating payments. The retrieved token and trade number are then displayed and stored in global variables.

```JavaScript
function getInitToken() {
    $.get(url + '/example/Payment/Ecpg/CreateAllOrder/GetToken.php', function(data, status){
        let result = JSON.parse(data);
        console.log('{"Token":' + result.Token + ', "MerchantTradeNo":' + result.MerchantTradeNo + '}')
        $('#initToken').val(result.Token)
        $('#merchantTradeNo').val(result.MerchantTradeNo)
        _token = result.Token;
        initECpaySDK();
    });
}
```

--------------------------------

### Render Payment Interface UI

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateAllOrder/WebJS.html

Renders the ECPay payment interface UI using the provided token and selected language. It handles potential errors during the UI creation process.

```JavaScript
function createPayment() {
    ECPay.createPayment(_token, $('#language').val(), function (errMsg) {
        if (errMsg != null) errHandle(errMsg);
    },'V2');
}
```

--------------------------------

### Initialize ECPay SDK and Create Payment Interface

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateInstallmentOrder/WebJS.html

Initializes the ECPay SDK with the specified environment and language, then creates the payment interface. It requires an authentication token and handles potential errors during initialization and payment creation.

```JavaScript
var environment = 'STAGE'; // 請設定要連線的環境: 測試 STAGE ,正式 PROD var envi = getEnvi(environment); var _token = ''; // 請設定你取到的廠商驗證 token var _payToken = ''; // 選擇付款方式並送出付款資訊的 PayToken，初始留白 var url = 'https://' + window.location.host; // (1)產生廠商驗證 token 並渲染 UI function getInitToken() { $.get(url + '/example/Payment/Ecpay/CreateInstallmentOrder/GetToken.php', function(data, status){ let result = JSON.parse(data); console.log('{"Token":' + result.Token + ', "MerchantTradeNo":' + result.MerchantTradeNo + '}') $('#initToken').val(result.Token) $('#merchantTradeNo').val(result.MerchantTradeNo) _token = result.Token; initECpaySDK(); }); }
// 初始化 SDK 畫面 function initECpaySDK() { ECPay.initialize(envi, 1, function (errMsg) { try { createPayment(); } catch (err) { errHandle(err); } })
}
// 切換 SDK 語系 $('#language').on('change', function () { try { if (ECPay !== undefined && _token !== '') { createPayment(); } } catch (err) { errHandle(err); } });
// 渲染付款界面 UI function createPayment() { ECPay.createPayment(_token, $('#language').val(), function (errMsg) { if (errMsg != null) errHandle(errMsg); },'V2'); }
```

--------------------------------

### Get PayToken for Payment

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateAtmOrder/WebJS.html

Retrieves a PayToken after the user has selected and submitted payment information. This token is essential for creating a transaction. It uses the ECPay SDK's getPayToken method.

```JavaScript
// (2)選擇及填寫付款資訊並送出取得 PayToken
$('#btnPayToken').on('click', function () {
    try {
        if (ECPay !== undefined && __token !== '') {
            ECPay.getPayToken(function (paymentInfo, errMsg) {
                if (errMsg != null) {
                    errHandle(errMsg);
                    return
                }
                __payToken = paymentInfo.PayToken;
                $("#payToken").val(__payToken);
            });
        } else {
            errHandle('請先產生初始驗證Token後再取得PayToken');
        }
    } catch (err) {
        errHandle(err);
    }
});
```

--------------------------------

### Initialize ECPay SDK and Create Payment Interface

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateUnionPayOrder/WebJS.html

This snippet demonstrates how to initialize the ECPay SDK with a specified environment and language, and then create the payment interface. It relies on the ECPay SDK library and requires an authentication token.

```JavaScript
var environment = 'STAGE'; // 請設定要連線的環境: 測試 STAGE ,正式 PROD 
var envi = getEnvi(environment);
var _token = ''; // 請設定你取到的廠商驗證 token
var _payToken = ''; // 選擇付款方式並送出付款資訊的 PayToken，初始留白
var url = 'https://' + window.location.host;

// 初始化 SDK 畫面
function initECpaySDK() {
    ECPay.initialize(envi, 1, function (errMsg) {
        try {
            createPayment();
        } catch (err) {
            errHandle(err);
        }
    })
}

// 渲染付款界面 UI
function createPayment() {
    ECPay.createPayment(_token, $('#language').val(), function (errMsg) {
        if (errMsg != null) errHandle(errMsg);
    },'V2');
}
```

--------------------------------

### Get PayToken from ECPay

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateBarcodeOrder/WebJS.html

This JavaScript function retrieves a PayToken from ECPay after the user has selected and submitted their payment information. It requires a valid authentication token and handles potential errors during the process.

```JavaScript
$('#btnPayToken').on('click', function () {
    try {
        if (ECPay !== undefined && _token !== '') {
            ECPay.getPayToken(function (paymentInfo, errMsg) {
                if (errMsg != null) {
                    errHandle(errMsg);
                    return
                }
                _payToken = paymentInfo.PayToken;
                $("#payToken").val(_payToken);
            });
        } else {
            errHandle('請先產生初始驗證Token後再取得PayToken');
        }
    } catch (err) {
        errHandle(err);
    }
});
```

--------------------------------

### Handle Environment Configuration (JavaScript)

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateCreditOrder/WebJS.html

A utility function to map environment names ('STAGE', 'PROD') to their corresponding string representations used by the ECPay SDK. This ensures the SDK connects to the correct ECPay environment.

```JavaScript
function getEnvi(env) {
    var result = 'STAGE';
    switch (env) {
        case 'STAGE':
            result = 'Stage';
            break;
        case 'PROD':
            result = 'Prod';
            break;
    }
    return result;
}
```

--------------------------------

### Utility Functions for ECPay Integration (JavaScript)

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateApplePayOrder/WebJS.html

Provides utility functions for managing ECPay integration, including converting environment strings and handling error messages displayed to the user.

```JavaScript
function getEnvi(env) {
    var result = 'STAGE';
    switch (env) {
        case 'STAGE':
            result = 'Stage';
            break;
        case 'PROD':
            result = 'Prod';
            break;
    }
    return result;
}

function errHandle(strErr) {
    $('#err').empty();
    if (strErr != null) {
        $('#err').append('<div style="text-align: center;"><label style="color: red;">' + strErr + '</label></div>');
    }
}
```

--------------------------------

### Get PayToken for Payment

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateInstallmentOrder/WebJS.html

Retrieves the PayToken from ECPay after the user selects and submits payment information. This function requires a valid authentication token and handles potential errors during the PayToken retrieval process.

```JavaScript

```

--------------------------------

### Get PayToken (JavaScript)

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateCreditOrder/WebJS.html

Retrieves a PayToken after the user has selected and submitted payment information. This token is essential for creating a transaction. It uses the ECPay SDK's getPayToken method and handles potential errors.

```JavaScript
// (2)選擇及填寫付款資訊並送出取得 PayToken
$('#btnPayToken').on('click', function () {
    try {
        if (ECPay !== undefined && _token !== '') {
            ECPay.getPayToken(function (paymentInfo, errMsg) {
                if (errMsg != null) {
                    errHandle(errMsg);
                    return
                }
                _payToken = paymentInfo.PayToken;
                $("#payToken").val(_payToken);
            });
        } else {
            errHandle('請先產生初始驗證Token後再取得PayToken');
        }
    } catch (err) {
        errHandle(err);
    }
});
```

--------------------------------

### Generate Authentication Token and Merchant Trade Number

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateUnionPayOrder/WebJS.html

This function retrieves an authentication token and a merchant trade number from the server. It makes a GET request to a PHP endpoint and parses the JSON response to populate input fields and store the token.

```JavaScript
// (1)產生廠商驗證 token 並渲染 UI
function getInitToken() {
    $.get(url + '/example/Payment/Ecpg/CreateUnionPayOrder/GetToken.php', function(data, status){
        let result = JSON.parse(data);
        console.log('{"Token":' + result.Token + ', "MerchantTradeNo":' + result.MerchantTradeNo + '}')
        $('#initToken').val(result.Token)
        $('#merchantTradeNo').val(result.MerchantTradeNo)
        _token = result.Token;
        initECpaySDK();
    });
}
```

--------------------------------

### Initialize ECPay SDK and Create Payment Interface

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateCvsOrder/WebJS.html

This snippet shows how to initialize the ECPay SDK with a specified environment and language, then create the payment interface. It requires an authentication token and handles potential errors during initialization and payment creation.

```JavaScript
var environment = 'STAGE'; // 請設定要連線的環境: 測試 STAGE ,正式 PROD 
var envi = getEnvi(environment);
var _token = ''; // 請設定你取到的廠商驗證 token
var _payToken = ''; // 選擇付款方式並送出付款資訊的 PayToken，初始留白
var url = 'https://' + window.location.host;

// 初始化 SDK 畫面
function initECpaySDK() {
    ECPay.initialize(envi, 1, function (errMsg) {
        try {
            createPayment();
        } catch (err) {
            errHandle(err);
        }
    });
}

// 渲染付款界面 UI
function createPayment() {
    ECPay.createPayment(_token, $('#language').val(), function (errMsg) {
        if (errMsg != null)
            errHandle(errMsg);
    },'V2');
}
```

--------------------------------

### Initialize ECPay SDK and Bind Card (JavaScript)

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateBindCardOrder/WebJS.html

This snippet initializes the ECPay SDK with the provided environment and vendor token, then proceeds to add the credit card binding interface. It handles potential errors during initialization and binding.

```JavaScript
var environment = 'STAGE'; // 請設定要連線的環境: 測試 STAGE ,正式 PROD
var envi = getEnvi(environment);
var _token = ''; // 請設定你取到的廠商驗證碼 Token
var _bindCardPayToken = ''; // 綁定信用卡代碼，初始留白
var _threeDURL = '';
var url = 'https://' + window.location.host;

// (1)取得廠商驗證碼 Token 並渲染 UI
function getInitToken() {
    $.get(url + '/example/Payment/Ecpg/GetTokenbyBindingCard.php', function(data, status){
        let result = JSON.parse(data);
        $('#merchantTradeNo').val(result.MerchantTradeNo)
        $('#initToken').val(result.Token)
        _token = result.Token;
        initECpaySDK();
    });
}

// 初始化 SDK
function initECpaySDK() {
    ECPay.initialize(envi, 1, function (errMsg) {
        try {
            // 取得綁定信用卡畫面
            addBindingCard();
        } catch (err) {
            errHandle(err);
        }
    })
}

// 取得綁定信用卡畫面
function addBindingCard() {
    ECPay.addBindingCard(_token, $('#language').val(), function (errMsg) {
        if (errMsg != null) errHandle(errMsg);
    });
}

$(function () {
    getInitToken()
});
```

--------------------------------

### Create Transaction with PayToken

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateInstallmentOrder/WebJS.html

Creates a transaction with ECPay using the obtained PayToken and MerchantTradeNo. This function sends a POST request to the server and displays the response.

```JavaScript
// (3)建立交易 $('#btnPay').on('click', function () { $.post(url + '/example/Payment/Ecpay/CreateOrder.php', { PayToken: "$"#payToken).val(), MerchantTradeNo: "$"#merchantTradeNo).val() }, function(response) { $('#ecpayResponse').text(JSON.stringify(response, null, 3)) }, 'json'); })
```

--------------------------------

### Generate Authentication Token and Merchant Trade Number

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateCvsOrder/WebJS.html

This function retrieves an authentication token and a merchant trade number from the server. It uses an AJAX GET request to a PHP endpoint and parses the JSON response to populate input fields and store the token for subsequent operations.

```JavaScript
// (1)產生廠商驗證 token 並渲染 UI
function getInitToken() {
    $.get(url + '/example/Payment/Ecpg/CreateCvsOrder/GetToken.php', function(data, status){
        let result = JSON.parse(data);
        console.log('{"Token":' + result.Token + ', "MerchantTradeNo":' + result.MerchantTradeNo + '}')
        $('#initToken').val(result.Token)
        $('#merchantTradeNo').val(result.MerchantTradeNo)
        _token = result.Token;
        initECpaySDK();
    });
}
```

--------------------------------

### ECPay SDK Initialization and Language Change Handler

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateCvsOrder/WebJS.html

This snippet demonstrates the initialization of the ECPay SDK and includes an event handler for changing the SDK's language. When the language selection changes, it attempts to re-create the payment interface if the SDK and token are available.

```JavaScript
// 切換 SDK 語系
$('#language').on('change', function () {
    try {
        if (ECPay !== undefined && _token !== '') {
            createPayment();
        }
    } catch (err) {
        errHandle(err);
    }
});
```

--------------------------------

### Create ECPay Transaction

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateBarcodeOrder/WebJS.html

This snippet shows how to create a transaction with ECPay by sending the PayToken and MerchantTradeNo to a server-side endpoint. It uses a POST request and expects a JSON response.

```JavaScript
$('#btnPay').on('click', function () {
    $.post(url + '/example/Payment/Ecpg/CreateOrder.php', {
        PayToken: $("#payToken").val(),
        MerchantTradeNo: $("#merchantTradeNo").val()
    }, function(response) {
        $('#ecpayResponse').text(JSON.stringify(response, null, 3))
    }, 'json');
})
```

--------------------------------

### Language Change Listener

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateUnionPayOrder/WebJS.html

This code sets up an event listener for a language selection dropdown. When the language changes, it attempts to re-create the payment interface using the ECPay SDK if the SDK and token are available.

```JavaScript
$('#language').on('change', function () {
    try {
        if (ECPay !== undefined && _token !== '') {
            createPayment();
        }
    } catch (err) {
        errHandle(err);
    }
});
```

--------------------------------

### Create Transaction with PayToken

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateAtmOrder/WebJS.html

Creates a transaction using the obtained PayToken and MerchantTradeNo. This involves sending a POST request to a server-side PHP script.

```JavaScript
// (3)建立交易
$('#btnPay').on('click', function () {
    $.post(url + '/example/Payment/Ecpg/CreateOrder.php', {
        PayToken: $("#payToken").val(),
        MerchantTradeNo: $("#merchantTradeNo").val()
    }, function(response) {
        $('#ecpayResponse').text(JSON.stringify(response, null, 3))
    }, 'json');
})
```

--------------------------------

### Error Handling Function

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateAllOrder/WebJS.html

A utility function to display error messages to the user. It clears previous errors and appends a new error message with a red label.

```JavaScript
function errHandle(strErr) {
    $('#err').empty();
    if (strErr != null) {
        $('#err').append('<div style="text-align: center;"><label style="color: red;">' + strErr + '</label></div>');
    } else {
        $('#err').append('<div style="text-align: center;"><label style="color: red;">Token取得失敗</label></div>');
    }
}
```

--------------------------------

### Create Transaction (JavaScript)

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateCreditOrder/WebJS.html

Submits a transaction to ECPay using the obtained PayToken and MerchantTradeNo. This function makes a POST request to a server-side PHP script to process the transaction and displays the response.

```JavaScript
// (3)建立交易
$('#btnPay').on('click', function () {
    $.post(url + '/example/Payment/Ecpg/CreateOrder.php', {
        PayToken: $("#payToken").val(),
        MerchantTradeNo: $("#merchantTradeNo").val()
    }, function(response) {
        $('#ecpayResponse').text(JSON.stringify(response, null, 3))
    }, 'json');
})
```

--------------------------------

### Error Handling Function

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateUnionPayOrder/WebJS.html

A utility function to display error messages on the page. It clears previous errors and appends a new error message, styling it in red.

```JavaScript
function errHandle(strErr) {
    $('#err').empty();
    if (strErr != null) {
        $('#err').append('<div style="text-align: center;"><label style="color: red;">' + strErr + '</label></div>');
    } else {
        $('#err').append('<div style="text-align: center;"><label style="color: red;">Token取得失敗</label></div>');
    }
}
```

--------------------------------

### Create Transaction with ECPay

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateCvsOrder/WebJS.html

This function is triggered when a 'Create Transaction' button is clicked. It sends a POST request to a PHP endpoint with the PayToken and MerchantTradeNo to create a transaction. The response from ECPay is then displayed.

```JavaScript
$('#btnPay').on('click', function () {
    $.post(url + '/example/Payment/Ecpg/CreateOrder.php', {
        PayToken: $("#payToken").val(),
        MerchantTradeNo: $("#merchantTradeNo").val()
    }, function(response) {
        $('#ecpayResponse').text(JSON.stringify(response, null, 3))
    }, 'json');
})
```

--------------------------------

### Create Transaction with PayToken

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateUnionPayOrder/WebJS.html

This function is triggered when a 'Pay' button is clicked. It sends a POST request to a server-side PHP script with the PayToken and MerchantTradeNo to create a transaction. The response from the server is then displayed.

```JavaScript
$('#btnPay').on('click', function () {
    $.post(url + '/example/Payment/Ecpg/CreateOrder.php', {
        PayToken: $("#payToken").val(),
        MerchantTradeNo: $("#merchantTradeNo").val()
    }, function(response) {
        $('#ecpayResponse').text(JSON.stringify(response, null, 3))
    }, 'json');
})
```

--------------------------------

### Switch SDK Language

Source: https://github.com/ecpay/sdk_php/blob/master/example/Payment/Ecpg/CreateAllOrder/WebJS.html

Allows the user to switch the language of the ECPay payment interface. This function is triggered by a change event on a language selection element and calls `createPayment` to update the interface with the new language.

```JavaScript
$('#language').on('change', function () {
    try {
        if (ECPay !== undefined && _token !== '') {
            createPayment();
        }
    } catch (err) {
        errHandle(err);
    }
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.