<script src="https://checkout.stripe.com/checkout.js"></script>
<div class="explore-page-container">
<div class="sub__header go_pro_sub_header">
<div class="container">
<h3>{{LANG upgrade_to_pro}}</h3>
</div>
<svg width="100%" height="50px" class="pg_gray_svg" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 75"><path fill="currentColor" d="M1963,327H-105V65A2647.49,2647.49,0,0,1,431,19c217.7,3.5,239.6,30.8,470,36,297.3,6.7,367.5-36.2,642-28a2511.41,2511.41,0,0,1,420,48"></path></svg>
</div>
<div class="container">
<div class="explore-people-container">
<h2 class="text-center">{{LANG join_pro}}</h2>
<h4 class="text-center">{{LANG enjoy_more_features}}</h4>
<div class="row people">
<div class="col-lg-2 col-md-1"></div>
<div class="col-lg-4 col-md-5">
<div class="text-center go_pro_plan free_plan">
<h5>{{LANG free_member}}</h5>
<div class="pricing_p_price"><sup><?php echo $context['currency_symbol']; ?></sup><b>0.00</b></div>
<hr>
<p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#fd9e97" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path></svg> {{LANG featured_member}}</p>
<p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#fd9e97" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path></svg> {{LANG verified_badge}}</p>
<?php if ($config['boosted_posts'] > 0) { ?>
<p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#fd9e97" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path></svg> {{LANG posts_promote_up}} 0 <?php if ($config['boosted_posts'] > 1) { ?>{{LANG posts}}<?php }else{ ?>{{LANG post}}<?php } ?></p>
<?php } ?>
<p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#fd9e97" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path></svg> {{LANG profile_Style}}</p>
<p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#fd9e97" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path></svg> {{LANG get_full_access}}</p>
<?php if($config['subscription_on_signup'] == 'off'){?>
<div class="button_go_pro">
<button class="btn btn-default btn-mat" onclick="location.href='{{CONFIG site_url}}';"><span>{{LANG stay_free}}</span></button>
</div>
<?php } ?>
</div>
</div>
<div class="col-lg-4 col-md-5">
<div class="text-center go_pro_plan pro_plan">
<h5>{{LANG pro_member}}</h5>
<div class="pricing_p_price"><sup><?php echo $context['currency_symbol']; ?></sup><b><?php echo $config['pro_price']; ?></b><sub>/m</sub></div>
<hr>
<p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#41EAC5" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg> {{LANG featured_member}}</p>
<p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#41EAC5" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg> {{LANG verified_badge}}</p>
<?php if ($config['boosted_posts'] > 0) { ?>
<p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#41EAC5" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg> {{LANG posts_promote_up}} {{CONFIG boosted_posts}} <?php if ($config['boosted_posts'] > 1) { ?>{{LANG posts}}<?php }else{ ?>{{LANG post}}<?php } ?></p>
<?php } ?>
<p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#41EAC5" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg> {{LANG profile_Style}}</p>
<p><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#41EAC5" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg> {{LANG get_full_access}}</p>
<div class="button_go_pro button_go_pro_upgrade">
<button class="btn btn-main btn-mat" onclick="Pxp_GetPaymentMethods('pro');"><span>{{LANG upgrade}}</span></button>
</div>
</div>
</div>
<div class="col-lg-2 col-md-1"></div>
</div>
</div>
</div>
</div>
<div class="confirm--modal go_pro--modal" style="display: none !important;">
<div class="confirm--modal--inner">
<div class="confirm--modal--body">
<h5>{{LANG choose_method}}</h5>
<div class="payment_methods_modal">
</div>
</div>
<div class="confirm--modal--footer">
<button class="btn btn-default" data-confirm--modal-dismiss>{{LANG cancel}}</button>
</div>
</div>
</div>
<div class="confirm--modal bank_payment--modal" style="display: none !important;">
<div class="confirm--modal--inner">
<div class="confirm--modal--body dt_bank_trans_modal">
<h5>{{LANG bank_transfer}}</h5>
<div class="bank_alert"></div>
<?php echo $config['bank_description'];?>
<br>
<br>
<?php if (!empty($config['bank_transfer_note'])) { ?>
<div class="dt_user_profile">
<ul class="dt_prof_vrfy">
<li><?php echo $config['bank_transfer_note'];?></li>
</ul>
</div>
<?php } ?>
<div class="fak_image">
<div id="fake_img_holder"></div>
<div class="upload_fk_image" onclick="document.getElementById('upload-image').click(); return false">
<div class="upload_fk_image_content">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z" /></svg> {{LANG upload_file}}
</div>
</div>
</div>
</div>
<div class="confirm--modal--footer">
<button class="btn btn-default" data-confirm--modal-dismiss>{{LANG cancel}}</button>
<button class="btn btn-danger btn-red send_bank">{{LANG send}}</button>
<form class="bank_transfer_form">
<input class="hidden" id="upload-image" type="file" name="image" multiple accept="image/*">
<input class="hidden" type="text" name="type" value="pro">
<input type="reset" id="configreset" value="Reset" class="hidden">
</form>
</div>
</div>
</div>
<div class="modal fade matdialog" id="2checkout_modal" role="dialog" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></span></button>
<h4 class="modal-title">{{LANG 2checkout}}</h4>
</div>
<form class="form form-horizontal" method="post" id="2checkout_form" action="#">
<div class="modal-body twocheckout_modal">
<div id="2checkout_alert"></div>
<div class="clear"></div>
<div class="row">
<div class="col-md-6">
<div class="pg_mat_input">
<input type="text" value="<?php echo($pt->user->name) ?>" id="card_name" placeholder="{{LANG name}}" autocomplete="off">
<label for="card_name">{{LANG name}}</label>
</div>
</div>
<div class="col-md-6">
<div class="pg_mat_input">
<input type="text" value="<?php echo($pt->user->address) ?>" id="card_address" placeholder="{{LANG address}}" autocomplete="off">
<label for="card_address">{{LANG address}}</label>
</div>
</div>
<div class="col-md-6">
<div class="pg_mat_input">
<input type="text" value="<?php echo($pt->user->city) ?>" id="card_city" placeholder="{{LANG city}}" autocomplete="off">
<label for="card_city">{{LANG city}}</label>
</div>
</div>
<div class="col-md-6">
<div class="pg_mat_input">
<input type="text" value="<?php echo($pt->user->state) ?>" id="card_state" placeholder="{{LANG state}}" autocomplete="off">
<label for="card_state">{{LANG state}}</label>
</div>
</div>
<div class="col-md-6">
<div class="pg_mat_input">
<input type="text" value="<?php echo($pt->user->zip) ?>" id="card_zip" placeholder="{{LANG zip}}" autocomplete="off">
<label for="card_zip">{{LANG zip}}</label>
</div>
</div>
<div class="col-md-6">
<div class="pg_mat_input">
<select id="card_country" name="card_country">
<?php
$countries = '';
foreach ($context['countries_name'] as $key => $value) {
$selected = '';
//if (IS_LOGGED) {
// $selected = ($key == $pt->user->country_id) ? 'selected' : '';
//}
$countries .= '<option value="' . $key . '" ' . $selected . '>' . $value . '</option>';
}
echo $countries;
?>
</select>
</div>
</div>
<div class="col-md-6">
<div class="pg_mat_input">
<input type="email" value="<?php echo($pt->user->email) ?>" id="card_email" placeholder="{{LANG email}}" autocomplete="off">
<label for="card_email">{{LANG email}}</label>
</div>
</div>
<div class="col-md-6">
<div class="pg_mat_input">
<input type="tel" value="<?php echo($pt->user->phone_number) ?>" id="card_phone" placeholder="{{LANG Phone number}}" autocomplete="off">
<label for="card_phone">{{LANG Phone number}}</label>
</div>
</div>
</div>
<div class="clear"></div>
<hr>
<div class="two_check_card">
<h4 class="modal-title">{{LANG Card Details}}</h4>
<hr>
<div class="row">
<div class="col-md-12">
<div class="pg_mat_input">
<input id="card_number" name="card_number" type="hidden" class="form-control input-md" autocomplete="off">
<input type="text" id="_number_" placeholder="{{LANG Card number}}" autocomplete="off">
<label for="_number_">{{LANG Card number}}</label>
</div>
</div>
<div class="col-md-4">
<div class="pg_mat_input">
<select id="card_month" name="card_month">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="pg_mat_input">
<select id="card_year" name="card_year">
<?php for ($i=date('Y'); $i <= date('Y')+15; $i++) { ?>
<option value="<?php echo($i) ?>"><?php echo($i) ?></option>
<?php } ?>
</select>
</div>
</div>
<div class="col-md-4">
<div class="pg_mat_input">
<input id="card_cvc" name="card_cvc" type="text" autocomplete="off" placeholder="CVC" maxlength="3" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">
<label for="card_cvc">CVC</label>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<input type="text" id="2checkout_type" class="hidden" name="type">
<input id="card_token" name="token" type="hidden" value="">
</div>
<div class="clear"></div>
<div class="modal-footer">
<div class="ball-pulse"><div></div><div></div><div></div></div>
<button type="button" class="btn btn-main" onclick="tokenRequest()" id="2checkout_btn">{{LANG pay}}</button>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
<?php if ($config['checkout_payment'] == 'yes') { ?>
// Called when token created successfully.
var successCallback = function(data) {
var myForm = document.getElementById('2checkout_form');
$.post(link('main/checkout'), {
card_number: $("#card_number").val(),
card_cvc: $("#card_cvc").val(),
card_month: $("#card_month").val(),
card_year: $("#card_year").val(),
card_name: $("#card_name").val(),
card_address: $("#card_address").val(),
card_city: $("#card_city").val(),
card_state: $("#card_state").val(),
card_zip: $("#card_zip").val(),
card_country: $("#card_country").val(),
card_email: $("#card_email").val(),
card_phone: $("#card_phone").val(),
type: 'pro',
token: data.response.token.token
}, function(data, textStatus, xhr) {
$('#2checkout_btn').html("{{LANG pay}}");
$('#2checkout_btn').attr('disabled');
$('#2checkout_btn').removeAttr('disabled');
$('#2checkout_form').find('.ball-pulse').fadeOut(100);
if (data.status == 200) {
window.location.href = data.url;
} else {
$('#2checkout_alert').html("<div class='alert alert-danger'>"+data.error+"</div>");
setTimeout(function () {
$('#2checkout_alert').html("");
},3000);
}
/*optional stuff to do after success */
});
};
// Called when token creation fails.
var errorCallback = function(data) {
$('#2checkout_btn').html("{{LANG pay}}");
$('#2checkout_btn').removeAttr('disabled');
$('#2checkout_form').find('.ball-pulse').fadeOut(100);
if (data.errorCode === 200) {
tokenRequest();
} else {
$('#2checkout_alert').html("<div class='alert alert-danger'>"+data.errorMsg+"</div>");
setTimeout(function () {
$('#2checkout_alert').html("");
},3000);
}
};
var tokenRequest = function() {
$('#card_number').val($('#_number_').val());
$('#2checkout_btn').html("{{LANG Please wait..}}");
$('#2checkout_btn').attr('disabled','true');
if ($("#card_number").val() != '' && $("#card_cvc").val() != '' && $("#card_month").val() != '' && $("#card_year").val() != '' && $("#card_name").val() != '' && $("#card_address").val() != '' && $("#card_city").val() != '' && $("#card_state").val() != '' && $("#card_zip").val() != '' && $("#card_country").val() != 0 && $("#card_email").val() != '' && $("#card_phone").val() != '') {
$('#2checkout_form').find('.ball-pulse').fadeIn(100);
// Setup token request arguments
var args = {
sellerId: "<?php echo($config['checkout_seller_id']) ?>",
publishableKey: "<?php echo($config['checkout_publishable_key']) ?>",
ccNo: $("#card_number").val(),
cvv: $("#card_cvc").val(),
expMonth: $("#card_month").val(),
expYear: $("#card_year").val()
};
// Make the token request
TCO.requestToken(successCallback, errorCallback, args);
}
else{
$('#2checkout_btn').html("{{LANG pay}}");
$('#2checkout_btn').removeAttr('disabled');
$('#2checkout_alert').html("<div class='alert alert-danger'>{{LANG Please check the details}}</div>");
setTimeout(function () {
$('#2checkout_alert').html("");
},3000);
}
};
$(function() {
// Pull in the public encryption key for our environment
TCO.loadPubKey("<?php echo($config['checkout_mode']) ?>");
});
<?php } ?>
$(document).ready(function() {
$("#upload-image").on('change', function() {
//Get count of selected files
var product_countFiles = $(this)[0].files.length;
var product_imgPath = $(this)[0].value;
var extn = product_imgPath.substring(product_imgPath.lastIndexOf('.') + 1).toLowerCase();
var product_image_holder = $("#fake_img_holder");
product_image_holder.empty();
if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
if (typeof(FileReader) != "undefined") {
//loop for each file selected for uploaded.
for (var i = 0; i < product_countFiles; i++)
{
var product_reader = new FileReader();
product_reader.onload = function(e) {
$("<img />", {
"src": e.target.result,
"class": "thumb-image"
}).appendTo(product_image_holder);
}
product_image_holder.show();
product_reader.readAsDataURL($(this)[0].files[i]);
}
} else {
product_image_holder.html("<p>This browser does not support FileReader.</p>");
}
}
});
});
$(document).on('click', '.send_bank', function(event) {
$(".bank_transfer_form").submit();
});
$(".bank_transfer_form").ajaxForm({
type:'POST',
dataType:'json',
url: link('go_pro/bank_transfer'),
success:function(data){
if (data.status == 200) {
$('.bank_alert').html($('<div>',{
class:'alert alert-success',
text:data.message
}));
setTimeout(function(){
window.location.href = site_url('');
},3000);
}
else{
$('.bank_alert').html($('<div>',{
class:'alert alert-danger',
text:data.message
}));
}
setTimeout(function(){
$('.alert-danger').slideUp('fast',function(){
$(this).remove();
})
$('.alert-success').slideUp('fast',function(){
$(this).remove();
})
},2000);
}
});
function Pxp_GetPaymentMethods(type) {
$('.button_go_pro_upgrade').find('button').attr('disabled','true');
$('.button_go_pro_upgrade').find('button').find('span').html("{{LANG please_wait}}");
$.post(link('main/get_payment_methods'), {type: type}, function(data, textStatus, xhr) {
if (data.status == 200) {
$('.payment_methods_modal').html(data.html);
$('.go_pro--modal').fadeIn(250);
}
$('.button_go_pro_upgrade').find('button').removeAttr('disabled');
$('.button_go_pro_upgrade').find('button').find('span').html("{{LANG upgrade}}");
});
}
function Pxp_GetPayPalLink(type) {
$('.btn-paypal').attr('disabled','true');
$.post(link('go_pro/get_paypal_link'), {type: type}, function(data, textStatus, xhr) {
if (data.status == 200) {
window.location.href = data.url;
}
$('.btn-paypal').removeAttr('disabled');
});
}
function Pxp_BankPayment(type) {
var click_event = "$('#upload-image').trigger('click');";
$(".images-renderer").html('<div class="select-images" onclick="'+click_event+'"><span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg><h5>{{LANG choose_an_image}}</h5></span></div>');
$('#configreset').click();
$('.bank_payment--modal').fadeIn(250);
}
function Pxp_StripePayment(type,amount=0) {
$('.btn-cart').attr('disabled','true');
var handler = StripeCheckout.configure({
key: "<?php echo $config['stripe_id'];?>",
locale: 'english',
image: '',
token: function(token) {
$('.confirm--modal--body').html('<i class="fa fa-spin fa-spinner"></i> {{LANG c_payment}}');
$.post(link('go_pro/stripe_payment'), {stripeToken:token.id,type:type,amount:amount}, function (data) {
if (data.status == 200) {
window.location.href = data.url;
} else {
$('.confirm--modal--body').html('<i class="fa fa-spin fa-spinner"></i> {{LANG payment_declined}}');
}
});
}
});
handler.open({
name: "<?php echo $config['site_name']?>",
description: "Upgrade to pro",
amount: amount,
currency: '<?php echo $config['currency']?>',
opened: function () {
$('.btn-cart').removeAttr('disabled');
$('.go_pro--modal').fadeOut(250);
}
});
$(window).on('popstate', function() {
handler.close();
});
}
function PayViaRazorpay() {
$('.btn-razorpay-payment').attr('disabled','true');
var _amount = <?php echo intval( $config['pro_price'] );?>;
$.post(link('razorpay/generate_order'), {type: 'pro',amount:_amount}, function(data, textStatus, xhr) {
if (data.status == 200) {
if( data.id !== '' ){
var options = {
"key": "<?php echo $config['razorpay_key'];?>", // Enter the Key ID generated from the Dashboard
"amount": _amount * 100,
"currency": "<?php echo $config['currency'];?>",
"name": "<?php echo $config['site_name'];?>",
"description": "Upgrade To PRO",
"image": "{{CONFIG site_url}}/media/img/logo.{{CONFIG logo_extension}}",
"order_id": data.id, //This is a sample Order ID. Pass the `id` obtained in the response of Step 1
"handler": function (response){
$.post(link('razorpay/proccess_payment'), {payment_id:response.razorpay_payment_id,order_id:response.razorpay_order_id,signature:response.razorpay_signature,type:'pro',amount:_amount}, function (data) {
if (data.status == 200) {
window.location.href = data.url;
} else {
$('.confirm--modal--body').html('<i class="fa fa-spin fa-spinner"></i> {{LANG payment_declined}}');
}
});
},
"theme": {
"color": "#F37254"
}
};
var rzp1 = new Razorpay(options);
rzp1.open();
}
}
$('.btn-razorpay-payment').removeAttr('disabled');
});
}
function PayViaSms(){
$('.btn-sms-payment').attr('disabled','true');
$.post(link('go_pro/get_sms_link'), {type: 'pro'}, function(data, textStatus, xhr) {
if (data.status == 200) {
window.location.href = data.url;
}
$('.btn-sms-payment').removeAttr('disabled');
});
}
function PayViaPaystack(){
$('.btn-paystack-payment').attr('disabled','true');
$.post(link('paystack/create_payment'), {type: 'pro'}, function(data, textStatus, xhr) {
window.location.href = data.url;
$('.btn-paystack-payment').removeAttr('disabled');
});
}
function PayVia2Checkout(){
$('.btn-2checkout-payment').attr('disabled','true');
$('#2checkout_modal').modal({
show: true
});
$('.go_pro--modal').fadeOut(250);
$('.btn-2checkout-payment').removeAttr('disabled');
}
function PayViaCashfree(){
$('.btn-cashfree-payment').attr('disabled','true');
$('#cashfree_type').val('pro');
$("#cashfree_alert").html('');
$('.go_pro--modal').fadeOut(250);
$('#cashfree_modal_box').modal({
show: true
});
$('.btn-cashfree-payment').removeAttr('disabled');
}
<?php if ($config['iyzipay_payment'] == "yes" && !empty($config['iyzipay_key']) && !empty($config['iyzipay_secret_key'])) { ?>
function PayViaIyzipay(){
$('.btn-iyzipay-payment').attr('disabled','true');
$.post(link('go_pro/iyzipay'), {}, function(data) {
if (data.status == 200) {
$('#iyzipay_content').html('');
$('#iyzipay_content').html(data.html);
} else {
$('.btn-iyzipay').attr('disabled', false).html("Iyzipay App not set yet.");
$.toast("Iyzipay App not set yet.",{
duration: 5000,
type: 'error',
align: 'bottom',
singleton: true
});
}
$('.btn-iyzipay').removeAttr('disabled');
$('.btn-iyzipay').find('span').text("{{LANG iyzipay}}");
});
$('.btn-iyzipay-payment').removeAttr('disabled');
}
<?php } ?>
</script>