@palta-brain/web-sdk
Version:
350 lines • 18.4 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (g && (g = 0, op[0] && (_ = 0)), _) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
import React, { useState } from 'react';
import { BrainTreeCheckoutForm } from './BrainTreeClient/BrainTreeCheckoutForm';
import { PrimerCheckoutForm } from './PrimerClient/PrimerCheckoutForm';
import { createPaymentClient } from './CreatePaymentClient';
import { PaymentStatuses } from './PaymentStatuses';
function uuid4() {
// @ts-ignore
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, function (c) {
return (c ^
(crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16);
});
}
var initialState = {
customerId: uuid4(),
customerIdType: 'merchant-uuid',
orderId: uuid4(),
apiEndpoint: 'https://api.payments.dev.paltabrain.com',
pricePointIdent: 'pp_euro',
apiKey: 'c5e8c9fdaa8748649837371f9547e84f',
metadata: '{ "apple": 1}',
email: 'testing@paltabrain.com',
};
function App() {
var _this = this;
var _a = useState(initialState), state = _a[0], setState = _a[1];
var _b = useState({}), stateClient = _b[0], setStateClient = _b[1];
var onError = function (error, description) {
console.error(description, error);
};
var onPaymentStatusChange = function (status, paymentMethodType) {
console.log(status, paymentMethodType);
};
var initPayment = function () { return __awaiter(_this, void 0, void 0, function () {
var apiEndpoint, apiKey, pricePointIdent, orderId, customerId, customerIdType, metadata, email, firstPaymentBtn, client, formSettings, primerOption, braintreeOption, formWrapperSelector, paymentWrapperSelector, primerCheckoutFormSelector, braintreeCheckoutFormSelector, result, error_1;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
apiEndpoint = state.apiEndpoint, apiKey = state.apiKey, pricePointIdent = state.pricePointIdent, orderId = state.orderId, customerId = state.customerId, customerIdType = state.customerIdType, metadata = state.metadata, email = state.email;
_a.label = 1;
case 1:
_a.trys.push([1, 3, , 4]);
firstPaymentBtn = document.getElementById('first-payment');
if (firstPaymentBtn) {
firstPaymentBtn.disabled = true;
firstPaymentBtn.innerText = 'Loading...';
firstPaymentBtn.style.opacity = '0.5';
firstPaymentBtn.style.cursor = 'default';
}
client = createPaymentClient({
apiEndpoint: apiEndpoint,
apiKey: apiKey,
email: email,
metadata: JSON.parse(metadata),
onError: onError,
onPaymentStatusChange: onPaymentStatusChange,
}, { value: customerId, type: customerIdType });
setStateClient(client);
formSettings = {
orderId: orderId,
ident: pricePointIdent,
customer: {
id: { value: customerId, type: customerIdType },
},
email: email,
countryCode: 'US',
};
primerOption = {};
braintreeOption = {
createOrder: function (data) { return console.log(data); },
createPayment: function (data) { return console.log(data); },
onCancel: function (data) { return console.log(data); },
threeDSecureOnLookupComplete: function (data, details) {
return console.log(data, details);
},
threeDSecureValidated: function (value) {
return console.log('threeDSecureValidated', value);
},
onBeforePaymentCreate: function (e) {
return console.log('onBeforePaymentCreate', e);
},
styles: {
input: {
'font-size': '14px',
'font-family': 'Arial, sans-serif',
},
':focus': {
color: 'black',
},
},
applePayOptions: {
merchantCapabilities: ['supports3DS'],
supportedNetworks: ['visa', 'masterCard', 'amex', 'discover'],
total: {
label: 'Demo (Card is not charged)',
},
},
};
formWrapperSelector = 'preparation-form';
paymentWrapperSelector = 'payment-container';
primerCheckoutFormSelector = 'primer-checkout-form';
braintreeCheckoutFormSelector = 'braintree-checkout-container';
return [4 /*yield*/, client.showPaymentForm({
settings: formSettings,
primerOption: primerOption,
braintreeOption: braintreeOption,
formWrapperSelector: formWrapperSelector,
paymentWrapperSelector: paymentWrapperSelector,
primerCheckoutFormSelector: primerCheckoutFormSelector,
braintreeCheckoutFormSelector: braintreeCheckoutFormSelector,
})];
case 2:
result = _a.sent();
return [3 /*break*/, 4];
case 3:
error_1 = _a.sent();
console.error('Error during initialization:', error_1);
onError(error_1, 'Error during initialization');
return [3 /*break*/, 4];
case 4: return [2 /*return*/];
}
});
}); };
var refreshOnClick = function () { return __awaiter(_this, void 0, void 0, function () {
var pricePointIdent, customerId, customerIdType, email, orderId, formSettings;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
pricePointIdent = state.pricePointIdent, customerId = state.customerId, customerIdType = state.customerIdType, email = state.email;
orderId = uuid4();
formSettings = {
orderId: orderId,
ident: 'test234',
customer: {
id: { value: customerId, type: customerIdType },
emailAddress: email,
},
email: email,
};
return [4 /*yield*/, stateClient.updatePaymentForm(formSettings)];
case 1:
_a.sent();
return [2 /*return*/];
}
});
}); };
var onChangeValue = function (key, value) {
setState(function (state) {
var _a;
return (__assign(__assign({}, state), (_a = {}, _a[key] = value, _a)));
});
};
return (React.createElement("div", { style: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '100vh',
backgroundColor: '#f8f9fa',
fontFamily: 'serif',
padding: '80px',
} },
React.createElement("div", { id: "preparation-form", style: {
width: '500px',
border: '1px solid #ced4da',
borderRadius: '10px',
padding: '20px',
backgroundColor: '#ffffff',
} },
React.createElement("h2", { style: { color: '#343a40', fontWeight: 'bold', marginBottom: '20px' } }, "Preparation"),
React.createElement("div", { style: {
display: 'flex',
justifyContent: 'space-between',
marginBottom: '15px',
} },
React.createElement("label", { style: { color: '#495057', fontWeight: 'bold' } }, "Domain"),
React.createElement("input", { id: "apiEndpoint", className: "form-control", type: "text", value: state.apiEndpoint, style: {
width: '60%',
border: '1px solid #ced4da',
padding: '5px',
borderRadius: '5px',
}, onChange: function (event) {
return onChangeValue('apiEndpoint', event.target.value);
} })),
React.createElement("div", { style: {
display: 'flex',
justifyContent: 'space-between',
marginBottom: '15px',
} },
React.createElement("label", null, "Email"),
React.createElement("input", { id: "email", className: "form-control", type: "text", value: state.email, style: {
width: '60%',
border: '1px solid #ced4da',
padding: '5px',
borderRadius: '5px',
}, onChange: function (event) { return onChangeValue('email', event.target.value); } })),
React.createElement("div", { style: {
display: 'flex',
justifyContent: 'space-between',
marginBottom: '15px',
} },
React.createElement("label", null, "Api key"),
React.createElement("input", { id: "api_key", className: "form-control", type: "text", value: state.apiKey, style: {
width: '60%',
border: '1px solid #ced4da',
padding: '5px',
borderRadius: '5px',
}, onChange: function (event) { return onChangeValue('apiKey', event.target.value); } })),
React.createElement("div", { style: {
display: 'flex',
justifyContent: 'space-between',
marginBottom: '15px',
} },
React.createElement("label", null, "Customer ID"),
React.createElement("input", { id: "customer_id", className: "form-control", type: "text", value: state.customerId, style: {
width: '60%',
border: '1px solid #ced4da',
padding: '5px',
borderRadius: '5px',
}, onChange: function (event) {
return onChangeValue('customerId', event.target.value);
} })),
React.createElement("div", { style: {
display: 'flex',
justifyContent: 'space-between',
marginBottom: '15px',
} },
React.createElement("label", null, "Customer ID Type"),
React.createElement("select", { id: "customer_id_type", className: "form-control", value: state.customerIdType, style: {
width: '62%',
border: '1px solid #ced4da',
padding: '5px',
borderRadius: '5px',
}, onChange: function (event) {
return onChangeValue('customerIdType', event.target.value);
} },
React.createElement("option", { value: "merchant-uuid" }, "merchant-uuid"),
React.createElement("option", { value: "merchant-str" }, "merchant-str"))),
React.createElement("div", { style: {
display: 'flex',
justifyContent: 'space-between',
marginBottom: '15px',
} },
React.createElement("label", null, "Order ID"),
React.createElement("input", { id: "order_id", className: "form-control", type: "text", value: state.orderId, style: {
width: '60%',
border: '1px solid #ced4da',
padding: '5px',
borderRadius: '5px',
}, onChange: function (event) { return onChangeValue('orderId', event.target.value); } })),
React.createElement("div", { style: {
display: 'flex',
justifyContent: 'space-between',
marginBottom: '15px',
} },
React.createElement("label", null, "Price Point Ident"),
React.createElement("input", { id: "price_point_ident", className: "form-control", type: "text", value: state.pricePointIdent, style: {
width: '60%',
border: '1px solid #ced4da',
padding: '5px',
borderRadius: '5px',
}, onChange: function (event) {
return onChangeValue('pricePointIdent', event.target.value);
} })),
React.createElement("div", { style: {
display: 'flex',
justifyContent: 'space-between',
marginBottom: '15px',
} },
React.createElement("label", null, "Metadata"),
React.createElement("input", { id: "metadata", className: "form-control", type: "text", value: state.metadata, style: {
width: '60%',
border: '1px solid #ced4da',
padding: '5px',
borderRadius: '5px',
}, onChange: function (event) { return onChangeValue('metadata', event.target.value); } })),
React.createElement("button", { id: "first-payment", style: {
backgroundColor: '#007bff',
color: 'white',
padding: '10px 20px',
marginTop: '10px',
border: 'none',
borderRadius: '5px',
cursor: 'pointer',
}, onClick: initPayment }, "First payment"),
React.createElement("button", { id: "one-click-button", style: {
backgroundColor: '#6c757d',
color: 'white',
padding: '10px 20px',
marginTop: '10px',
border: 'none',
borderRadius: '5px',
cursor: 'default',
marginLeft: '10px',
} }, "One click")),
React.createElement("div", { id: "payment-container", style: {
display: 'none',
width: '700px',
} },
React.createElement(PrimerCheckoutForm, { refreshOnClick: refreshOnClick }),
React.createElement(BrainTreeCheckoutForm, { refreshOnClick: refreshOnClick }),
React.createElement(PaymentStatuses, null))));
}
export default App;
//# sourceMappingURL=App.js.map