Merge pull request #19 from omarxp/3ds-new-flow

sample app - add note and warning message

Author: rizdaprasetya

.gitignore

@@ -7,3 +7,5 @@ dist/
 build/
 push_to_twine.sh
 ./Pipfile
+env/
+.DS_STORE

examples/core_api/core_api_credit_card_example.py

@@ -1,5 +1,8 @@
 import midtransclient
-# initialize core api client object
+# This is just for very basic implementation reference, in production, you should validate the incoming requests and implement your backend more securely.
+
+# Initialize core api client object
+# You can find it in Merchant Portal -> Settings -> Access keys
 core = midtransclient.CoreApi(
     is_production=False,
     server_key='YOUR_SERVER_KEY',
@@ -20,10 +23,13 @@
 # core.api_config.server_key='YOUR_SERVER_KEY'
 # core.api_config.client_key='YOUR_CLIENT_KEY'
 
-# IMPORTANT NOTE: You should do credit card get token via frontend using `midtrans.min.js`, to avoid card data breach risks on your backend
-# ( refer to: https://api-docs.midtrans.com )
+# IMPORTANT NOTE: You should do credit card get token via frontend using `midtrans-new-3ds.min.js`, to avoid card data breach risks on your backend
+# ( refer to: https://docs.midtrans.com/en/core-api/credit-card?id=_1-getting-the-card-token )
+# For full example on Credit Card 3DS transaction refer to:
+# (/examples/flask_app) that implement Snap & Core Api
 
 # prepare CORE API parameter to get credit card token
+# another sample of card number can refer to https://docs.midtrans.com/en/technical-reference/sandbox-test?id=card-payments
 params = {
     'card_number': '5264 2210 3887 4659',
     'card_exp_month': '12',
@@ -34,7 +40,7 @@
 card_token_response = core.card_token(params)
 cc_token = card_token_response['token_id']
 
-# prepare CORE API parameter to charge credit card ( refer to: https://api-docs.midtrans.com )
+# prepare CORE API parameter to charge credit card ( refer to: https://docs.midtrans.com/en/core-api/credit-card?id=_2-sending-transaction-data-to-charge-api )
 param = {
     "payment_type": "credit_card",
     "transaction_details": {

examples/core_api/core_api_simple_example.py

@@ -1,12 +1,15 @@
 import midtransclient
-# initialize core api client object
+# This is just for very basic implementation reference, in production, you should validate the incoming requests and implement your backend more securely.
+
+# Initialize core api client object
+# You can find it in Merchant Portal -> Settings -> Access keys
 core = midtransclient.CoreApi(
     is_production=False,
     server_key='YOUR_SERVER_KEY',
     client_key='YOUR_CLIENT_KEY'
 )
 
-# prepare CORE API parameter ( refer to: https://api-docs.midtrans.com ) charge bank_transfer parameter example
+# prepare CORE API parameter ( refer to: https://docs.midtrans.com/en/core-api/bank-transfer?id=sample-request-and-request-body ) charge bank_transfer parameter example
 param = {
     "payment_type": "bank_transfer",
     "transaction_details": {

examples/flask_app/templates/index.html

@@ -11,7 +11,7 @@ <h4>Advanced usage:</h4>
         <ul>
             <li><a href="/simple_core_api_checkout">/simple_core_api_checkout</a> via Core Api - Credit Card</li>
             <li><a href="/simple_core_api_checkout_permata">/simple_core_api_checkout_permata</a> via Core Api - Permata VA</li>
-            <li><a href="/core_api_credit_card_frontend_sample">/core_api_credit_card_frontend_sample</a> Core Api - Credit Card to demonstrate how Midtrans.min.js will be used</li>
+            <li><a href="/core_api_credit_card_frontend_sample">/core_api_credit_card_frontend_sample</a> Core Api - Credit Card to demonstrate how midtrans-new-3ds.min.js will be used</li>
         </ul>
     </body>
 </html>

examples/flask_app/templates/simple_core_api_checkout.html

@@ -61,7 +61,7 @@ <h1>Checkout</h1>
   </code>
 
   <hr>
-  <small>Check `app.js` file, section `Using Core API - Credit Card` for the backend implementation</small>
+  <small>Check `web.py` file, section `Using Core API - Credit Card` for the backend implementation</small>
 
   <!-- Import MidtransNew3ds library -->
   <!-- TODO change data-environment to `production` for Production mode -->
@@ -91,7 +91,7 @@ <h1>Checkout</h1>
         onSuccess: function(response){
           // success to get card token
           // [2] Send AJAX to let backend charge the card using the card token_id
-          // Check backend implementation on `app.js` file, section `[2]`
+          // Check backend implementation on `web.py` file, section `[2]`
           fetch("/charge_core_api_ajax", {
             method : "POST",
             body: JSON.stringify({ 
@@ -147,7 +147,7 @@ <h1>Checkout</h1>
 
         if (responseObj.transaction_id){
           // [4] Inform the result to backend update DB status and verify to Midtrans
-          // Check backend implementation on `app.js` file, section `[4]`
+          // Check backend implementation on `web.py` file, section `[4]`
           fetch('/check_transaction_status', {
             method : "POST",
             body: JSON.stringify({ "transaction_id" : responseObj.transaction_id }),

examples/flask_app/templates/simple_core_api_checkout_permata.html

@@ -13,7 +13,7 @@ <h3>Permata VA Transaction Created</h3>
       <b>Order ID:</b> <br>
       <code> {{ order_id }}</code> <br>
       <br><hr>
-      <small>Check `app.js` file, section `/simple_core_api_checkout_permata` for the backend implementation</small>
+      <small>Check `web.py` file, section `/simple_core_api_checkout_permata` for the backend implementation</small>
     </div>
    </body>
 </html>

examples/flask_app/web.py

@@ -1,9 +1,16 @@
+# This is just for very basic implementation reference, in production, you should validate the incoming requests and implement your backend more securely.
+
 import datetime
 import json
+import os
 from flask import Flask, render_template, request, jsonify
-
 from midtransclient import Snap, CoreApi
 
+# Set Your server key
+# You can find it in Merchant Portal -> Settings -> Access keys
+SERVER_KEY = 'SB-Mid-server-GwUP_WGbJPXsDzsNEBRs8IYA'
+CLIENT_KEY = 'SB-Mid-client-61XuGAwQ8Bj8LxSS'
+
 app = Flask(__name__)
 
 #==============#
@@ -15,8 +22,8 @@
 def simple_checkout():
     snap = Snap(
         is_production=False,
-        server_key='SB-Mid-server-GwUP_WGbJPXsDzsNEBRs8IYA',
-        client_key='SB-Mid-client-61XuGAwQ8Bj8LxSS',
+        server_key=SERVER_KEY,
+        client_key=CLIENT_KEY
     )
     timestamp = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")
     transaction_token = snap.create_transaction_token({
@@ -27,20 +34,20 @@ def simple_checkout():
             "secure" : True
         }
     })
+    
     return render_template('simple_checkout.html', 
         token = transaction_token, 
         client_key = snap.api_config.client_key)
 
-
 #==============#
 # Using Core API - Credit Card
 #==============#
 
 # [0] Setup API client and config
 core = CoreApi(
     is_production=False,
-    server_key='SB-Mid-server-GwUP_WGbJPXsDzsNEBRs8IYA',
-    client_key='SB-Mid-client-61XuGAwQ8Bj8LxSS',
+    server_key=SERVER_KEY,
+    client_key=CLIENT_KEY
 )
 # [1] Render HTML+JS web page to get card token_id and [3] 3DS authentication
 @app.route('/simple_core_api_checkout')
@@ -171,12 +178,27 @@ def simple_core_api_checkout_permata():
 # Homepage of this web app
 @app.route('/')
 def index():
+    if not SERVER_KEY or not CLIENT_KEY:
+        # non-relevant function only used for demo/example purpose
+        return printExampleWarningMessage()
+
     return render_template('index.html')
+
 # credit card frontend demo
 @app.route('/core_api_credit_card_frontend_sample')
 def core_api_credit_card_frontend_sample():
     return render_template('core_api_credit_card_frontend_sample.html', 
         client_key = core.api_config.client_key)
 
+
+def printExampleWarningMessage():
+    pathfile = os.path.abspath("web.py")
+    message = "<code><h4>Please set your server key and client key from sandbox</h4>In file: " + pathfile
+    message += "<br><br># Set Your server key"
+    message += "<br># You can find it in Merchant Portal -> Settings -> Access keys"
+    message += "<br>SERVER_KEY = ''"
+    message += "<br>CLIENT_KEY = ''</code>"
+    return message
+
 if __name__ == '__main__':
-    app.run(debug=True,port=5000,host='0.0.0.0')
+    app.run(debug=True,port=5000,host='0.0.0.0')

examples/snap/snap_advanced_example.py

@@ -1,5 +1,13 @@
 import midtransclient
-# initialize snap client object
+# This is just for very basic implementation reference, in production, you should validate the incoming requests and implement your backend more securely.
+# Please refer to this docs for snap popup:
+# https://docs.midtrans.com/en/snap/integration-guide?id=integration-steps-overview
+
+# Please refer to this docs for snap-redirect:
+# https://docs.midtrans.com/en/snap/integration-guide?id=alternative-way-to-display-snap-payment-page-via-redirect
+
+# Initialize snap client object
+# You can find it in Merchant Portal -> Settings -> Access keys
 snap = midtransclient.Snap(
     is_production=False,
     server_key='YOUR_SERVER_KEY',

examples/snap/snap_simple_example.py

@@ -1,5 +1,13 @@
 import midtransclient
-# initialize snap client object
+# This is just for very basic implementation reference, in production, you should validate the incoming requests and implement your backend more securely.
+# Please refer to this docs for snap popup:
+# https://docs.midtrans.com/en/snap/integration-guide?id=integration-steps-overview
+
+# Please refer to this docs for snap-redirect:
+# https://docs.midtrans.com/en/snap/integration-guide?id=alternative-way-to-display-snap-payment-page-via-redirect
+
+# Initialize snap client object
+# You can find it in Merchant Portal -> Settings -> Access keys
 snap = midtransclient.Snap(
     is_production=False,
     server_key='YOUR_SERVER_KEY',

examples/transaction_actions/notification_example.py

@@ -1,6 +1,10 @@
 import midtransclient
+# This is just for very basic implementation reference, in production, you should validate the incoming requests and implement your backend more securely.
+# Please refer to this docs for sample HTTP POST notifications:
+# https://docs.midtrans.com/en/after-payment/http-notification?id=sample-of-different-payment-channels
 
-# initialize api client object
+# Initialize api client object
+# You can find it in Merchant Portal -> Settings -> Access keys
 api_client = midtransclient.CoreApi(
     is_production=False,
     server_key='YOUR_SERVER_KEY',