payment-token-efi 3.1.0 → 3.1.2
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.
- package/CHANGELOG.md +86 -0
- package/README.md +12 -7
- package/dist/payment-token-efi-cjs.min.js +2 -2
- package/dist/payment-token-efi-esm.min.js +2 -2
- package/dist/payment-token-efi-umd.min.js +2 -2
- package/dist/payment-token-efi.min.js +2 -2
- package/examples/app-angular.ts +3 -2
- package/examples/webview-react-native.js +117 -0
- package/index.html +2 -2
- package/package.json +1 -1
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import React, { useRef } from "react";
|
|
2
|
+
import { View, Button, StyleSheet, Text } from "react-native";
|
|
3
|
+
import { WebView } from "react-native-webview";
|
|
4
|
+
|
|
5
|
+
const PaymentScreen = () => {
|
|
6
|
+
const webViewRef = useRef(null); // Referência ao WebView
|
|
7
|
+
|
|
8
|
+
// HTML do WebView em Base64
|
|
9
|
+
const webViewHtml = `
|
|
10
|
+
<!DOCTYPE html>
|
|
11
|
+
<html lang="en">
|
|
12
|
+
<head>
|
|
13
|
+
<meta charset="UTF-8" />
|
|
14
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
15
|
+
<script src="https://cdn.jsdelivr.net/npm/payment-token-efi/dist/payment-token-efi-umd.min.js"></script>
|
|
16
|
+
</head>
|
|
17
|
+
<body>
|
|
18
|
+
<script>
|
|
19
|
+
async function generateToken(data) {
|
|
20
|
+
try {
|
|
21
|
+
const result = await EfiPay.CreditCard
|
|
22
|
+
.setAccount("Identificador_de_conta_aqui")
|
|
23
|
+
.setEnvironment("production") // 'production' ou 'sandbox'
|
|
24
|
+
.setCreditCardData(data)
|
|
25
|
+
.getPaymentToken();
|
|
26
|
+
|
|
27
|
+
window.ReactNativeWebView.postMessage(
|
|
28
|
+
JSON.stringify({
|
|
29
|
+
payment_token: result.payment_token,
|
|
30
|
+
card_mask: result.card_mask,
|
|
31
|
+
})
|
|
32
|
+
);
|
|
33
|
+
} catch (error) {
|
|
34
|
+
window.ReactNativeWebView.postMessage(
|
|
35
|
+
JSON.stringify({
|
|
36
|
+
error: {
|
|
37
|
+
code: error.code,
|
|
38
|
+
name: error.error,
|
|
39
|
+
message: error.error_description,
|
|
40
|
+
},
|
|
41
|
+
})
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
</script>
|
|
46
|
+
</body>
|
|
47
|
+
</html>
|
|
48
|
+
`;
|
|
49
|
+
|
|
50
|
+
const encodedHtml = `data:text/html;base64,${Buffer.from(webViewHtml).toString("base64")}`;
|
|
51
|
+
|
|
52
|
+
// Dados dinâmicos a serem enviados para o WebView
|
|
53
|
+
const sendPaymentDataToWebView = () => {
|
|
54
|
+
const cardData = {
|
|
55
|
+
brand: 'visa',
|
|
56
|
+
number: '4485785674290087',
|
|
57
|
+
cvv: '123',
|
|
58
|
+
expirationMonth: '05',
|
|
59
|
+
expirationYear: '2031',
|
|
60
|
+
holderName: "Gorbadoc Oldbuck",
|
|
61
|
+
holderDocument: "94271564656",
|
|
62
|
+
reuse: false
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
const script = `
|
|
66
|
+
(function() {
|
|
67
|
+
const data = ${JSON.stringify(cardData)};
|
|
68
|
+
generateToken(data);
|
|
69
|
+
})();
|
|
70
|
+
`;
|
|
71
|
+
|
|
72
|
+
webViewRef.current.injectJavaScript(script);
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
const handleWebViewMessage = (event) => {
|
|
76
|
+
const data = JSON.parse(event.nativeEvent.data);
|
|
77
|
+
|
|
78
|
+
if (data.payment_token) {
|
|
79
|
+
console.log("Token de Pagamento:", data.payment_token);
|
|
80
|
+
alert(`Token Gerado: ${data.payment_token}`);
|
|
81
|
+
} else if (data.error) {
|
|
82
|
+
console.error("Erro:", data.error);
|
|
83
|
+
alert(`Erro: ${data.error.message}`);
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
return (
|
|
88
|
+
<View style={styles.container}>
|
|
89
|
+
<Text style={styles.title}>Efí Bank Payment Token Cartão</Text>
|
|
90
|
+
<Button title="Enviar Dados para o WebView" onPress={sendPaymentDataToWebView} />
|
|
91
|
+
<WebView
|
|
92
|
+
ref={webViewRef}
|
|
93
|
+
source={{ uri: encodedHtml }}
|
|
94
|
+
onMessage={handleWebViewMessage}
|
|
95
|
+
style={styles.webview}
|
|
96
|
+
/>
|
|
97
|
+
</View>
|
|
98
|
+
);
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
const styles = StyleSheet.create({
|
|
102
|
+
container: {
|
|
103
|
+
flex: 1,
|
|
104
|
+
padding: 10,
|
|
105
|
+
},
|
|
106
|
+
title: {
|
|
107
|
+
textAlign: "center",
|
|
108
|
+
fontSize: 18,
|
|
109
|
+
marginVertical: 10,
|
|
110
|
+
},
|
|
111
|
+
webview: {
|
|
112
|
+
flex: 1,
|
|
113
|
+
marginTop: 10,
|
|
114
|
+
},
|
|
115
|
+
});
|
|
116
|
+
|
|
117
|
+
export default PaymentScreen;
|
package/index.html
CHANGED
|
@@ -159,11 +159,11 @@
|
|
|
159
159
|
});
|
|
160
160
|
|
|
161
161
|
const populateYears = (selectId, range) => {
|
|
162
|
-
const
|
|
162
|
+
const nextYear = new Date().getFullYear() + 1;
|
|
163
163
|
const selectElement = document.getElementById('anoVencimento');
|
|
164
164
|
|
|
165
165
|
for (let i = 0; i <= range; i++) {
|
|
166
|
-
const year =
|
|
166
|
+
const year = nextYear + i;
|
|
167
167
|
const option = document.createElement("option");
|
|
168
168
|
option.value = year;
|
|
169
169
|
option.textContent = year;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "payment-token-efi",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.2",
|
|
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",
|