payment-token-efi 3.0.3 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/README.md +33 -19
  2. package/assets/img/local-identificador-de-conta.png +0 -0
  3. package/dist/payment-token-efi-cjs.min.js +2 -2
  4. package/dist/payment-token-efi-esm.min.js +2 -2
  5. package/dist/payment-token-efi-umd.min.js +2 -2
  6. package/dist/payment-token-efi.min.js +2 -2
  7. package/examples/app-angular.ts +2 -0
  8. package/examples/app-browser.html +2 -0
  9. package/examples/app-react.js +2 -1
  10. package/examples/app-react.tsx +3 -1
  11. package/examples/app-vue.vue +2 -1
  12. package/index.html +72 -31
  13. package/package.json +1 -1
  14. package/types/payment-token-efi.d.ts +2 -0
package/index.html CHANGED
@@ -19,23 +19,28 @@
19
19
  // Configuração
20
20
  var inputIdentificadorConta = document.getElementById("identificadorConta");
21
21
  var inputValorTotal = document.getElementById("valorTotal");
22
+
22
23
  // Dados cartão
23
24
  var inputNumeroCartao = document.getElementById("numeroCartao");
24
25
  var inputBandeira = document.getElementById("bandeira");
25
26
  var inputMesVencimento = document.getElementById("mesVencimento");
26
27
  var inputAnoVencimento = document.getElementById("anoVencimento");
27
28
  var inputCvv = document.getElementById("cvv");
29
+ var inputNomeTitular = document.getElementById("nomeTitular");
30
+ var inputDocumentoTitular = document.getElementById("documentoTitular");
31
+
28
32
  // Resultados
29
33
  var inputParcelas = document.getElementById("opcoesParcelamento");
30
34
  var inputPaymentToken = document.getElementById("paymentToken");
31
35
  var inputmascaraCartao = document.getElementById("mascaraCartao");
36
+
32
37
  // Botão de acionamento
33
38
  var btnGerarToken = document.getElementById("gerarPaymentToken");
34
39
 
35
40
  const efi = EfiPay.CreditCard;
36
41
 
37
42
  efi
38
- .debugger(false)
43
+ .debugger(true)
39
44
  .setEnvironment('sandbox') // 'production' or 'sandbox';
40
45
 
