@palta-brain/web-sdk
Version:
86 lines • 4.39 kB
JavaScript
import React from 'react';
import ApplePayButton from './ApplePayButton';
export var BrainTreeCheckoutForm = function (props) {
var onClick = function () {
props.refreshOnClick();
};
return (React.createElement("div", { id: "braintree-checkout-container", style: { display: 'none' } },
React.createElement("p", { className: "lead", style: {
fontFamily: 'Arial',
textAlign: 'center',
fontSize: '1.25rem',
fontWeight: '300',
color: '#212529',
} }, "Braintree"),
React.createElement("div", { id: "paypal-button", style: { display: 'none' } }),
React.createElement("div", { id: "card-container", style: { display: 'none' } },
React.createElement("div", { style: { marginBottom: '1rem' } },
React.createElement("div", { style: { marginBottom: '7px' } }, "Card Number"),
React.createElement("div", { style: {
height: '30px',
padding: '0.375rem 0.75rem',
fontSize: '1rem',
fontWeight: '400',
lineHeight: '1.5',
border: '1px solid #dee2e6',
borderRadius: '5px',
transition: 'border-color .15s ease-in-out,box-shadow .15s ease-in-out',
}, id: "card-number" })),
React.createElement("div", { style: { marginBottom: '1rem' } },
React.createElement("div", { style: { marginBottom: '7px' } }, "Expiration Date"),
React.createElement("div", { style: {
height: '30px',
padding: '0.375rem 0.75rem',
fontSize: '1rem',
fontWeight: '400',
lineHeight: '1.5',
border: '1px solid #dee2e6',
borderRadius: '5px',
transition: 'border-color .15s ease-in-out,box-shadow .15s ease-in-out',
}, id: "expiration-date" })),
React.createElement("div", { style: { marginBottom: '1rem' } },
React.createElement("div", { style: { marginBottom: '7px' } }, "CVV"),
React.createElement("div", { style: {
height: '30px',
padding: '0.375rem 0.75rem',
fontSize: '1rem',
fontWeight: '400',
lineHeight: '1.5',
border: '1px solid #dee2e6',
borderRadius: '5px',
transition: 'border-color .15s ease-in-out,box-shadow .15s ease-in-out',
}, id: "cvv" })),
window.ApplePaySession &&
window.ApplePaySession.supportsVersion(3) &&
window.ApplePaySession.canMakePayments() && React.createElement(ApplePayButton, null),
React.createElement("button", { id: "card-button", type: "submit", style: {
cursor: 'pointer',
width: '100%',
height: '50px',
padding: '0px 12px',
border: 'none',
textAlign: 'center',
transition: 'opacity 300ms ' +
'cubic-bezier(0.4, 0, 0.2, 1) 0s, ' +
'box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s, background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s',
color: 'white',
fontSize: '1.1rem',
background: 'rgb(36, 42, 47)',
borderRadius: '5px',
boxShadow: 'none',
fontFamily: 'serif',
marginBottom: '15px',
} }, "Pay with Card")),
React.createElement("button", { style: {
backgroundColor: '#007bff',
color: 'white',
padding: '10px 20px',
marginTop: '10px',
border: 'none',
borderRadius: '5px',
cursor: 'default',
marginLeft: '10px',
display: 'none',
}, id: "refresh", onClick: onClick }, "Refresh")));
};
//# sourceMappingURL=BrainTreeCheckoutForm.js.map