Source: transpayrent-ui-helper.js

  1. /**
  2.  * @copyright Transpayrent ApS 2022
  3.  * @license Common Transpayrent API license
  4.  * @version 1.2.0
  5.  * 
  6.  * @class
  7.  * @classdesc   The Transpayrent UI Helper SDK simplifies completion of the entire payment process into the following 3 steps:
  8.  *  1) Override UI Helper SDK methods to return the correct request for the specified payment method:
  9.  *      * [Create Payment Transaction]{@link TranspayrentUIHelper#getCreateTransactionRequest}
  10.  *      * [Initialize Payment]{@link TranspayrentUIHelper#getInitializePaymentRequest}
  11.  *      * [Authenticate Consumer]{@link TranspayrentUIHelper#getAuthenticateConsumerRequest}
  12.  *      * [Authorize Payment]{@link TranspayrentUIHelper#getAuthorizePaymentRequest}
  13.  *      * [Save]{@link TranspayrentUIHelper#getSaveRequest}
  14.  *  2) Construct requests for each operation: createTransaction, initialize, authenticate, authorize and save
  15.  *  3) Call the [Complete the Payment using the Transpayrent UI Helper SDK]{@link TranspayrentUIHelper#completePayment}
  16.  * 
  17.  * @see [TranspayrentUIHelper]{@link TranspayrentUIHelper}
  18.  * @see {@link TranspayrentUIHelper#getCreateTransactionRequest}
  19.  * @see {@link TranspayrentUIHelper#getInitializePaymentRequest}
  20.  * @see {@link TranspayrentUIHelper#getAuthenticateConsumerRequest}
  21.  * @see {@link TranspayrentUIHelper#getAuthenticateConsumerRequest}
  22.  * @see {@link TranspayrentUIHelper#getAuthorizePaymentRequest}
  23.  * @see {@link TranspayrentUIHelper#getSaveRequest}
  24.  * @see {@link TranspayrentUIHelper#displayStatusMessage}
  25.  * @see {@link TranspayrentUIHelper#displayAuthenticationFailure}
  26.  * @see {@link TranspayrentUIHelper#displayPaymentConfirmation}
  27.  * 
  28.  * @constructor
  29.  * @description Creates a new instance of the Transpayrent UI Helper SDK, which uses the Transpayrent SDK internally to handle the secure communication with Transpayrent's Payment Gateway.
  30.  * @example <caption>Instantiate the Transpayrent SDK and Transpayrent UI Helper SDK</caption>
  31.  *  <script src="https://storage.googleapis.com/static.[ENVIRONMENT].transpayrent.cloud/v1/swagger-client.js"></script>
  32.  *  <script src="https://storage.googleapis.com/static.[ENVIRONMENT].transpayrent.cloud/v1/transpayrent.js"></script>
  33.  *  <script>
  34.  *      // Override UI Helper SDK methods to return the correct request for the specified payment method
  35.  *      TranspayrentUIHelper.prototype.getCreateTransactionRequest = function (paymentMethodId) {
  36.  *          return createTransactionRequests[paymentMethodId];
  37.  *      }
  38.  *      TranspayrentUIHelper.prototype.getInitializePaymentRequest = function (paymentMethodId) {
  39.  *           return initializePaymentRequests[paymentMethodId];
  40.  *      }
  41.  *      TranspayrentUIHelper.prototype.getAuthenticateConsumerRequest = function (paymentMethodId) {
  42.  *          return authenticateConsumerRequests[paymentMethodId];
  43.  *      }
  44.  *      TranspayrentUIHelper.prototype.getAuthorizePaymentRequest = function (paymentMethodId) {
  45.  *          return authorizePaymentRequests[paymentMethodId];
  46.  *      }
  47.  *      TranspayrentUIHelper.prototype.getSaveRequest = function (paymentMethodId) {
  48.  *          return saveRequests[paymentMethodId];
  49.  *      }
  50.  * 
  51.  *      // SDK configuration
  52.  *      const transpayrentConfig = {
  53.  *          merchantId: [UNIQUE MERCHANT ID ASSIGNED BY TRANSPAYRENT],
  54.  *          sessionId: [ID IN THE RESPONSE FROM "Create Payment Session"],
  55.  *          accessToken: '[x-transpayrent-access-token HTTP HEADER IN THE RESPONSE FROM "Create Payment Session"]'
  56.  *      };
  57.  *      const url = 'https://generator.[ENVIRONMENT].transpayrent.cloud/v1/'+ transpayrentConfig.merchantId +'/system/PAYMENT_GATEWAY/sdk/CLIENT';
  58.  * 
  59.  *      // Instantiate SDK and UI Helper SDK
  60.  *      const sdk = new Transpayrent(url, transpayrentConfig);
  61.  *      const helper = new TranspayrentUIHelper(sdk, document.getElementById('container'), document.getElementById('loader') );
  62.  *      
  63.  *      // Construct requests for each operation: createTransaction, initialize, authenticate, authorize and save
  64.  *      var card = { card_number: 4111111111111111,     // Successful Authorization: Manual Challenge with browser fingerprint
  65.  *                   expiry_month: 9,
  66.  *                   expiry_year: 22,
  67.  *                   cvv: 987,
  68.  *                   card_holder_name: 'John Doe',
  69.  *                   save: true };
  70.  *      card.payment_method_id = sdk.getPaymentMethodId(card.card_number);
  71.  *      var address = { street : 'Arne Jacobsens Allé 7',
  72.  *                      appartment : '5. sal',
  73.  *                      city : 'Copenhagen S',
  74.  *                      postal_code : '2300',
  75.  *                      state : '82',
  76.  *                      country: 208 };                 // Denmark
  77.  *      var phone = { international_dialing_code: 45,   // Denmark
  78.  *                    phone_number: 89671108 };
  79.  *      var email = 'hello@transpayrent.dk';
  80.  *      
  81.  *      var createTransactionRequests = new Array();
  82.  *      // Card based payment
  83.  *      createTransactionRequests[card.payment_method_id] = { correlation_id : 'TP-'+ transpayrentConfig.sessionId,
  84.  *                                                            amount: { currency : 208,          // DKK
  85.  *                                                                      value : card.save ? 0 : 100 } };
  86.  *      // Transpayrent - Consumer Wallet
  87.  *      createTransactionRequests[201] = { correlation_id : 'TP-'+ transpayrentConfig.sessionId,
  88.  *                                         amount: { currency : 208,          // DKK
  89.  *                                                   value : 100 } };
  90.  *      // MobilePay Online
  91.  *      createTransactionRequests[202] = { correlation_id : 'TP-'+ transpayrentConfig.sessionId,
  92.  *                                         amount: { currency : 208,          // DKK
  93.  *                                                   value : 100 } };
  94.  *      
  95.  *      var initializePaymentRequests = new Array();
  96.  *      // Card based payment
  97.  *      initializePaymentRequests[card.payment_method_id] = { payment_method_id : card.payment_method_id }
  98.  *      // Consumer Wallet
  99.  *      initializePaymentRequests[201] = { payment_method_id : 201 }
  100.  *      // MobilePay Online
  101.  *      initializePaymentRequests[202] = { payment_method_id : 202,
  102.  *                                         mobile : phone,
  103.  *                                         save : false };
  104.  *      
  105.  *      var authenticateConsumerRequests = new Array();
  106.  *      // Card based payment
  107.  *      authenticateConsumerRequests[card.payment_method_id] = { payment_details : card,
  108.  *                                                               billing_address : address,
  109.  *                                                               shipping_address : address,
  110.  *                                                               contact : { mobile : phone,
  111.  *                                                                           work : phone,
  112.  *                                                                           home : phone,
  113.  *                                                                           email : email } };
  114.  *      
  115.  *      var authorizePaymentRequests = new Array();
  116.  *      // Card based payment
  117.  *      authorizePaymentRequests[card.payment_method_id] = { payment_details : card };
  118.  *      // Consumer Wallet
  119.  *      authorizePaymentRequests[201] = { payment_details : { payment_method_id : 201,
  120.  *                                                            valuable_id : [VALUEABLE ID IN THE RESPONSE FROM "Create Payment Session"],
  121.  *                                                            access_token : '[MERCHANT'S SINGLE SIGN-ON TOKEN FOR AUTHORIZING A PAYMENT WITH THE CONSUMER'S WALLET]' } };
  122.  *      // MobilePay Online
  123.  *      authorizePaymentRequests[202] = { payment_details : { payment_method_id : 202 } };
  124.  * 
  125.  *      var saveRequest = { payment_details : card,
  126.  *                          consumer_id : '[MERCHANT'S CONSUMER ID FROM PAYMENT SESSION]',
  127.  *                          name : "My VISA Card" }
  128.  *      
  129.  *      // Complete the payment using the UI Helper SDK
  130.  *      var paymentMethodId = 201;  // Consumer Wallet
  131.  *      helper.completePayment(paymentMethodId, card.save);
  132.  *  </script>
  133.  * 
  134.  * @param {Transpayrent} sdk    The instance of the Transpayrent SDK, which will be used by the UI Helper
  135.  * @param {Element} container   The container element in which the constructed iframe for initializing a payment with a 3rd party wallet such as MobilePay or authenticating the consumer using 3D Secure will be displayed. Defaults to `document.body`.
  136.  * @param {Element} loader      The loading indicator element
  137.  */
  138. function TranspayrentUIHelper(sdk, container, loader) {
  139.     /**
  140.      * The instance of the Transpayrent SDK, which will be used by the UI Helper
  141.      * 
  142.      * @private
  143.      * 
  144.      * @type {Transpayrent}
  145.      */
  146.     this._sdk = sdk;
  147.     /**
  148.      * The container element in which the constructed iframe for initializing a payment with a 3rd party wallet such as MobilePay or authenticating the consumer using 3D Secure will be displayed. Defaults to `document.body`.
  149.      * 
  150.      * @private
  151.      * 
  152.      * @type {Element}
  153.      */
  154.     this._container = container;
  155.     /**
  156.      * The loading indicator element
  157.      * 
  158.      * @private
  159.      * 
  160.      * @type {Element}
  161.      */
  162.     this._loader = loader;
  163.     
  164.     /* ========== COMMON METHODS START ========== */
  165.     /**
  166.      * A representation of the configuration for completing the consumer's payment
  167.      * 
  168.      * @property {boolean} disable_authentication   Boolean flag specifying whether Strong Consumer Authentication (SCA) should be disabled.
  169.      *                                              Explicitly disabling SCA is useful for Mail Order / Telephone Order (MOTO) transactions.
  170.      * 
  171.      * @typedef {Object} Configuration
  172.      */
  173.     /**
  174.      * Completes the consumer's payment by executing the following steps:
  175.      *  1) Create a payment transaction with the specified payment method
  176.      *  2) Initialize the payment for the specified payment method
  177.      *  3) Complete Strong Consumer Authentication (SCA) using 3D Secure if applicable
  178.      *  4) Authorize the payment for the payment transaction using the specified payment method
  179.      * 
  180.      * @see {@link Transpayrent#createTransaction}
  181.      * @see {@link Transpayrent#initialize}
  182.      * @see {@link Transpayrent#authenticate}
  183.      * @see {@link Transpayrent#authorize}
  184.      * @see {@link Transpayrent#save}
  185.      * @see {@link TranspayrentUIHelper#displayStatusMessage}
  186.      * @see {@link TranspayrentUIHelper#displayAuthenticationFailure}
  187.      * @see {@link TranspayrentUIHelper#displayPaymentConfirmation}
  188.      * @see {@link TranspayrentUIHelper#getCreateTransactionRequest}
  189.      * @see {@link TranspayrentUIHelper#getInitializePaymentRequest}
  190.      * @see {@link TranspayrentUIHelper#getAuthenticateConsumerRequest}
  191.      * @see {@link TranspayrentUIHelper#getAuthorizePaymentRequest}
  192.      * @see {@link TranspayrentUIHelper#getSaveRequest}
  193.      * @see {@link TranspayrentUIHelper#getIFrameConfig}
  194.      * 
  195.      * @param {PAYMENT_METHOD_ID} paymentMethodId   The payment method selected by the consumer
  196.      * @param {boolean} save                        Boolean flag indicating whether the payment details for the specified payment method will be saved
  197.      * @param {Configuration} config                Configuration for completing the consumer's payment
  198.      */
  199.     TranspayrentUIHelper.prototype.completePayment = function (paymentMethodId, save, config) {
  200.         if (save == null) {
  201.             save = this.getInitializePaymentRequest(paymentMethodId).save;
  202.         }
  203.         config = Object.assign({ disable_authentication : false },
  204.                                  config);
  205.         if (this._container) {
  206.             this._container.style.visibility = 'visible';
  207.         }
  208.         var request = this.getCreateTransactionRequest(paymentMethodId);
  209.         var token = null;
  210.         const amount = request.amount;
  211.         this._sdk.createTransaction(paymentMethodId, request)
  212.             .then(
  213.                 transaction => {
  214.                     // Creation of Payment Transaction failed - Display status message
  215.                     if (transaction.status) {
  216.                         this.displayStatusMessage(transaction);
  217.                         return Promise.reject(null);
  218.                     }
  219.                     else {
  220.                         var cfg = this.getIFrameConfig('payment-initialization');
  221.                         if (cfg.container) {
  222.                             this._sdk.clearContainer(cfg.container);
  223.                         }
  224.                         return this._sdk.initialize(transaction.id, this.getInitializePaymentRequest(paymentMethodId), cfg);
  225.                     }
  226.                 })
  227.             .then(
  228.                 initialization => {
  229.                     // Initialization of Payment Transaction failed - Display status message
  230.                     if (initialization.status) {
  231.                         this.displayStatusMessage(initialization);
  232.                         return Promise.reject(null);
  233.                     }
  234.                     else {
  235.                         // Token returned by a 3rd party wallet such as Apple Pay or Google Pay
  236.                         if (initialization.hasOwnProperty('token') ) {
  237.                             token = initialization.token;
  238.                         }
  239.                         // Redirect or App-Switch
  240.                         if (initialization.connection && initialization.connection.action <= 2) {
  241.                             window.location.href = initialization.connection.url;
  242.                         }
  243.                         // Payment Transaction is exempt from Strong Consumer Authentication (SCA) or SCA disabled
  244.                         else if (this._sdk.isSCAExempt(paymentMethodId, amount, save) || config.disable_authentication) {
  245.                             return Promise.resolve(initialization);
  246.                         }
  247.                         else {
  248.                             request = this.getAuthenticateConsumerRequest(paymentMethodId);
  249.                             // Perform Strong Consumer Authentication (SCA)
  250.                             if (request) {
  251.                                 // Use token returned by a 3rd party wallet such as Google Pay for strong consumer authentication
  252.                                 if (token) {
  253.                                     request.payment_details.token = token;
  254.                                 }
  255.                                 var cfg = this.getIFrameConfig('consumer-authentication');
  256.                                 if (cfg.container) {
  257.                                     this._sdk.clearContainer(cfg.container);
  258.                                 }
  259.                                 return this._sdk.authenticate(initialization.transaction_id, request, cfg);
  260.                             }
  261.                             // Strong Consumer Authentication (SCA) not available for Payment Method
  262.                             else {
  263.                                 return Promise.resolve(initialization);
  264.                             }
  265.                         }
  266.                     }
  267.             })
  268.             .then(
  269.                 authentication => {
  270.                     // Consumer Authentication failed
  271.                     if (authentication.status) {
  272.                         // Consumer Authentication failure
  273.                         if (authentication.status == 511) {
  274.                             this.displayAuthenticationFailure(authentication);
  275.                         }
  276.                         // API request failed - Display status message
  277.                         else {
  278.                             this.displayStatusMessage(authentication);
  279.                         }
  280.                         return Promise.reject(null);
  281.                     }
  282.                     // Payment Transaction is exempt from Strong Consumer Authentication (SCA) or SCA disabled
  283.                     else if (this._sdk.isSCAExempt(paymentMethodId, amount, save) || config.disable_authentication) {
  284.                         request = this.getAuthorizePaymentRequest(paymentMethodId);
  285.                         // Use token returned by a 3rd party wallet such as Apple Pay or Google Pay for payment authorization
  286.                         if (token) {
  287.                             if (request.hasOwnProperty('payment_details') ) {
  288.                                 request.payment_details.token = token;
  289.                             }
  290.                             else {
  291.                                 request.token = token;
  292.                             }
  293.                         }
  294.                         return this._sdk.authorize(authentication.transaction_id, request);
  295.                     }
  296.                     // Consumer Authentication successfully completed: Save Payment Card
  297.                     else if (save) {
  298.                         request = this.getSaveRequest(paymentMethodId);
  299.                         // Use token returned by a 3rd party wallet such as Apple Pay or Google Pay for payment authorization
  300.                         if (token) {
  301.                             request.payment_details.token = token;
  302.                         }
  303.                         request.payment_details.cryptogram = authentication.cryptogram;
  304.                         return this._sdk.save(authentication.transaction_id, request);
  305.                     }
  306.                     // Consumer Authentication successfully completed: Authorize Payment
  307.                     else {
  308.                         request = this.getAuthorizePaymentRequest(paymentMethodId);
  309.                         if (request.hasOwnProperty('payment_details') ) {
  310.                             // Use token returned by a 3rd party wallet such as Apple Pay or Google Pay for payment authorization
  311.                             if (token) {
  312.                                 request.payment_details.token = token;
  313.                             }
  314.                             request.payment_details.cryptogram = authentication.cryptogram;
  315.                         }
  316.                         else {
  317.                             // Use token returned by a 3rd party wallet such as Apple Pay or Google Pay for payment authorization
  318.                             if (token) {
  319.                                 request.token = token;
  320.                             }
  321.                             request.cryptogram = authentication.cryptogram;
  322.                         }
  323.                         return this._sdk.authorize(authentication.transaction_id, request);
  324.                     }
  325.                 })
  326.             .then(
  327.                 authorization => {
  328.                     // Payment Authorization failed - Display status message
  329.                     if (authorization.status) {
  330.                         // "Additional authentication" required
  331.                         if (authorization.messages[0].code == 640416) {
  332.                             request = this.getAuthenticateConsumerRequest(paymentMethodId);
  333.                             // Perform Strong Consumer Authentication (SCA)
  334.                             if (request) {
  335.                                 // Use token returned by a 3rd party wallet such as Google Pay for strong consumer authentication
  336.                                 if (token) {
  337.                                     request.payment_details.token = token;
  338.                                 }
  339.                                 var cfg = this.getIFrameConfig('consumer-authentication');
  340.                                 if (cfg.container) {
  341.                                     this._sdk.clearContainer(cfg.container);
  342.                                 }
  343.                                 this._sdk.authenticate(authorization.transaction_id, request, cfg)
  344.                                 .then(
  345.                                     authentication => {
  346.                                         // Consumer Authentication failed
  347.                                         if (authentication.status) {
  348.                                             // Consumer Authentication failure
  349.                                             if (authentication.status == 511) {
  350.                                                 this.displayAuthenticationFailure(authentication);
  351.                                             }
  352.                                             // API request failed - Display status message
  353.                                             else {
  354.                                                 this.displayStatusMessage(authentication);
  355.                                             }
  356.                                             return Promise.reject(null);
  357.                                         }
  358.                                         else {
  359.                                             request = this.getAuthorizePaymentRequest(paymentMethodId);
  360.                                             if (request.hasOwnProperty('payment_details') ) {
  361.                                                 // Use token returned by a 3rd party wallet such as Apple Pay or Google Pay for payment authorization
  362.                                                 if (token) {
  363.                                                     request.payment_details.token = token;
  364.                                                 }
  365.                                                 request.payment_details.cryptogram = authentication.cryptogram;
  366.                                             }
  367.                                             else {
  368.                                                 // Use token returned by a 3rd party wallet such as Apple Pay or Google Pay for payment authorization
  369.                                                 if (token) {
  370.                                                     request.token = token;
  371.                                                 }
  372.                                                 request.cryptogram = authentication.cryptogram;
  373.                                             }
  374.                                             this._sdk.authorize(authentication.transaction_id, request)
  375.                                             .then(
  376.                                                 reauth => {
  377.                                                     // Payment Authorization failed - Display status message
  378.                                                     if (reauth.status) {
  379.                                                         this.displayStatusMessage(reauth);
  380.                                                     }
  381.                                                     // Payment Authorization completed - Display success message
  382.                                                     else {
  383.                                                         this.displayPaymentConfirmation(reauth);
  384.                                                     }
  385.                                                 }
  386.                                             )
  387.                                             .catch(reason => {
  388.                                                 // Low level error - Display error message
  389.                                                 if (reason) {
  390.                                                     console.error(`Internal error: ${reason} ${reason.stack}`);
  391.                                                 }
  392.                                                 if (this._container) {
  393.                                                     this._container.style.visibility = 'hidden';
  394.                                                 }
  395.                                             });
  396.                                         }
  397.                                     }
  398.                                 )
  399.                                 .catch(reason => {
  400.                                     // Low level error - Display error message
  401.                                     if (reason) {
  402.                                         console.error(`Internal error: ${reason} ${reason.stack}`);
  403.                                     }
  404.                                     if (this._container) {
  405.                                         this._container.style.visibility = 'hidden';
  406.                                     }
  407.                                 });
  408.                             }
  409.                             else {
  410.                                 this.displayStatusMessage(authorization);
  411.                             }
  412.                         }
  413.                         else {
  414.                             this.displayStatusMessage(authorization);
  415.                         }
  416.                     }
  417.                     // Payment Authorization completed - Display success message
  418.                     else {
  419.                         this.displayPaymentConfirmation(authorization);
  420.                     }
  421.                 })
  422.             .catch(reason => {
  423.                 // Low level error - Display error message
  424.                 if (reason) {
  425.                     console.error(`Internal error: ${reason} ${reason.stack}`);
  426.                 }
  427.                 if (this._container) {
  428.                     this._container.style.visibility = 'hidden';
  429.                 }
  430.             });
  431.     }
  432.     /* ========== COMMON METHODS END ========== */
  433. }
  434. /* ========== CALLBACK METHODS START ========== */
  435. /**
  436.  * Displays the details of a failed API request.  
  437.  * It is strongly recommended to override this method as the default implementation will simply display an alert with the localized message.
  438.  * 
  439.  * @example <caption>Override displayStatusMessage</caption>
  440.  *  TranspayrentUIHelper.prototype.displayStatusMessage = function (result) {
  441.  *      this._sdk.getLocalizedMessage(`API: ${result.api} failed with HTTP Status Code: ${result.status} and error: ${result.messages[0].message} (${result.messages[0].code})`)
  442.  *          .then(text => {
  443.  *              if (this._container) {
  444.  *                  this._container.style.visibility = 'hidden';
  445.  *              }
  446.  *              alert(text);
  447.  *      });
  448.  *  }
  449.  * 
  450.  * @see {@link Transpayrent#getLocalizedMessage}
  451.  * 
  452.  * @param {Status} result   The status object with a list of status message(s) returned by the Payment Gateway
  453.  */
  454. TranspayrentUIHelper.prototype.displayStatusMessage = function (result) {
  455.     this._sdk.getLocalizedMessage(`API: ${result.api} failed with HTTP Status Code: ${result.status} and error: ${result.messages[0].message} (${result.messages[0].code})`)
  456.         .then(text => {
  457.             if (this._container) {
  458.                 this._container.style.visibility = 'hidden';
  459.             }
  460.             alert(text);
  461.         });
  462. }
  463. /**
  464.  * Displays the details of a failure during Strong Consumer Authentication (SCA).  
  465.  * It is strongly recommended to override this method as the default implementation will simply display an alert with the localized message.
  466.  * 
  467.  * @example <caption>Override displayAuthenticationFailure</caption>
  468.  *  TranspayrentUIHelper.prototype.displayAuthenticationFailure = function (result) {
  469.  *      this._sdk.getLocalizedStatusMessage(result.status_code)
  470.  *          .then(text => {
  471.   *             if (this._container) {
  472.  *                  this._container.style.visibility = 'hidden';
  473.  *              }
  474.  *              var message = document.createElement('h1');
  475.  *              message.className = 'failure';
  476.  *              message.innerHTML = '<img id="loader" src="/failure.png" width="30" height="30" alt="- completed -" />';
  477.  *              message.innerHTML += ` ${text} (${result.status_code})`;
  478.  *              document.body.appendChild(message);
  479.  *          });
  480.  *  }
  481.  * 
  482.  * @see {@link Transpayrent#getLocalizedStatusMessage}
  483.  * 
  484.  * @param {AuthenticationFailureResult} result  The result of a failed authentication of the consumer for a payment transaction using Strong Consumer Authentication (SCA)
  485.  */
  486. TranspayrentUIHelper.prototype.displayAuthenticationFailure = function (result) {
  487.     this._sdk.getLocalizedStatusMessage(result.status_code)
  488.         .then(text => {
  489.             if (this._container) {
  490.                 this._container.style.visibility = 'hidden';
  491.             }
  492.             alert(`${text} (${result.status_code})`);
  493.         });
  494. }
  495. /**
  496.  * Displays the details of the successfully completed payment transaction.
  497.  * It is strongly recommended to override this method as the default implementation will simply display an alert with the localized message.
  498.  * 
  499.  * @example <caption>Override displayPaymentConfirmation</caption>
  500.  *  TranspayrentUIHelper.prototype.displayPaymentConfirmation = function (result) {
  501.  *      this._sdk.getLocalizedMessage(`Payment transaction: ${authorization.transaction_id} successfully authorized`)
  502.  *          .then(text => {
  503.  *              if (this._container) {
  504.  *                  this._container.style.visibility = 'hidden';
  505.  *              }
  506.  *              var message = document.createElement('h1');
  507.  *              message.className = 'success';
  508.  *              message.innerHTML = '<img id="loader" src="/success.png" width="30" height="30" alt="- completed -" />';
  509.  *              message.innerHTML += ` ${text}`;
  510.  *              document.body.appendChild(message);
  511.  *          });
  512.  *  }
  513.  * 
  514.  * @see {@link Transpayrent#getLocalizedMessage}
  515.  * 
  516.  * @param {AuthorizePaymentResponse} authorization  The details for the successful authorization of a payment transaction
  517.  */
  518. TranspayrentUIHelper.prototype.displayPaymentConfirmation = function (authorization) {
  519.     this._sdk.getLocalizedMessage(`Payment transaction: ${authorization.transaction_id} successfully authorized`)
  520.         .then(text => {
  521.             if (this._container) {
  522.                 this._container.style.visibility = 'hidden';
  523.             }
  524.             alert(text);
  525.         });
  526. }
  527. /**
  528.  * Returns a representation of the consumer's payment transaction. 
  529.  * 
  530.  * @see {@link Transpayrent#createTransaction}
  531.  * 
  532.  * @param {PAYMENT_METHOD_ID} paymentMethodId   The payment method selected by the consumer
  533.  * @returns {CreatePaymentTransactionRequest}   A representation of the consumer's payment transaction.
  534.  */
  535. TranspayrentUIHelper.prototype.getCreateTransactionRequest = function (paymentMethodId) {
  536.     console.error(`Method: getCreateTransactionRequest not overriden`);
  537.     return null;
  538. }
  539. /**
  540.  * Returns a representation of the initialization details provided by the consumer the selected payment method
  541.  * 
  542.  * @see {@link Transpayrent#initialize}
  543.  * 
  544.  * @param {PAYMENT_METHOD_ID} paymentMethodId   The payment method selected by the consumer
  545.  * @returns {InitializationDetails}             A representation of the initialization details provided by the consumer the selected payment method
  546.  */
  547. TranspayrentUIHelper.prototype.getInitializePaymentRequest = function (paymentMethodId) {
  548.     console.error(`Method: getInitializePaymentRequest not overriden`);
  549.     return null;
  550. }
  551. /**
  552.  * Returns a representation of the entered payment details required for strong authentication of a payment transaction using 3D Secure or equivalent.
  553.  * 
  554.  * @see {@link Transpayrent#authenticate}
  555.  * 
  556.  * @param {PAYMENT_METHOD_ID} paymentMethodId   The payment method selected by the consumer
  557.  * @returns {AuthenticateConsumerRequest}       A representation of the entered payment details required for strong authentication of a payment transaction using 3D Secure or equivalent.
  558.  *                                              Please note that the `browser` property will be constructed automatically.
  559.  */
  560. TranspayrentUIHelper.prototype.getAuthenticateConsumerRequest = function (paymentMethodId) {
  561.     console.error(`Method: getAuthenticateConsumerRequest not overriden`);
  562.     return null;
  563. }
  564. /**
  565.  * Returns a representation of a payment details (card details, wallet details, voucher details etc.), which will be used to authorize the payment for the payment transaction
  566.  * 
  567.  * @see {@link Transpayrent#authorize}
  568.  * 
  569.  * @param {PAYMENT_METHOD_ID} paymentMethodId   The payment method selected by the consumer
  570.  * @returns {PaymentDetails}                    A representation of a payment details (card details, wallet details, voucher details etc.), which will be used to authorize the payment for the payment transaction
  571.  */
  572. TranspayrentUIHelper.prototype.getAuthorizePaymentRequest = function (paymentMethodId) {
  573.     console.error(`Method: getAuthorizePaymentRequest not overriden`);
  574.     return null;
  575. }
  576. /**
  577.  * Returns the payment details for the payment card which will be securely stored in Transpayrent's Secure Valut and added to the consumer's wallet
  578.  * 
  579.  * @see {@link Transpayrent#save}
  580.  * 
  581.  * @param {PAYMENT_METHOD_ID} paymentMethodId   The payment method selected by the consumer
  582.  * @returns {SaveConsumerValuableRequest}       The payment details for the payment card which will be securely stored in Transpayrent's Secure Valut and added to the consumer's wallet
  583.  */
  584. TranspayrentUIHelper.prototype.getSaveRequest = function (paymentMethodId) {
  585.     console.error(`Method: getSaveRequest not overriden`);
  586.     return null;
  587. }
  588. /**
  589.  * Returns the configuration for the iframe element which is used when initializing the payment through a 3rd party wallet such as MobilePay
  590.  * or displaying the authentication challenge during a 3D Secure flow.  
  591.  * The default implementation will apply a CSS class with the name of the action: `consumer-authentication` or `payment-initialization` to the constructed iframe.
  592.  * 
  593.  * @see {@link Transpayrent#displayChallenge}
  594.  * @see {@link Transpayrent#displayPaymentInitialization}
  595.  * 
  596.  * @param {String} action   The action for which the iframe will be constructed, may be one of:  
  597.  *                              - `consumer-authentication`  
  598.  *                              - `payment-initialization`  
  599.  * @returns {IFrameConfig} The configuration for the iframe element which is used when initializing the payment through a 3rd party wallet such as MobilePay or displaying the authentication challenge
  600.  */
  601. TranspayrentUIHelper.prototype.getIFrameConfig = function (action) {
  602.     const loader = this._loader;
  603.     var config = { container : this._container,
  604.                    css: action,
  605.                    callback : function (event, iframe) {
  606.                        switch (event) {
  607.                            case 'payment-initialization-initiated':
  608.                            case 'authentication-challenge-initiated':
  609.                                if (loader) {
  610.                                    loader.style.visibility = 'hidden';
  611.                                }
  612.                                break;
  613.                            case 'payment-initialization-completed':                                    
  614.                            case 'authentication-challenge-completed':
  615.                                if (loader) {
  616.                                    loader.style.visibility = 'inherit';
  617.                                }
  618.                                break;
  619.                            default:
  620.                                console.warn(`Unsupported event: ${event}`);
  621.                                break;
  622.                        }
  623.                    } };
  624.     return config;
  625. }
  626. /* ========== CALLBACK METHODS END ========== */