41
46
  inputNumeroCartao.addEventListener("input", async function () {
@@ -104,13 +109,14 @@
104
109
  try {
105
110
  const resultPaymentToken = await efi
106
111
  .setAccount(inputIdentificadorConta.value)
107
- .setEnvironment('sandbox') // 'production' or 'sandbox'
108
112
  .setCreditCardData({
109
113
  brand: inputBandeira.value,
110
114
  number: inputNumeroCartao.value,
111
115
  cvv: inputCvv.value,
112
116
  expirationMonth: inputMesVencimento.value,
113
117
  expirationYear: inputAnoVencimento.value,
118
+ holderName: inputNomeTitular.value,
119
+ holderDocument: inputDocumentoTitular.value,
114
120
  reuse: false
115
121
  })
116
122
  .getPaymentToken();
@@ -151,6 +157,20 @@
151
157
  inputParcelas.addEventListener("change", function () {
152
158
  btnGerarToken.classList.remove('disabled');
153
159
  });
160
+
161
+ const populateYears = (selectId, range) => {
162
+ const currentYear = new Date().getFullYear();
163
+ const selectElement = document.getElementById('anoVencimento');
164
+
165
+ for (let i = 0; i <= range; i++) {
166
+ const year = currentYear + i;
167
+ const option = document.createElement("option");
168
+ option.value = year;
169
+ option.textContent = year;
170
+ selectElement.appendChild(option);
171
+ }
172
+ }
173
+ populateYears('anoVencimento', 10);
154
174
  });
155
175
  </script>
156
176
 
@@ -195,18 +215,26 @@
195
215
  <h4 class="mb-3">Configuração</h4>
196
216
  <div class="row">
197
217
  <div class="col-md-8">
198
- <label for="identificadorConta" class="form-label">Identificador de conta
218
+ <label for="identificadorConta" class="form-label">Identificador de conta *
219
+ <code data-bs-toggle="tooltip" data-bs-placement="top"
220
+ title="(String - '00000000000000000000000000000000')">
221
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
222
+ <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
223
+ <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
224
+ </svg>
225
+ </code>
199
226
  <code>
200
- <a target="_blank" href="https://s3.amazonaws.com/gerencianet-pub-prod-1/printscreen/2023/03/08/matheus.rodrigues/24fa15-dda30019-a643-409e-8813-c7cc68adcc40.png"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16">
227
+ <a target="_blank" href="./assets/img/local-identificador-de-conta.png"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16">
201
228
  <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
202
229
  <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
203
230
  </svg>onde encontro?</a>
204
231
  </code>
205
232
  </label>
206
- <input type="text" class="form-control" name="identificadorConta" id="identificadorConta">
233
+ <input type="text" class="form-control" name="identificadorConta" id="identificadorConta"
234
+ required>
207
235
  </div>
208
236
  <div class="col-md-4">
209
- <label for="valorTotal" class="form-label">Valor total
237
+ <label for="valorTotal" class="form-label">Valor total *
210
238
  <code data-bs-toggle="tooltip" data-bs-placement="top"
211
239
  title="(Integer) Ex: '24990' equivale a R$249,90">
212
240
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
@@ -215,7 +243,8 @@
215
243
  </svg>
216
244
  </code>
217
245
  </label>
218
- <input type="number" class="form-control" name="valorTotal" id="valorTotal" value="24990">
246
+ <input type="number" class="form-control" name="valorTotal" id="valorTotal" value="24990"
247
+ required>
219
248
  </div>
220
249
  </div>
221
250
  <!-- Fim - Configuração para funcionamento do script - Identificador de conta -->
@@ -225,7 +254,7 @@
225
254
  <!-- Início - Inputs com informações do cartão de crédito -->
226
255
  <h4 class="mb-3">Informação do cartão
227
256
  <code>
228
- <a target="_blank" href="https://www.4devs.com.br/gerador_de_numero_cartao_credito"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16">
257
+ <a target="_blank" href="https://www.invertexto.com/gerador-de-cartao-de-credito"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16">
229
258
  <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
230
259
  <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
231
260
  </svg>cartão fictício</a>
@@ -233,7 +262,7 @@
233
262
  </h4>
234
263
  <div class="row gy-3">
235
264
  <div class="col-md-7">
236
- <label for="numeroCartao" class="form-label">Número do cartão
265
+ <label for="numeroCartao" class="form-label">Número do cartão *
237
266
  <code data-bs-toggle="tooltip" data-bs-placement="top"
238
267
  title="(String - 'XXXXXXXXXXXXXXXX')"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
239
268
  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
@@ -241,12 +270,12 @@
241
270
  </svg>
242
271
  </code>
243
272
  </label>
244
- <input type="text" class="form-control" name="numeroCartao" id="numeroCartao">
273
+ <input type="text" class="form-control" name="numeroCartao" id="numeroCartao" required>
245
274
  </div>
246
275
 
247
276
  <div class="col-md-5">
248
277
  <!-- Bandeira será preenchida dinamicamente de acordo com o número do cartão informado -->
249
- <label for="bandeira" class="form-label">Bandeira
278
+ <label for="bandeira" class="form-label">Bandeira *
250
279
  <code data-bs-toggle="tooltip" data-bs-placement="top"
251
280
  title="(String - 'visa', 'mastercard', 'amex', 'elo', 'hipercard') Obtida a partir do número do cartão"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
252
281
  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
@@ -254,18 +283,18 @@
254
283
  </svg>
255
284
  </code>
256
285
  </label>
257
- <input type="text" class="form-control" name="bandeira" id="bandeira" readonly>
286
+ <input type="text" class="form-control" name="bandeira" id="bandeira" readonly required>
258
287
  </div>
259
288
 
260
289
  <div class="col-md-4">
261
- <label for="mesVencimento" class="form-label">Mês de vencimento
290
+ <label for="mesVencimento" class="form-label">Mês de vencimento *
262
291
  <code data-bs-toggle="tooltip" data-bs-placement="top" title="(String - 'MM')"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
263
292
  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
264
293
  <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
265
294
  </svg>
266
295
  </code>
267
296
  </label>
268
- <select class="form-select" name="mesVencimento" id="mesVencimento">
297
+ <select class="form-select" name="mesVencimento" id="mesVencimento" required>
269
298
  <option selected>01</option>
270
299
  <option>02</option>
271
300
  <option>03</option>
@@ -282,7 +311,7 @@
282
311
  </div>
283
312
 
284
313
  <div class="col-md-4">
285
- <label for="anoVencimento" class="form-label">Ano de vencimento
314
+ <label for="anoVencimento" class="form-label">Ano de vencimento *
286
315
  <code data-bs-toggle="tooltip" data-bs-placement="top" title="(String - 'YYYY')">
287
316
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
288
317
  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
@@ -290,25 +319,12 @@
290
319
  </svg>
291
320
  </code>
292
321
  </label>
293
- <select class="form-select" name="anoVencimento" id="anoVencimento">
294
- <option>2023</option>
295
- <option>2024</option>
296
- <option selected>2025</option>
297
- <option>2026</option>
298
- <option>2027</option>
299
- <option>2028</option>
300
- <option>2029</option>
301
- <option>2030</option>
302
- <option>2031</option>
303
- <option>2032</option>
304
- <option>2033</option>
305
- <option>2034</option>
306
- <option>2035</option>
322
+ <select class="form-select" name="anoVencimento" id="anoVencimento" required>
307
323
  </select>
308
324
  </div>
309
325
 
310
326
  <div class="col-md-4">
311
- <label for="cvv" class="form-label">Código de segurança (cvv)
327
+ <label for="cvv" class="form-label">Código de segurança (cvv) *
312
328
  <code data-bs-toggle="tooltip" data-bs-placement="top" title="(String - '123')">
313
329
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
314
330
  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
@@ -316,7 +332,32 @@
316
332
  </svg>
317
333
  </code>
318
334
  </label>
319
- <input type="text" class="form-control" name="cvv" id="cvv">
335
+ <input type="text" class="form-control" name="cvv" id="cvv" required>
336
+ </div>
337
+
338
+ <div class="col-md-6">
339
+ <label for="nomeTitular" class="form-label">Nome do titular do cartão *
340
+ <code data-bs-toggle="tooltip" data-bs-placement="top" title="(String - 'Nome Sobrenome')">
341
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
342
+ <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
343
+ <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
344
+ </svg>
345
+ </code>
346
+ </label>
347
+ <input type="text" class="form-control" name="nomeTitular" id="nomeTitular" required>
348
+ </div>
349
+
350
+ <div class="col-md-6">
351
+ <label for="documentoTitular" class="form-label">CPF/CNPJ do titular do cartão *
352
+ <code data-bs-toggle="tooltip" data-bs-placement="top"
353
+ title="(String - CPF: '94271564656' ou CNPJ: '99794567000144')">
354
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
355
+ <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
356
+ <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
357
+ </svg>
358
+ </code>
359
+ </label>
360
+ <input type="text" class="form-control" name="documentoTitular" id="documentoTitular" required>
320
361
  </div>
321
362
 
322
363
  <div class="col-md-12">
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "payment-token-efi",
3
- "version": "3.0.3",
3
+ "version": "3.1.0",
4
4
  "description": "Módulo Javascript que permite a criptografia dos dados do cartão do cartão a partir do browser do cliente para gerar o payment_token e identificar a bandeira do cartão.",
5
5
  "keywords": [
6
6
  "API",
package/types/payment-token-efi.d.ts CHANGED
@@ -37,6 +37,8 @@ declare module "payment-token-efi" {
37
37
  cvv: string;
38
38
  expirationMonth: string;
39
39
  expirationYear: string;
40
+ holderName: string;
41
+ holderDocument: string;
40
42
  reuse: boolean;
41
43
  }
42
44