Iframe
In this option you can create your keys to execute the link payments within your own development.
The process has 5 steps:Step 1: In the payment menu, choose Payin --> Checkout --> IFRAME KEYS.
Step 2: In this module you will find the button "Add Key Pairs +." When you select it, a new screen will be activated asking you to complete the required fields: Title of your product or service, Domain, Select Country, Select Destination Account, Currency.
Step 3: Enter the information of your merchant in each of the fields, if they are correct, select "Accept", otherwise "Cancel".
Step 4: When you select "Accept", the system will confirm the creation of your keys and will show the generated private key.
- With these keys, you can embed our webcheckout with your shopping cart.
- You can visualize the list of created keys and the status; additionally, you can delete or block them.
Step 5: With the generated keys (public and private), a session token is created for the web checkout, which is rendered within the iframe.
- Step 1: This is resolved with an endpoint and a custom server. It is of utmost importance that the private key is stored securely on your server and not included on the front end as shown in the example. Then,
- Step 2: Create session You need to make a request to our endpoint https://api.stage.localpayment.com/bff/webcheckout/createsession passing the bodyMessage, signature, and publicKey as indicated in the example to obtain the session token.
- Step 3: SET SRC (or use the createSession endpoint redirect) Finally, extract the redirectUrl property from the session token and assign it to the iframe.src.
Example:
<html lang="en">
<head>
<meta name="referrer" content="origin">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="A stepper plugin for Bootstrap 4.">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bs-stepper/dist/css/bs-stepper.min.css">
</head>
<body style="overflow-x: hidden;">
<style>
#frame {
width: 134%;
height: 120vh;
-ms-zoom: 0.75;
-moz-transform: scale(0.75);
-moz-transform-origin: 0 0;
-o-transform: scale(0.75);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.75);
-webkit-transform-origin: 0 0;
}
</style>
<nav class="navbar navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">CLIENT PAYMENT PAGE</a>
</div>
</nav>
<div class="mb-5 p-4 bg-white shadow-sm">
<div id="stepper1" class="bs-stepper linear">
<div class="bs-stepper-header" role="tablist">
<div class="step" data-target="#test-l-1">
<button type="button" class="step-trigger" role="tab" id="stepper1trigger1" aria-controls="test-l-1" aria-selected="true" disabled="disabled">
<span class="bs-stepper-circle">1</span>
<span class="bs-stepper-label">Shopping Cart</span>
</button>
</div>
<div class="bs-stepper-line"></div>
<div class="step" data-target="#test-l-2">
<button type="button" class="step-trigger" role="tab" id="stepper1trigger2" aria-controls="test-l-2" aria-selected="false" disabled="disabled">
<span class="bs-stepper-circle">2</span>
<span class="bs-stepper-label">Confirm</span>
</button>
</div>
<div class="bs-stepper-line"></div>
<div class="step active" data-target="#test-l-3">
<button type="button" class="step-trigger" role="tab" id="stepper1trigger3" aria-controls="test-l-3" aria-selected="false" disabled="disabled">
<span class="bs-stepper-circle">3</span>
<span class="bs-stepper-label">Payment</span>
</button>
</div>
</div>
<div class="bs-stepper-content">
<iframe
id="frame"
name="resultFrame"
width="100%"
>
Your browser does not accept iFrames
</iframe>
</div>
</div>
</div>
<script>
window.onload = onload
onload = async (event) => {
//Simulate the following process according to the needs of your development
//VARS
//Cart items
const items = [{"title":"item 1","quantity":3,"unitPrice":10000},{"title":"item 2","quantity":2,"unitPrice":5000},{"title":"item 3","quantity":3,"unitPrice":11000}]
//IFRAME KEY
const publicKey = 'your public key'
//PRIVATE KEY (DECLARE IN PRIVATE SERVER)
const privateKey = 'your private key'
//TOTAL + ITEMS + MERCHANT + ID
const content = {items,merchant,externalId}
//STEP 1: SING content (SOLVE IN PRIVATE SERVER)
const singFormData = new FormData()
singFormData.append('privateKey', privateKey)
singFormData.append('message', JSON.stringify(content))
const response = await fetch("desarrollar un endpoint propio para la primer pegada donde firma/encripta el body",{
method: 'POST',
body: singFormData,
});
const sing = await response.text()
//STEP 2: Create session
const formData = new FormData();
formData.append('bodyMessage', JSON.stringify(content));
formData.append('signature', sing);
formData.append('publicKey', publicKey);
const createSession = await fetch("https://api.stage.localpayment.com/bff/webcheckout/createsession",{
method: 'POST',
body: formData
});
//STEP3: SET SRC (or use the createSession endpoint redirect)
const redirectData = await createSession.json()
const iframe = document.getElementById("frame");
iframe.src = redirectData.redirectUrl
};
</script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bs-stepper/dist/js/bs-stepper.min.js"></script>
</body>
</html>Info
The body of the merchant object is the same one used for payins by API.
Example of the Algorithm to Sign the Body:
public static string Sign(string content, string privateKey)
{
var contentData = Encoding.ASCII.GetBytes(content);
var privateKeyData = Convert.FromBase64String(privateKey);
using var rsa = new RSACryptoServiceProvider();
using var sha1 = SHA1.Create();
rsa.ImportRSAPrivateKey(privateKeyData, out _);
return Convert.ToBase64String(rsa.SignData(contentData, sha1));
}Updated 2 months ago