Class: TranspayrentUIHelper

Constructor

new TranspayrentUIHelper(sdk, container, loader)

Parameters:

Name	Type	Description
sdk	Transpayrent	The instance of the Transpayrent SDK, which will be used by the UI Helper
container	Element	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.
loader	Element	The loading indicator element

Version:

• 1.2.0

Copyright:

• Transpayrent ApS 2022

License:

• Common Transpayrent API license

Source:

• transpayrent-ui-helper.js, line 138

See:

• TranspayrentUIHelper

• TranspayrentUIHelper#getCreateTransactionRequest
• TranspayrentUIHelper#getInitializePaymentRequest
• TranspayrentUIHelper#getAuthenticateConsumerRequest
• TranspayrentUIHelper#getAuthenticateConsumerRequest
• TranspayrentUIHelper#getAuthorizePaymentRequest
• TranspayrentUIHelper#getSaveRequest
• TranspayrentUIHelper#displayStatusMessage
• TranspayrentUIHelper#displayAuthenticationFailure
• TranspayrentUIHelper#displayPaymentConfirmation

Example

Instantiate the Transpayrent SDK and Transpayrent UI Helper SDK

 <script src="https://storage.googleapis.com/static.[ENVIRONMENT].transpayrent.cloud/v1/swagger-client.js"></script>
 <script src="https://storage.googleapis.com/static.[ENVIRONMENT].transpayrent.cloud/v1/transpayrent.js"></script>
 <script>
     // Override UI Helper SDK methods to return the correct request for the specified payment method
     TranspayrentUIHelper.prototype.getCreateTransactionRequest = function (paymentMethodId) {
         return createTransactionRequests[paymentMethodId];
     }
     TranspayrentUIHelper.prototype.getInitializePaymentRequest = function (paymentMethodId) {
          return initializePaymentRequests[paymentMethodId];
     }
     TranspayrentUIHelper.prototype.getAuthenticateConsumerRequest = function (paymentMethodId) {
         return authenticateConsumerRequests[paymentMethodId];
     }
     TranspayrentUIHelper.prototype.getAuthorizePaymentRequest = function (paymentMethodId) {
         return authorizePaymentRequests[paymentMethodId];
     }
     TranspayrentUIHelper.prototype.getSaveRequest = function (paymentMethodId) {
         return saveRequests[paymentMethodId];
     }

     // SDK configuration
     const transpayrentConfig = {
         merchantId: [UNIQUE MERCHANT ID ASSIGNED BY TRANSPAYRENT],
         sessionId: [ID IN THE RESPONSE FROM "Create Payment Session"],
         accessToken: '[x-transpayrent-access-token HTTP HEADER IN THE RESPONSE FROM "Create Payment Session"]'
     };
     const url = 'https://generator.[ENVIRONMENT].transpayrent.cloud/v1/'+ transpayrentConfig.merchantId +'/system/PAYMENT_GATEWAY/sdk/CLIENT';

     // Instantiate SDK and UI Helper SDK
     const sdk = new Transpayrent(url, transpayrentConfig);
     const helper = new TranspayrentUIHelper(sdk, document.getElementById('container'), document.getElementById('loader') );
     
     // Construct requests for each operation: createTransaction, initialize, authenticate, authorize and save
     var card = { card_number: 4111111111111111,     // Successful Authorization: Manual Challenge with browser fingerprint
                  expiry_month: 9,
                  expiry_year: 22,
                  cvv: 987,
                  card_holder_name: 'John Doe',
                  save: true };
     card.payment_method_id = sdk.getPaymentMethodId(card.card_number);
     var address = { street : 'Arne Jacobsens Allé 7',
                     appartment : '5. sal',
                     city : 'Copenhagen S',
                     postal_code : '2300',
                     state : '82',
                     country: 208 };                 // Denmark
     var phone = { international_dialing_code: 45,   // Denmark
                   phone_number: 89671108 };
     var email = 'hello@transpayrent.dk';
     
     var createTransactionRequests = new Array();
     // Card based payment
     createTransactionRequests[card.payment_method_id] = { correlation_id : 'TP-'+ transpayrentConfig.sessionId,
                                                           amount: { currency : 208,          // DKK
                                                                     value : card.save ? 0 : 100 } };
     // Transpayrent - Consumer Wallet
     createTransactionRequests[201] = { correlation_id : 'TP-'+ transpayrentConfig.sessionId,
                                        amount: { currency : 208,          // DKK
                                                  value : 100 } };
     // MobilePay Online
     createTransactionRequests[202] = { correlation_id : 'TP-'+ transpayrentConfig.sessionId,
                                        amount: { currency : 208,          // DKK
                                                  value : 100 } };
     
     var initializePaymentRequests = new Array();
     // Card based payment
     initializePaymentRequests[card.payment_method_id] = { payment_method_id : card.payment_method_id }
     // Consumer Wallet
     initializePaymentRequests[201] = { payment_method_id : 201 }
     // MobilePay Online
     initializePaymentRequests[202] = { payment_method_id : 202,
                                        mobile : phone,
                                        save : false };
     
     var authenticateConsumerRequests = new Array();
     // Card based payment
     authenticateConsumerRequests[card.payment_method_id] = { payment_details : card,
                                                              billing_address : address,
                                                              shipping_address : address,
                                                              contact : { mobile : phone,
                                                                          work : phone,
                                                                          home : phone,
                                                                          email : email } };
     
     var authorizePaymentRequests = new Array();
     // Card based payment
     authorizePaymentRequests[card.payment_method_id] = { payment_details : card };
     // Consumer Wallet
     authorizePaymentRequests[201] = { payment_details : { payment_method_id : 201,
                                                           valuable_id : [VALUEABLE ID IN THE RESPONSE FROM "Create Payment Session"],
                                                           access_token : '[MERCHANT'S SINGLE SIGN-ON TOKEN FOR AUTHORIZING A PAYMENT WITH THE CONSUMER'S WALLET]' } };
     // MobilePay Online
     authorizePaymentRequests[202] = { payment_details : { payment_method_id : 202 } };

     var saveRequest = { payment_details : card,
                         consumer_id : '[MERCHANT'S CONSUMER ID FROM PAYMENT SESSION]',
                         name : "My VISA Card" }
     
     // Complete the payment using the UI Helper SDK
     var paymentMethodId = 201;  // Consumer Wallet
     helper.completePayment(paymentMethodId, card.save);
 </script>

 TranspayrentUIHelper.prototype.displayAuthenticationFailure = function (result) {
     this._sdk.getLocalizedStatusMessage(result.status_code)
         .then(text => {
            if (this._container) {
                 this._container.style.visibility = 'hidden';
             }
             var message = document.createElement('h1');
             message.className = 'failure';
             message.innerHTML = '<img id="loader" src="/failure.png" width="30" height="30" alt="- completed -" />';
             message.innerHTML += ` ${text} (${result.status_code})`;
             document.body.appendChild(message);
         });
 }

 TranspayrentUIHelper.prototype.displayPaymentConfirmation = function (result) {
     this._sdk.getLocalizedMessage(`Payment transaction: ${authorization.transaction_id} successfully authorized`)
         .then(text => {
             if (this._container) {
                 this._container.style.visibility = 'hidden';
             }
             var message = document.createElement('h1');
             message.className = 'success';
             message.innerHTML = '<img id="loader" src="/success.png" width="30" height="30" alt="- completed -" />';
             message.innerHTML += ` ${text}`;
             document.body.appendChild(message);
         });
 }

 TranspayrentUIHelper.prototype.displayStatusMessage = function (result) {
     this._sdk.getLocalizedMessage(`API: ${result.api} failed with HTTP Status Code: ${result.status} and error: ${result.messages[0].message} (${result.messages[0].code})`)
         .then(text => {
             if (this._container) {
                 this._container.style.visibility = 'hidden';
             }
             alert(text);
     });
 }