<!--storefront payment gateway-->
<div class="storefront-rightbar payment-gateway payment">
<h1 class="storefront-heading">Setup Payment Gateway<span>Build your own landing page with custom styles.</span>
</h1>
<div class="expandall-col">
<a href="javascript:void(0);" class="expandAll mt-0 ml-auto"><i class="icon-expandall"></i><span class="txt">Expand all</span></a>
</div>
<div class="gateway-accordion mt-2" id="gatewayAccordion">
<div class="accordion custom-accordion">
<div class="card active">
<div class="card-header p-0" data-toggle="collapse" data-target="#paymentGateway" aria-expanded="true" aria-controls="paymentGateway">
<div class="card-heading mr-auto">
<h2>Payment Gateway <i class="icon-error-fill"></i></h2>
</div>
<i class="icon-arrow-bottom" type="button" data-toggle="collapse" data-target="#paymentGateway" aria-expanded="true" aria-controls="paymentGateway" data-original-title="Collapse"></i>
</div>
<div id="paymentGateway" class="paymentGateway collapse show body" aria-labelledby="paymentGateway" data-parent="#gatewayAccordion">
<!--card body start-->
<div class="card-body bg-none p-0 pt-2">
<p>Payment Gateway enables CloudSubscription as a payment processing platform. This allows you to run credit cards, ACH or other payment methods for customers. Payments processed through the CloudSubscription Platform will be directed to your bank account as defined by your merchant account with <span>CyberSource</span> or <span>Authorize.Net.</span> SYNNEX will continue to invoice as normal on the payment terms defined for each contract. The charge to the customer will show as the name on your merchant account with <span>CyberSource</span> or <span>Authorize.Net.</span>.</p>
<p>To get started select Enable Payment Gateway below. You will need a merchant account setup with <span>CyberSource</span> or <span>Authorize.Net.</span> to use this feature.</p>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input payGateway" id="gatewayEnable" name="shiptime1">
<label class="custom-control-label" for="gatewayEnable">Payment Gateway Enabled</label>
</div>
<a href="javascript:void(0);" class="openRtFly ml-3 viewAggrement" data-flyout="payment">View Agreement</a>
</div>
<!--card body end-->
</div>
</div>
</div>
<div class="accordion custom-accordion">
<div class="card">
<div class="card-header p-0" data-toggle="collapse" data-target="#merchantSetting" aria-expanded="true" aria-controls="merchantSetting">
<div class="card-heading mr-auto">
<h2>Merchant Settings <i class="icon-error-fill"></i></h2>
</div>
<i class="icon-arrow-bottom collapsed" type="button" data-toggle="collapse" data-target="#merchantSetting" aria-expanded="true" aria-controls="merchantSetting" data-original-title="Expand"></i>
</div>
<div id="merchantSetting" class="merchantSetting collapse body" aria-labelledby="merchantSetting" data-parent="#gatewayAccordion">
<!--card body start-->
<div class="card-body bg-none p-0 pt-2">
<p>Storefront supports <span>CyberSource</span> and <span>Authorize.Net</span> payment processor, please select Merchant ID Setting link below to define merchant settings.</p>
<p>Settings required from your <span>CyberSource</span> Gateway with Merchant account:</p>
<ul>
<li>Merchant ID</li>
<li>Private Key</li>
<li>Merchant Alias</li>
<li>Expiration Date</li>
<li>Email Address</li>
</ul>
<p>Settings required from your <span>Authorize.Net</span> Gateway with Merchant account:</p>
<ul>
<li>Name: The name should be short and descriptive. It is used to identify this merchant account in various lists throughout infusionsoft (e.g Authorize.Net A.)</li>
<li>Login ID: This is the API Login ID from Authorize.net. To get this ID, Log into your Authorize.Net account.</li>
<li>Transaction Key: A transaction key can be generated from your Authorize.net account. Click https://support.authorize.net/s/article/How-do-I-obtain-my-API-Login-ID-and-Transaction-Key to find out how to generate the key.</li>
<li>Transaction Email: Set this to Yes if you want to receive a transaction email from Authorize.Net for each purchase in addition to the order notifications CloudSubscription.com sends to you.</li>
</ul>
<span class="merchantID">Merchant ID Setting <i class="icon-info-blue" data-toggle="tooltip" data-placement="top" title="" data-original-title="Merchant ID Setting, must be done before the following settings can be made." data-custom-class="custom-txt"></i></span>
</div>
<!--card body end-->
</div>
</div>
</div>
<div class="accordion custom-accordion">
<div class="card">
<div class="card-header p-0" data-toggle="collapse" data-target="#customerSetting" aria-expanded="true" aria-controls="customerSetting">
<div class="card-heading mr-auto">
<h2>Default Payment Settings for all Customers <i class="icon-error-fill"></i></h2>
</div>
<i class="icon-arrow-bottom collapsed" type="button" data-toggle="collapse" data-target="#customerSetting" aria-expanded="true" aria-controls="customerSetting" data-original-title="Expand"></i>
</div>
<div id="customerSetting" class="customerSetting collapse body" aria-labelledby="customerSetting" data-parent="#gatewayAccordion">
<!--card body start-->
<div class="card-body bg-none p-0 pt-2">
<p>Below are the default settings for payment processing that will apply to all customers that are enabled to use the payment gateway. The default setting can be managed or defined on a per customer basis under <span>Customer Access.</span></p>
<p>Settings required from your <span>CyberSource</span> Gateway with Merchant account:</p>
<div class="customer-payment">
<h1 class="customer-section">1. Supported Payment Methods <span class="asterisk">*</span></h1>
<div class="row defaultSet">
<div class="col-auto">
<div class="customer-opt">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customTerm" name="shiptime1" checked>
<label class="custom-control-label" for="customTerm">Custom Terms</label>
</div>
<div class="search-input-col">
<div class="custom-dropdown warehouse-menu dropdown cards-custom-dropdown">
<button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-arrow-bottom"></i>
<span class="selected-value">Net 30</span>
</button>
<div class="dropdown-menu active-menu">
<div>
<a class="dropdown-item " href="javascript:void(0);"><span>Net 30</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Net 45</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>Net 60</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="customer-opt">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customTerm1" name="shiptime1">
<label class="custom-control-label" for="customTerm1">Authorize.Net</label>
</div>
<div class="search-input-col">
<div class="custom-dropdown warehouse-menu dropdown cards-custom-dropdown">
<button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled>
<i class="icon-arrow-bottom"></i>
<span class="selected-value">7 Days</span>
</button>
<div class="dropdown-menu active-menu">
<div>
<a class="dropdown-item " href="javascript:void(0);"><span>1 Day</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>2 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>3 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>4 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>5 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>6 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>7 Days</span></a>
</div>
</div>
</div>
</div>
<span class="card-validation">Credit card validation before invoice generate.</span>
</div>
</div>
<div class="col-md-12">
<hr class="hair-line">
</div>
</div>
<h1 class="customer-section">2. Invoice Creation <span class="asterisk">*</span></h1>
<div class="row defaultSet">
<div class="col-md-6">
<div class="customer-opt">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="newcustomTerm" name="shiptime11" checked>
<label class="custom-control-label" for="newcustomTerm">At the time of product enablement, each anniversary day after</label>
</div>
</div>
</div>
<div class="col-md-6">
<div class="customer-opt">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="newcustomTerm1" name="shiptime11">
<label class="custom-control-label" for="newcustomTerm1">Consolidate all product invoices to create a single invoice on the</label>
</div>
<div class="search-input-col">
<div class="custom-dropdown warehouse-menu dropdown cards-custom-dropdown">
<button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled>
<i class="icon-arrow-bottom"></i>
<span class="selected-value">2nd</span>
</button>
<div class="dropdown-menu active-menu">
<div>
<a class="dropdown-item " href="javascript:void(0);"><span>1st</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>2nd</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>3rd</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>4th</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>5th</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>6th</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>7th</span></a>
</div>
</div>
</div>
</div>
<span class="card-validation">day each month</span>
</div>
</div>
<div class="col-md-12">
<hr class="hair-line">
</div>
</div>
<h1 class="customer-section">3. Payment Grace Period Of <span class="asterisk">*</span></h1>
<div class="row mb-2">
<div class="col-md-6">
<div class="customer-opt">
<div class="search-input-col ml-0">
<div class="custom-dropdown warehouse-menu dropdown cards-custom-dropdown">
<button class="cards-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon-arrow-bottom"></i>
<span class="selected-value">1 Day</span>
</button>
<div class="dropdown-menu active-menu">
<div>
<a class="dropdown-item " href="javascript:void(0);"><span>1 Day</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>2 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>3 Days</span></a>
<a class="dropdown-item " href="javascript:void(0);"><span>4 Days</span></a>
</div>
</div>
</div>
</div>
<i class="icon-info-blue ml-2" data-toggle="tooltip" data-placement="top" title="" data-original-title="If the customer has not provided payment for products before the grace period expires, Cloud Subscription will automatically process the payment on the cutomers payment method."></i>
</div>
</div>
</div>
</div>
</div>
<!--card body end-->
</div>
</div>
</div>
<div class="accordion custom-accordion">
<div class="card">
<div class="card-header p-0" data-toggle="collapse" data-target="#invoiceCondition" aria-expanded="true" aria-controls="invoiceCondition">
<div class="card-heading mr-auto">
<h2>Invoice Terms and Conditions <i class="icon-error-fill"></i></h2>
</div>
<i class="icon-arrow-bottom collapsed" type="button" data-toggle="collapse" data-target="#invoiceCondition" aria-expanded="true" aria-controls="invoiceCondition" data-original-title="Collapse"></i>
</div>
<div id="invoiceCondition" class="invoiceCondition collapse body" aria-labelledby="invoiceCondition" data-parent="#gatewayAccordion">
<!--card body start-->
<div class="card-body bg-none p-0">
<div class="banner-field">
<label>Enter the terms and condition that will display on the customers invoice</label>
<div class="search-input-col">
<span class="char-limit"><span class="charCount">1500</span> characters left</span>
<textarea class="form-control description-txt" maxlength="1500" placeholder="Please input your terms and conditions"></textarea>
</div>
</div>
<div class="invoice-col-footer">
<div class="set-default-btn customize">
<span class="set-default-lbl">Invoice Customization</span>
<span class="toggle-btn ml-2">
<label class="switch"><input type="checkbox"><span class="slider round"></span></label>
</span>
</div>
<input type="button" class="btn btn-outline ml-auto editNPreview" value="Edit and Preview" disabled data-list-item="custom-invoice-template">
</div>
</div>
<!--card body end-->
</div>
</div>
</div>
</div>
<div class="form-btn-footer">
<input type="button" class="btn btn-outline ml-auto" value="Cancel">
<input type="button" class="btn btn-primary " value="Save">
</div>
</div>
<!--storefront payment gateway-->