You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
520 lines
17 KiB
520 lines
17 KiB
<?php
|
|
if (!defined('pp_allowed_access')) {
|
|
die('Direct access not allowed');
|
|
}
|
|
|
|
$payment_details = pp_get_payment_link($paymentid);
|
|
$payment_details_items = pp_get_payment_link_items($paymentid);
|
|
$setting = pp_get_settings();
|
|
?>
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title><?php echo $payment_details['response'][0]['pl_name']?> - <?php echo $setting['response'][0]['site_name']?></title>
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<link rel="icon" type="image/x-icon" href="<?php if(isset($setting['response'][0]['favicon'])){if($setting['response'][0]['favicon'] == "--"){echo 'https://cdn.piprapay.com/media/favicon.png';}else{echo $setting['response'][0]['favicon'];};}else{echo 'https://cdn.piprapay.com/media/favicon.png';}?>">
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
|
<!-- Stripe-like fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--stripe-blue: <?php echo $setting['response'][0]['active_tab_color']?>;
|
|
--stripe-blue-dark: <?php echo $setting['response'][0]['active_tab_text_color']?>;
|
|
--stripe-text: #1a1a1a;
|
|
--stripe-light-text: #6b7c93;
|
|
--stripe-border: #e0e6ed;
|
|
--stripe-light-bg: #f6f9fc;
|
|
--stripe-success: #24b47e;
|
|
--stripe-error: #ff5252;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
color: var(--stripe-text);
|
|
background-color: var(--stripe-light-bg);
|
|
line-height: 1.5;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.payment-container {
|
|
max-width: 480px;
|
|
margin: 2rem auto;
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02), 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
overflow: hidden;
|
|
border: 1px solid var(--stripe-border);
|
|
}
|
|
|
|
.payment-header {
|
|
padding: 24px;
|
|
border-bottom: 1px solid var(--stripe-border);
|
|
position: relative;
|
|
}
|
|
|
|
.payment-logo {
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
color: <?php echo $setting['response'][0]['global_text_color']?>;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.payment-logo-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
background: <?php echo $setting['response'][0]['global_text_color']?>;
|
|
border-radius: 4px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 8px;
|
|
color: white;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.payment-merchant {
|
|
position: absolute;
|
|
right: 24px;
|
|
top: 24px;
|
|
font-size: 14px;
|
|
color: var(--stripe-light-text);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.payment-merchant-logo {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 4px;
|
|
background: #f0f0f0;
|
|
margin-right: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.payment-body {
|
|
padding: 24px;
|
|
}
|
|
|
|
.payment-title {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
margin-bottom: 16px;
|
|
color: var(--stripe-text);
|
|
}
|
|
|
|
.payment-description {
|
|
color: var(--stripe-light-text);
|
|
font-size: 15px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.payment-amount {
|
|
background: var(--stripe-light-bg);
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
margin-bottom: 24px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.amount-label {
|
|
font-size: 14px;
|
|
color: var(--stripe-light-text);
|
|
}
|
|
|
|
.amount-value {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.payment-methods {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.payment-method {
|
|
border: 1px solid var(--stripe-border);
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
margin-bottom: 12px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.payment-method:hover {
|
|
border-color: var(--stripe-blue);
|
|
}
|
|
|
|
.payment-method.active {
|
|
border-color: var(--stripe-blue);
|
|
background-color: rgba(99, 91, 255, 0.03);
|
|
}
|
|
|
|
.payment-method.active::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: -1px;
|
|
right: -1px;
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
border-width: 0 24px 24px 0;
|
|
border-color: transparent var(--stripe-blue) transparent transparent;
|
|
}
|
|
|
|
.payment-method.active::before {
|
|
content: "\f00c";
|
|
font-family: "Font Awesome 6 Free";
|
|
font-weight: 900;
|
|
position: absolute;
|
|
top: 1px;
|
|
right: 1px;
|
|
color: white;
|
|
font-size: 10px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.payment-method-content {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.payment-method-icon {
|
|
width: 40px;
|
|
height: 28px;
|
|
background: white;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 16px;
|
|
border: 1px solid var(--stripe-border);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.payment-method-icon img {
|
|
width: 32px;
|
|
height: auto;
|
|
}
|
|
|
|
.payment-method-details h6 {
|
|
font-weight: 500;
|
|
margin-bottom: 2px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.payment-method-details small {
|
|
color: var(--stripe-light-text);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.payment-form {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.form-label {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--stripe-text);
|
|
margin-bottom: 6px;
|
|
display: block;
|
|
}
|
|
|
|
.form-control {
|
|
height: 44px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--stripe-border);
|
|
padding: 12px 16px;
|
|
font-size: 15px;
|
|
transition: all 0.2s ease;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.form-control:focus {
|
|
border-color: var(--stripe-blue);
|
|
box-shadow: 0 0 0 1px var(--stripe-blue);
|
|
outline: none;
|
|
}
|
|
|
|
.form-control::placeholder {
|
|
color: #c3cad9;
|
|
}
|
|
|
|
.card-input-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.card-icons {
|
|
position: absolute;
|
|
right: 12px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
display: flex;
|
|
gap: 4px;
|
|
}
|
|
|
|
.card-icon {
|
|
width: 28px;
|
|
height: 18px;
|
|
opacity: 0.3;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.card-icon.active {
|
|
opacity: 1;
|
|
}
|
|
|
|
.form-row {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.form-col {
|
|
flex: 1;
|
|
}
|
|
|
|
.btn-pay {
|
|
background: <?php echo $setting['response'][0]['primary_button_color']?>;
|
|
color: <?php echo $setting['response'][0]['button_text_color']?>;
|
|
border: none;
|
|
width: 100%;
|
|
padding: 14px;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
margin-top: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.btn-pay:hover {
|
|
background: <?php echo $setting['response'][0]['button_hover_color']?>;
|
|
color: <?php echo $setting['response'][0]['button_hover_text_color']?>;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn-pay:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.btn-pay i {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.payment-footer {
|
|
padding: 16px 24px;
|
|
border-top: 1px solid var(--stripe-border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.secure-payment {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 13px;
|
|
color: var(--stripe-light-text);
|
|
}
|
|
|
|
.secure-payment i {
|
|
color: var(--stripe-success);
|
|
margin-right: 8px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.payment-links {
|
|
display: flex;
|
|
gap: 16px;
|
|
}
|
|
|
|
.payment-links a {
|
|
color: var(--stripe-light-text);
|
|
font-size: 13px;
|
|
text-decoration: none;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.payment-links a:hover {
|
|
color: var(--stripe-blue);
|
|
}
|
|
|
|
/* Stripe-like card element */
|
|
.card-element {
|
|
height: 44px;
|
|
padding: 12px 16px;
|
|
border: 1px solid var(--stripe-border);
|
|
border-radius: 8px;
|
|
background: white;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Loading animation */
|
|
.processing-payment {
|
|
display: none;
|
|
text-align: center;
|
|
padding: 24px;
|
|
}
|
|
|
|
.spinner {
|
|
width: 24px;
|
|
height: 24px;
|
|
border: 3px solid rgba(255, 255, 255, 0.3);
|
|
border-radius: 50%;
|
|
border-top-color: white;
|
|
animation: spin 1s ease-in-out infinite;
|
|
display: inline-block;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Error state */
|
|
.error-message {
|
|
color: var(--stripe-error);
|
|
font-size: 13px;
|
|
margin-top: 8px;
|
|
display: none;
|
|
}
|
|
|
|
.has-error .form-control {
|
|
border-color: var(--stripe-error);
|
|
}
|
|
|
|
.has-error .form-label {
|
|
color: var(--stripe-error);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="payment-container">
|
|
<div class="payment-header">
|
|
<div class="payment-logo">
|
|
<img src="<?php if(isset($setting['response'][0]['logo'])){if($setting['response'][0]['logo'] == "--"){echo 'https://cdn.piprapay.com/media/logo.png';}else{echo $setting['response'][0]['logo'];};}else{echo 'https://cdn.piprapay.com/media/logo.png';}?>" style=" height: 30px; ">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="payment-body">
|
|
<div class="payment-title">Complete your payment</div>
|
|
<div class="payment-description">Enter your details to complete the purchase</div>
|
|
|
|
<div class="payment-methods">
|
|
<div class="payment-method active" data-method="card">
|
|
<div class="payment-method-content">
|
|
<div class="payment-method-details">
|
|
<h6><?php echo $payment_details['response'][0]['pl_name']?></h6>
|
|
<small><?php echo $payment_details['response'][0]['pl_description']?></small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="payment-amount">
|
|
<div class="amount-label">Total due</div>
|
|
<div class="amount-value"><?php echo number_format($payment_details['response'][0]['pl_amount'],2).$payment_details['response'][0]['pl_currency']?></div>
|
|
</div>
|
|
|
|
<form enctype="multipart/form-data" class="payment-form" id="card-form">
|
|
<input type="hidden" name="action" value="pp-invoice-payment-link">
|
|
<input type="hidden" name="pp-paymentid" value="<?php echo $paymentid?>">
|
|
<!-- Static Fields -->
|
|
<div class="form-group">
|
|
<label class="form-label">Customer Details</label>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<input type="text" class="form-control" name="full-name" placeholder="Full Name">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<input type="text" class="form-control" name="email-mobile" placeholder="Email or Mobile">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dynamic Fields -->
|
|
<div class="form-group">
|
|
<div class="row">
|
|
<?php foreach($payment_details_items['response'] as $row){ ?>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<input type="<?= htmlspecialchars($row['pl_form_type']) ?>"
|
|
class="form-control"
|
|
name="<?= $row['pl_form_type'] === 'file' ? $row['pl_field_name'] . '[]' : $row['pl_field_name'] ?>"
|
|
placeholder="<?= ucwords(str_replace('-', ' ', $row['pl_field_name'])) ?>"
|
|
<?= $row['pl_is_require'] === 'yes' ? 'required' : '' ?> <?php if($row['pl_form_type'] == "file"){echo "style='height:auto;'";}?>>
|
|
</div>
|
|
</div>
|
|
<?php } ?>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="response"></div>
|
|
|
|
<button class="btn-pay active" id="pay-button"><i class="fas fa-lock"></i> Pay <?php echo number_format($payment_details['response'][0]['pl_amount'],2).$payment_details['response'][0]['pl_currency']?></button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="payment-footer">
|
|
<div class="secure-payment">
|
|
<i class="fas fa-lock"></i>
|
|
<span>Payments are secure and encrypted with <a href="https://piprapay.com" target="blank" style="color:<?php echo $setting['response'][0]['global_text_color']?>;text-decoration: none;"><strong>PipraPay</strong></a></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
document.getElementById('card-form').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
$("#pay-button").html('<div class="spinner-border spinner-border-sm" role="status"> <span class="visually-hidden">Loading...</span> </div>');
|
|
$("pay-button").prop("disabled", true);
|
|
|
|
const form = document.getElementById('card-form');
|
|
const formData = new FormData(form);
|
|
|
|
fetch('', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(res => res.text())
|
|
.then(data => {
|
|
console.log(data);
|
|
$("#pay-button").html('<i class="fas fa-lock"></i> Pay <?php echo number_format($payment_details['response'][0]['pl_amount'],2).$payment_details['response'][0]['pl_currency']?>');
|
|
$("pay-button").prop("disabled", true);
|
|
|
|
var response = JSON.parse(data);
|
|
|
|
if (response.status === false) {
|
|
$("#response").html('<div class="alert alert-danger" style="margin-top: 20px; margin-bottom: -1px;" role="alert">'+response.message+'</div>');
|
|
} else {
|
|
$("#response").html('');
|
|
location.href = response.pp_url;
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|