asset:GWM
This commit is contained in:
sriramv
parent
69c3cfdb91
commit
8fa4894c2f
23
.gitignore
vendored
23
.gitignore
vendored
@ -1,4 +1,23 @@
|
||||
/public
|
||||
|
||||
/vendor
|
||||
.env
|
||||
/writable
|
||||
/writable
|
||||
|
||||
# Ignore vendor folder
|
||||
public/vendor/
|
||||
|
||||
# Include assets folder and its files
|
||||
!public/assets/
|
||||
!public/square-js/
|
||||
!public/square-stylesheets/
|
||||
|
||||
public/assets/css
|
||||
public/assets/data
|
||||
public/assets/fonts
|
||||
public/assets/images
|
||||
public/assets/js
|
||||
public/assets/libs
|
||||
public/assets/member_images
|
||||
|
||||
!public/assets/member_css
|
||||
!public/assets/member_js
|
||||
|
||||
@ -67,14 +67,14 @@
|
||||
<div class="form-group row">
|
||||
<label for="inputEmail3" class="col-4 col-form-label">Description<span class="text-danger">*</span></label>
|
||||
<div class="col-7">
|
||||
<input type="text" required class="form-control" name="credit" value="<?php if(isset($PackageData)){echo $PackageData[0]['discription'];} ?>" placeholder="Description">
|
||||
<input type="text" required class="form-control" name="discription" value="<?php if(isset($PackageData)){echo $PackageData[0]['discription'];} ?>" placeholder="Description">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label for="inputEmail3" class="col-4 col-form-label">Offer Label<span class="text-danger">*</span></label>
|
||||
<div class="col-7">
|
||||
<input type="text" required class="form-control" name="cost" value="<?php if(isset($PackageData)){echo $PackageData[0]['offer_label'];} ?>" placeholder="Offer Label">
|
||||
<input type="text" required class="form-control" name="offer_label" value="<?php if(isset($PackageData)){echo $PackageData[0]['offer_label'];} ?>" placeholder="Offer Label">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
1534
public/assets/member_css/front-style.css
Normal file
1534
public/assets/member_css/front-style.css
Normal file
File diff suppressed because it is too large
Load Diff
315
public/assets/member_js/ajax.js
Normal file
315
public/assets/member_js/ajax.js
Normal file
@ -0,0 +1,315 @@
|
||||
$(document).ready(function(){
|
||||
$(".pack-submit").click(function(){
|
||||
id = $(this).attr("id");
|
||||
console.log(id);
|
||||
url = $('#url').val();
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: ''+url+'add_package_cartdata',
|
||||
data: { 'id' : id , 'c_token' : $('#c_token').val() },
|
||||
json: true,
|
||||
success: function(res) {
|
||||
res = JSON.parse(res);
|
||||
window.location = ''+url+'view_cart/'+res.token+'';
|
||||
},
|
||||
error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) }
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
$(document).ready(function(){
|
||||
$(".input-text").change(function(){
|
||||
id = $(this).attr("id");
|
||||
url = $('#url').val();
|
||||
var cost = $('#cost_'+id+'').val();
|
||||
$('.'+id+'').html('$'+$('#'+id+'').val() * cost+'');
|
||||
// console.log($('.0').text().replace("$", ""));
|
||||
subtotal = Number($('.0').text().replace("$", "")) + Number($('.1').text().replace("$", ""));
|
||||
$('.subtotal').html('$'+subtotal+'');
|
||||
pst = subtotal * $('#pst').val() / 100;
|
||||
$('.pst').html('$'+pst+'');
|
||||
gst = subtotal * $('#gst').val() / 100;
|
||||
$('.gst').html('$'+gst+'');
|
||||
total = subtotal + pst + gst;
|
||||
$('.total').html('$'+total+'')
|
||||
|
||||
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: ''+url+'change_count_onclick',
|
||||
data: { 'id' : $('#cart_token_id_'+id+'').val() , 'count' : $('#'+id+'').val() },
|
||||
json: true,
|
||||
success: function(res) {
|
||||
},
|
||||
error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) }
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
$(document).ready(function(){
|
||||
$(".editAddress").click(function(){
|
||||
id = $(this).attr("id");
|
||||
alert(id);
|
||||
url = $('#url').val();
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: ''+url+'member_address_form',
|
||||
data: { 'id' : id },
|
||||
json: true,
|
||||
success: function(res) {
|
||||
$('.address-form').css('display','block');
|
||||
$('.address-form').append(res);
|
||||
// window.location = ''+url+'view_cart/'+res.token+'';
|
||||
},
|
||||
error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) }
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
$(document).ready(function(){
|
||||
$(".submit").click(function(){
|
||||
var formData = $('#member_address').serialize();
|
||||
alert(formData);
|
||||
url = $('#url').val();
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: ''+url+'member_address_edit_or_add',
|
||||
data: formData,
|
||||
json: true,
|
||||
success: function(res) {
|
||||
if(res == true){
|
||||
$('.address-form').css('display','none');
|
||||
// $("#address_list").load(window.location + "#address_list");
|
||||
}
|
||||
},
|
||||
error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) }
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
$(document).ready(function(){
|
||||
$("#card-button").click(function(){
|
||||
// $('#loading-spinner-overlay').css('visibility', 'visible');
|
||||
|
||||
});
|
||||
|
||||
$(".select-address").click(function(){
|
||||
|
||||
var value = $(this).attr("value");
|
||||
$('#address_id').val(value);
|
||||
|
||||
});
|
||||
|
||||
var val = $('.checked').val();
|
||||
$('#address_id').val(val);
|
||||
});
|
||||
|
||||
$(document).ready(function(e){
|
||||
$("#address-btn").click(function(){
|
||||
// var formData = $('#member-address-save').serialize();
|
||||
url = $('#url').val();
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: ''+url+'member_address_edit',
|
||||
data: {
|
||||
id : $('#id').val(),
|
||||
name : $('#first_name').val(),
|
||||
last_name : $('#last_name').val(),
|
||||
address : $('#street_address').val(),
|
||||
gender : $("input[name='gender']:checked").val(),
|
||||
city : $('#city').val(),
|
||||
state : $('#state').val(),
|
||||
pincode : $('#pincode').val()
|
||||
},
|
||||
json: true,
|
||||
success: function(res) {
|
||||
if(res == true){
|
||||
// $("#member-address").load(location.href + " #member-address");
|
||||
console.log((res));
|
||||
$('.success-message').show();
|
||||
$('.success-message').delay(3000).fadeOut('slow');
|
||||
}
|
||||
},
|
||||
error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) }
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
$(document).ready(function(e){
|
||||
$("#pass-btn").click(function(){
|
||||
const passwordPattern = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,}/;
|
||||
if ($('#old_password').val() != '' && $('#new_password').val() != "" && $('#confirm_password').val() != "" )
|
||||
{
|
||||
if ($('#old_password').val() != $('#new_password').val())
|
||||
{
|
||||
if (passwordPattern.test($('#new_password').val()))
|
||||
{
|
||||
$('#error_np').html("");
|
||||
old_password = $('#old_password').val();
|
||||
new_password = $('#new_password').val();
|
||||
confirm_password = $('#confirm_password').val();
|
||||
var formData = $('#member-pass-save').serialize();
|
||||
url = $('#url').val();
|
||||
if (new_password == confirm_password)
|
||||
{
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: ''+url+'member_password_edit',
|
||||
data: formData,
|
||||
json: true,
|
||||
success: function(res) {
|
||||
if(res == 1){
|
||||
window.location.href = url+"member_logout";
|
||||
}
|
||||
else{
|
||||
$('#error_op_after_check').html("Please check your old password").css('color' , 'red');
|
||||
$('#old_password').val(old_password);
|
||||
$('#new_password').val(new_password);
|
||||
$('#old_password').val(old_password);
|
||||
$('#confirm_password').val('');
|
||||
}
|
||||
},
|
||||
error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) }
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
$('#error_op_after_check').html("Please check your old password").css('color' , 'red');
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
$('#error_np').html("Must contain at least one number 
and one uppercase 
and one special character like !@#$%^&*() 
and lowercase letter,
and at least 8 or more characters").css('color' , 'red');
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
$('#error_np').html("Old password and new passowrd is same").css('color' , 'red');
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
if ($('#old_password').val() == "" )
|
||||
{
|
||||
$('#error_op_after_check').html("Input required").css('color' , 'red');
|
||||
}
|
||||
if ($('#new_password').val() == "")
|
||||
{
|
||||
$('#error_np').html("Input required").css('color' , 'red');
|
||||
}
|
||||
if ($('#confirm_password').val() == "" )
|
||||
{
|
||||
$('#error_cp').html("Input required").css('color' , 'red');
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
$(document).ready(function(e){
|
||||
$('#old_password').on('keyup', function () {
|
||||
$('#error_op_after_check').html("");
|
||||
url = $('#url').val();
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: ''+url+'check_old_password',
|
||||
data: { id : $('#id').val() ,old_password : $('#old_password').val() },
|
||||
json: true,
|
||||
success: function(res) {
|
||||
console.log(res);
|
||||
if(res == 1){
|
||||
$('#error_op').html("Matching").css('color' , 'green')
|
||||
}
|
||||
else{
|
||||
if ($('#old_password').val().length == 0) {
|
||||
$('#error_op').html("");
|
||||
} else {
|
||||
$('#error_op').html("Not matching").css('color' , 'red');
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) }
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
$(document).ready(function(){
|
||||
$('#new_password, #confirm_password').on('keyup', function () {
|
||||
if ($('#confirm_password').val() == "" )
|
||||
{
|
||||
$('#error_cp').html('');
|
||||
}
|
||||
if ($('#new_password').val() == "" )
|
||||
{
|
||||
$('#error_np').html("");
|
||||
}
|
||||
if($('#confirm_password').val() != $('#new_password').val())
|
||||
{
|
||||
$('#error_cp').html("Password and confirm password doesn't match").css('color', 'red');
|
||||
}
|
||||
else
|
||||
{
|
||||
$('#error_cp').html("");
|
||||
}
|
||||
if ($('#new_password').val() == $('#confirm_password').val() && $('#confirm_password').val().length > 0 ) {
|
||||
// $('#error_cp').html('Matching').css('color', 'green');
|
||||
}
|
||||
else if($('#new_password').val().length == 0 || $('#confirm_password').val().length == 0){
|
||||
if ($('#confirm_password').val() == "" )
|
||||
$('#error_cp').html('');
|
||||
if ($('#new_password').val() != "" )
|
||||
$('#error_np').html("");
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
$(document).ready(function(e){
|
||||
$("#pincode").change(function(){
|
||||
zip_id = $("#pincode").val();
|
||||
url = $('#url').val();
|
||||
$.ajax({
|
||||
type: "post",
|
||||
url: ''+url+'zipcode_data',
|
||||
data: { 'id' : zip_id },
|
||||
json: true,
|
||||
success: function(res) {
|
||||
res = JSON.parse(res);
|
||||
if(res != 0){
|
||||
$('#city').val(res[0].city);
|
||||
$('#state').val(res[0].state);
|
||||
}
|
||||
},
|
||||
error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) }
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
// $(document).ready(function(){
|
||||
// $(".pack-submit").click(function(){
|
||||
// id = $(this).attr("id");
|
||||
// url = $('#url').val();
|
||||
// console.log($('#c_token').val())
|
||||
// $.ajax({
|
||||
// type: "post",
|
||||
// url: ''+url+'add_package_cartdata',
|
||||
// data: { 'id' : id , 'c_token' : $('#c_token').val() },
|
||||
// json: true,
|
||||
// success: function(res) {
|
||||
// res = JSON.parse(res);
|
||||
// console.log(res);
|
||||
// $('#c_token').val(res.token);
|
||||
// $('#'+id+'').html('View Cart');
|
||||
// $('#'+id+'').attr('href', ''+url+'view_cart/'+res.token+'')
|
||||
// },
|
||||
// error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) }
|
||||
// });
|
||||
// });
|
||||
// });
|
||||
50
public/square-js/sq-ach.js
Normal file
50
public/square-js/sq-ach.js
Normal file
@ -0,0 +1,50 @@
|
||||
async function ACHPay(buttonEl) {
|
||||
const accountHolderNameEl = document.getElementById('ach-account-holder-name');
|
||||
const achMessageEl = document.getElementById('ach-message');
|
||||
const achWrapperEl = document.getElementById('ach-wrapper');
|
||||
|
||||
let ach;
|
||||
try {
|
||||
ach = await window.payments.ach();
|
||||
achWrapperEl.style.display = 'block';
|
||||
} catch (e) {
|
||||
// If the ACH payment method is not supported by your account then
|
||||
// do not enable the #ach-account-holder-name input field
|
||||
if (e.name === 'PaymentMethodUnsupportedError') {
|
||||
achMessageEl.innerText = 'ACH payment is not supported by your account';
|
||||
accountHolderNameEl.disabled = true;
|
||||
}
|
||||
|
||||
// if we can't load ACH, we shouldn't bind events for the button
|
||||
return;
|
||||
}
|
||||
|
||||
async function eventHandler(event) {
|
||||
const accountHolderName = accountHolderNameEl.value.trim()
|
||||
if (accountHolderName === '') {
|
||||
achMessageEl.innerText = 'Please input full name';
|
||||
return;
|
||||
}
|
||||
|
||||
// Clear any existing messages
|
||||
window.paymentFlowMessageEl.innerText = '';
|
||||
|
||||
try {
|
||||
const result = await ach.tokenize({
|
||||
accountHolderName,
|
||||
});
|
||||
if (result.status === 'OK') {
|
||||
// Use global method from sq-payment-flow.js
|
||||
window.createPayment(result.token);
|
||||
}
|
||||
} catch (e) {
|
||||
if (e.message) {
|
||||
window.showError(`Error: ${e.message}`);
|
||||
} else {
|
||||
window.showError('Something went wrong');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
buttonEl.addEventListener('click', eventHandler);
|
||||
}
|
||||
35
public/square-js/sq-apple-pay.js
Normal file
35
public/square-js/sq-apple-pay.js
Normal file
@ -0,0 +1,35 @@
|
||||
async function ApplePay(buttonEl) {
|
||||
const paymentRequest = window.payments.paymentRequest(
|
||||
// Use global method from sq-payment-flow.js
|
||||
window.getPaymentRequest()
|
||||
);
|
||||
|
||||
let applePay;
|
||||
try {
|
||||
applePay = await window.payments.applePay(paymentRequest);
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
return;
|
||||
}
|
||||
|
||||
async function eventHandler(event) {
|
||||
// Clear any existing messages
|
||||
window.paymentFlowMessageEl.innerText = '';
|
||||
|
||||
try {
|
||||
const result = await applePay.tokenize();
|
||||
if (result.status === 'OK') {
|
||||
// Use global method from sq-payment-flow.js
|
||||
window.createPayment(result.token);
|
||||
}
|
||||
} catch (e) {
|
||||
if (e.message) {
|
||||
window.showError(`Error: ${e.message}`);
|
||||
} else {
|
||||
window.showError('Something went wrong');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
buttonEl.addEventListener('click', eventHandler);
|
||||
}
|
||||
35
public/square-js/sq-card-pay.js
Normal file
35
public/square-js/sq-card-pay.js
Normal file
@ -0,0 +1,35 @@
|
||||
async function CardPay(fieldEl, buttonEl) {
|
||||
// Create a card payment object and attach to page
|
||||
const card = await window.payments.card({
|
||||
style: {
|
||||
'.input-container.is-focus': {
|
||||
borderColor: '#006AFF'
|
||||
},
|
||||
'.message-text.is-error': {
|
||||
color: '#BF0020'
|
||||
}
|
||||
}
|
||||
});
|
||||
await card.attach(fieldEl);
|
||||
|
||||
async function eventHandler(event) {
|
||||
// Clear any existing messages
|
||||
window.paymentFlowMessageEl.innerText = '';
|
||||
|
||||
try {
|
||||
const result = await card.tokenize();
|
||||
if (result.status === 'OK') {
|
||||
// Use global method from sq-payment-flow.js
|
||||
window.createPayment(result.token);
|
||||
}
|
||||
} catch (e) {
|
||||
if (e.message) {
|
||||
window.showError(`Error: ${e.message}`);
|
||||
} else {
|
||||
window.showError('Something went wrong');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
buttonEl.addEventListener('click', eventHandler);
|
||||
}
|
||||
29
public/square-js/sq-google-pay.js
Normal file
29
public/square-js/sq-google-pay.js
Normal file
@ -0,0 +1,29 @@
|
||||
async function GooglePay(buttonEl) {
|
||||
const paymentRequest = window.payments.paymentRequest(
|
||||
// Use global method from sq-payment-flow.js
|
||||
window.getPaymentRequest()
|
||||
);
|
||||
const googlePay = await payments.googlePay(paymentRequest);
|
||||
await googlePay.attach(buttonEl);
|
||||
|
||||
async function eventHandler(event) {
|
||||
// Clear any existing messages
|
||||
window.paymentFlowMessageEl.innerText = '';
|
||||
|
||||
try {
|
||||
const result = await googlePay.tokenize();
|
||||
if (result.status === 'OK') {
|
||||
// Use global method from sq-payment-flow.js
|
||||
window.createPayment(result.token);
|
||||
}
|
||||
} catch (e) {
|
||||
if (e.message) {
|
||||
window.showError(`Error: ${e.message}`);
|
||||
} else {
|
||||
window.showError('Something went wrong');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
buttonEl.addEventListener('click', eventHandler);
|
||||
}
|
||||
220
public/square-js/sq-payment-flow.js
Normal file
220
public/square-js/sq-payment-flow.js
Normal file
@ -0,0 +1,220 @@
|
||||
async function SquarePaymentFlow() {
|
||||
|
||||
|
||||
|
||||
// Create card payment object and attach to page
|
||||
|
||||
CardPay(document.getElementById('card-container'), document.getElementById('card-button'));
|
||||
|
||||
|
||||
|
||||
//Create Apple pay instance
|
||||
|
||||
// ApplePay(document.getElementById('apple-pay-button'));
|
||||
|
||||
|
||||
|
||||
// Create Google pay instance
|
||||
|
||||
// GooglePay(document.getElementById('google-pay-button'));
|
||||
|
||||
|
||||
|
||||
//Create ACH payment
|
||||
|
||||
// ACHPay(document.getElementById('ach-button'));
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
window.payments = Square.payments(window.applicationId, window.locationId);
|
||||
|
||||
|
||||
|
||||
window.paymentFlowMessageEl = document.getElementById('payment-flow-message');
|
||||
|
||||
|
||||
|
||||
window.showSuccess = function(message) {
|
||||
|
||||
window.paymentFlowMessageEl.classList.add('success');
|
||||
|
||||
window.paymentFlowMessageEl.classList.remove('error');
|
||||
|
||||
window.paymentFlowMessageEl.innerText = message;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
window.showError = function(message) {
|
||||
|
||||
window.paymentFlowMessageEl.classList.add('error');
|
||||
|
||||
window.paymentFlowMessageEl.classList.remove('success');
|
||||
|
||||
window.paymentFlowMessageEl.innerText = message;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
window.createPayment = async function(token) {
|
||||
|
||||
$('#loading-spinner-overlay').css('visibility', 'visible');
|
||||
|
||||
var address = $('#member_address').serialize();
|
||||
|
||||
const dataJsonString = JSON.stringify({
|
||||
|
||||
token,
|
||||
|
||||
idempotencyKey: window.idempotencyKey,
|
||||
|
||||
amount : document.getElementById('amount').value,
|
||||
|
||||
order_id : document.getElementById('order_id').value,
|
||||
|
||||
address : address
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
try {
|
||||
|
||||
var getUrl = window.location;
|
||||
|
||||
path_name = "/"+getUrl.pathname.split('/')[1];
|
||||
|
||||
|
||||
|
||||
|
||||
const response = await fetch(window.location.origin+path_name+"/processPayment", {
|
||||
|
||||
method: 'POST',
|
||||
|
||||
headers: {
|
||||
|
||||
'Content-Type': 'application/json'
|
||||
|
||||
},
|
||||
|
||||
body: dataJsonString
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if (data.errors && data.errors.length > 0) {
|
||||
|
||||
if (data.errors[0].detail) {
|
||||
|
||||
console.log(data);
|
||||
|
||||
//window.showError(data.errors[0].detail);
|
||||
|
||||
var getUrl = window.location;
|
||||
|
||||
path_name = "/"+getUrl.pathname.split('/')[1];
|
||||
|
||||
window.location.href = window.location.origin+path_name+"/payment_failed/"+document.getElementById('order_id').value;
|
||||
|
||||
} else {
|
||||
|
||||
window.showError('Payment Failed.');
|
||||
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
var getUrl = window.location;
|
||||
|
||||
path_name = "/"+getUrl.pathname.split('/')[1];
|
||||
|
||||
window.location.href = window.location.origin+path_name+"/payment_success/"+document.getElementById('order_id').value;
|
||||
|
||||
// window.showSuccess('Payment Successful!');
|
||||
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
|
||||
console.error('Error:', error);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Hardcoded for testing purpose, only used for Apple Pay and Google Pay
|
||||
|
||||
window.getPaymentRequest = function() {
|
||||
|
||||
return {
|
||||
|
||||
countryCode: window.country,
|
||||
|
||||
currencyCode: window.currency,
|
||||
|
||||
lineItems: [
|
||||
|
||||
{ amount: '1.23', label: 'Cat', pending: false },
|
||||
|
||||
{ amount: '4.56', label: 'Dog', pending: false },
|
||||
|
||||
],
|
||||
|
||||
requestBillingContact: false,
|
||||
|
||||
requestShippingContact: true,
|
||||
|
||||
shippingContact: {
|
||||
|
||||
addressLines: ['123 Test St', ''],
|
||||
|
||||
city: 'San Francisco',
|
||||
|
||||
countryCode: 'US',
|
||||
|
||||
email: 'test@test.com',
|
||||
|
||||
familyName: 'Last Name',
|
||||
|
||||
givenName: 'First Name',
|
||||
|
||||
phone: '1111111111',
|
||||
|
||||
postalCode: '94109',
|
||||
|
||||
state: 'CA',
|
||||
|
||||
},
|
||||
|
||||
shippingOptions: [
|
||||
|
||||
{ amount: '0.00', id: 'FREE', label: 'Free' },
|
||||
|
||||
{ amount: '9.99', id: 'XP', label: 'Express' },
|
||||
|
||||
],
|
||||
|
||||
total: { amount: '1.00', label: 'Total', pending: false },
|
||||
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
SquarePaymentFlow();
|
||||
125
public/square-stylesheets/sq-payment.css
Normal file
125
public/square-stylesheets/sq-payment.css
Normal file
@ -0,0 +1,125 @@
|
||||
.payment-form {
|
||||
padding: 50px 0px 50px 0px;
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
margin: 40px auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.payment-form {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
.payment-form {
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
height: 110vh;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.payment-form {
|
||||
padding: 30px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
#apple-pay-button {
|
||||
height: 48px;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
-webkit-appearance: -apple-pay-button;
|
||||
-apple-pay-button-type: plain;
|
||||
-apple-pay-button-style: black;
|
||||
}
|
||||
|
||||
#fast-checkout {
|
||||
background: #fafafa;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#fast-checkout input {
|
||||
border-radius: 6px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#fast-checkout .wrapper {
|
||||
max-width: 343px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#fast-checkout button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#fast-checkout button#apple-pay-button {
|
||||
background: white;
|
||||
color: black;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
justify-content: center;
|
||||
line-height: 18px;
|
||||
padding: 13px;
|
||||
}
|
||||
|
||||
#fast-checkout .border {
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
margin: 30px 0;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
text-transform: uppercase;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#fast-checkout .border span {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
background: #fafafa;
|
||||
padding: 0 10px;
|
||||
left: calc(50% - 1em - 5px);
|
||||
}
|
||||
|
||||
#ach-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#ach-wrapper input:first-of-type {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#ach-message {
|
||||
width: 100%;
|
||||
margin-top: 11px;
|
||||
margin-bottom: 11px;
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
color: #bf0020;
|
||||
}
|
||||
|
||||
#ach-message:empty:before, #message:empty:before {
|
||||
content: "\200b";
|
||||
}
|
||||
|
||||
#payment-flow-message {
|
||||
width: 100%;
|
||||
margin-top: 11px;
|
||||
margin-bottom: 11px;
|
||||
height: 100px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#payment-flow-message.error {
|
||||
color: #bf0020;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
#payment-flow-message.success {
|
||||
color: #3374ff;
|
||||
}
|
||||
68
public/square-stylesheets/style.css
Normal file
68
public/square-stylesheets/style.css
Normal file
@ -0,0 +1,68 @@
|
||||
@import url(https://square-fonts-production-f.squarecdn.com/square-sans.min.css);
|
||||
|
||||
html {
|
||||
color: #151c1f;
|
||||
font-family: var(--square-sans-text);
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
|
||||
background: #ffffff;
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
font-family: var(--square-sans-text);
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: var(--square-sans-text);
|
||||
margin: 0 auto 20px auto;
|
||||
background-color: #3374ff;
|
||||
padding: 12px 16px;
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
cursor: pointer;
|
||||
filter: brightness(90%);
|
||||
-webkit-transition: all 30ms ease-in-out;
|
||||
-moz-transition: all 30ms ease-in-out;
|
||||
-ms-transition: all 30ms ease-in-out;
|
||||
-o-transition: all 30ms ease-in-out;
|
||||
transition: all 30ms ease-in-out;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
padding-left: 16px;
|
||||
background-color: #fff;
|
||||
font-size: 16px;
|
||||
border: 1px solid #d9d9d9;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user