Constructor
new TranspayrentUIHelper(sdk, container, loader)
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.
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 |
loader |
Element | The loading indicator element |
- Version:
- 1.1.1
- Copyright:
- Transpayrent ApS 2022
- License:
- Common Transpayrent API license
- Source:
- See:
-
- 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>
Methods
completePayment(paymentMethodId, save, config)
Completes the consumer's payment by executing the following steps:
- Create a payment transaction with the specified payment method
- Initialize the payment for the specified payment method
- Complete Strong Consumer Authentication (SCA) using 3D Secure if applicable
- Authorize the payment for the payment transaction using the specified payment method
Parameters:
Name | Type | Description |
---|---|---|
paymentMethodId |
PAYMENT_METHOD_ID | The payment method selected by the consumer |
save |
boolean | Boolean flag indicating whether the payment details for the specified payment method will be saved |
config |
Configuration | Configuration for completing the consumer's payment |
- Source:
- See:
-
- Transpayrent#createTransaction
- Transpayrent#initialize
- Transpayrent#authenticate
- Transpayrent#authorize
- Transpayrent#save
- TranspayrentUIHelper#displayStatusMessage
- TranspayrentUIHelper#displayAuthenticationFailure
- TranspayrentUIHelper#displayPaymentConfirmation
- TranspayrentUIHelper#getCreateTransactionRequest
- TranspayrentUIHelper#getInitializePaymentRequest
- TranspayrentUIHelper#getAuthenticateConsumerRequest
- TranspayrentUIHelper#getAuthorizePaymentRequest
- TranspayrentUIHelper#getSaveRequest
- TranspayrentUIHelper#getIFrameConfig
displayAuthenticationFailure(result)
Displays the details of a failure during Strong Consumer Authentication (SCA).
It is strongly recommended to override this method as the default implementation will simply display an alert.
Parameters:
Name | Type | Description |
---|---|---|
result |
AuthenticationFailureResult | The result of a failed authentication of the consumer for a payment transaction using Strong Consumer Authentication (SCA) |
- Source:
Example
Override displayAuthenticationFailure
TranspayrentUIHelper.prototype.displayAuthenticationFailure = function (result) {
document.getElementById('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 += ` Consumer failed authentication challenge for payment transaction: ${result.transaction_id} with error: ${this._sdk.getStatusMessage(result.status_code)} (${result.status_code})`;
document.body.appendChild(message);
}
displayPaymentConfirmation(authorization)
Displays the details of the successfully completed payment transaction. It is strongly recommended to override this method as the default implementation will simply display an alert.
Parameters:
Name | Type | Description |
---|---|---|
authorization |
AuthorizePaymentResponse | The details for the successful authorization of a payment transaction |
- Source:
Example
Override displayPaymentConfirmation
TranspayrentUIHelper.prototype.displayPaymentConfirmation = function (result) {
document.getElementById('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 += ` Payment transaction: ${authorization.transaction_id} successfully authorized`;
document.body.appendChild(message);
}
displayStatusMessage(result)
Displays the details of a failed API request.
It is strongly recommended to override this method as the default implementation will simply display an alert.
Parameters:
Name | Type | Description |
---|---|---|
result |
Status | The status object with a list of status message(s) returned by the Payment Gateway |
- Source:
Example
Override displayStatusMessage
TranspayrentUIHelper.prototype.displayStatusMessage = function (result) {
document.getElementById('container').style.visibility = 'hidden';
alert(`API: ${result.api} failed with HTTP Status Code: ${result.status} and error: ${result.messages[0].message} (${result.messages[0].code})`);
}
getAuthenticateConsumerRequest(paymentMethodId) → {AuthenticateConsumerRequest}
Returns a representation of the entered payment details required for strong authentication of a payment transaction using 3D Secure or equivalent.
Parameters:
Name | Type | Description |
---|---|---|
paymentMethodId |
PAYMENT_METHOD_ID | The payment method selected by the consumer |
- Source:
- See:
Returns:
A representation of the entered payment details required for strong authentication of a payment transaction using 3D Secure or equivalent.
Please note that the browser
property will be constructed automatically.
getAuthorizePaymentRequest(paymentMethodId) → {PaymentDetails}
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
Parameters:
Name | Type | Description |
---|---|---|
paymentMethodId |
PAYMENT_METHOD_ID | The payment method selected by the consumer |
- Source:
- See:
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
- Type
- PaymentDetails
getCreateTransactionRequest(paymentMethodId) → {CreatePaymentTransactionRequest}
Returns a representation of the consumer's payment transaction.
Parameters:
Name | Type | Description |
---|---|---|
paymentMethodId |
PAYMENT_METHOD_ID | The payment method selected by the consumer |
- Source:
- See:
Returns:
A representation of the consumer's payment transaction.
getIFrameConfig(action) → {IFrameConfig}
Returns 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 during a 3D Secure flow.
The default implementation will apply a CSS class with the name of the action: consumer-authentication
or payment-initialization
to the constructed iframe.
Parameters:
Name | Type | Description |
---|---|---|
action |
String | The action for which the iframe will be constructed, may be one of: |
- Source:
- See:
Returns:
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
- Type
- IFrameConfig
getInitializePaymentRequest(paymentMethodId) → {InitializationDetails}
Returns a representation of the initialization details provided by the consumer the selected payment method
Parameters:
Name | Type | Description |
---|---|---|
paymentMethodId |
PAYMENT_METHOD_ID | The payment method selected by the consumer |
- Source:
- See:
Returns:
A representation of the initialization details provided by the consumer the selected payment method
getSaveRequest(paymentMethodId) → {SaveConsumerValuableRequest}
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
Parameters:
Name | Type | Description |
---|---|---|
paymentMethodId |
PAYMENT_METHOD_ID | The payment method selected by the consumer |
- Source:
- See:
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