Skip to content

Simple payment gateway using HTML #192

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Sukshan01 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Simple payment gateway using HTML #192

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
221 changes: 221 additions & 0 deletions paymentGateway.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,221 @@

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<script src="https://d35z3p2poghz10.cloudfront.net/ecwid-sdk/js/1.2.9/ecwid-app.js"></script>
<link rel="stylesheet" href="https://d35z3p2poghz10.cloudfront.net/ecwid-sdk/css/1.3.13/ecwid-app-ui.css"/>

<style>
/* Custom styles to remove a-card box shadow and border */
.a-card {
border: none;
border-radius: 0px;
box-shadow: none;
}
</style>

</head>
<body>
<div>
<div>
<div class="named-area">
<div class="named-area__body">


<!-- Check input element for example of how to set data attributes to save to storage later -->

<div class="a-card a-card--normal">
<div class="a-card__paddings">
<div class="payment-method">
<div class="payment-method__header">
<div class="payment-method__logo">
<img src="https://developers.ecwid.com/ecwid-css-framework/pics/stripe.png" width="336" height="144" alt="">
</div>
<div class="payment-method__credit-cards">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 26" width="40px" height="26px"><path fill="#FFF" d="M0 0h40v25.41H0z"></path><path fill="#F7B600" d="M1 22h38v3H1z"></path><path fill="#1A1F71" d="M1 1h38v3H1zM15.46 8l-4.13 9.84H8.64L6.61 9.99c-.12-.48-.23-.66-.61-.86-.61-.34-1.62-.65-2.51-.84L3.55 8h4.33c.55 0 1.05.37 1.17 1l1.07 5.7L12.78 8h2.68zM26 14.63c.01-2.6-3.59-2.74-3.57-3.9.01-.35.34-.73 1.08-.82.36-.05 1.37-.08 2.51.44l.45-2.09c-.61-.22-1.4-.43-2.38-.43-2.52 0-4.29 1.34-4.3 3.25-.02 1.42 1.26 2.21 2.23 2.68.99.48 1.33.79 1.32 1.22-.01.66-.79.95-1.52.96-1.28.02-2.02-.35-2.61-.62l-.46 2.16c.6.27 1.69.51 2.83.52 2.66 0 4.41-1.32 4.42-3.37m6.65 3.22H35L32.94 8h-2.17c-.49 0-.9.28-1.08.72l-3.82 9.12h2.67l.53-1.47h3.27l.31 1.48zm-2.85-3.49l1.34-3.7.77 3.7H29.8zM19.09 8l-2.1 9.84h-2.55L16.55 8h2.54z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 26" width="36px" height="26px"><path d="M8.46 24.75V23.2c0-.58-.37-.97-.97-.98-.31-.01-.64.09-.87.44-.17-.27-.44-.44-.81-.44-.26 0-.52.08-.72.37v-.3h-.54v2.46h.54v-1.36c0-.43.24-.65.6-.65s.54.23.54.65v1.37h.54V23.4c0-.43.25-.65.6-.65.37 0 .54.23.54.65v1.37h.55zm8-2.46h-.88v-.75h-.54v.75h-.5v.49h.5v1.12c0 .57.22.91.85.91.23 0 .5-.07.67-.19l-.15-.46c-.16.09-.33.14-.47.14-.27 0-.36-.16-.36-.41v-1.11h.88v-.49zm4.57-.06c-.31 0-.51.14-.65.36v-.3h-.53v2.46h.54v-1.38c0-.41.18-.63.53-.63.11 0 .22.02.33.06l.16-.5c-.12-.05-.27-.07-.38-.07zm-6.91.25c-.26-.17-.61-.26-1-.26-.62 0-1.02.3-1.02.79 0 .4.3.65.85.73l.25.04c.29.04.43.12.43.26 0 .19-.2.3-.56.3-.37 0-.64-.12-.82-.26l-.25.42c.29.22.66.32 1.07.32.71 0 1.12-.33 1.12-.8 0-.43-.32-.66-.86-.74l-.25-.04c-.23-.03-.42-.08-.42-.24 0-.18.18-.29.47-.29.31 0 .62.12.77.21l.22-.44zm14.35-.25c-.31 0-.51.14-.65.36v-.3h-.53v2.46h.54v-1.38c0-.41.18-.63.53-.63.11 0 .22.02.33.06l.16-.5c-.12-.05-.27-.07-.38-.07zm-6.9 1.29c0 .75.52 1.29 1.31 1.29.37 0 .62-.08.89-.29l-.26-.43c-.2.14-.41.22-.64.22-.43-.01-.74-.31-.74-.79 0-.47.31-.78.74-.79.23 0 .44.08.64.22l.26-.43c-.27-.21-.51-.29-.89-.29-.79 0-1.31.54-1.31 1.29zm5.01 0v-1.23h-.54v.3c-.17-.22-.43-.36-.78-.36-.69 0-1.23.54-1.23 1.29s.54 1.29 1.23 1.29c.35 0 .61-.14.78-.36v.3h.54v-1.23zm-1.99 0c0-.43.28-.79.75-.79.44 0 .74.34.74.79s-.3.79-.74.79c-.47 0-.75-.36-.75-.79zm-6.46-1.29c-.72 0-1.23.53-1.23 1.29 0 .78.53 1.29 1.26 1.29.37 0 .71-.09 1.01-.35l-.26-.4c-.21.16-.47.26-.72.26-.35 0-.66-.16-.74-.6h1.83c.01-.07.01-.13.01-.21 0-.76-.47-1.28-1.16-1.28zm-.01.48c.35 0 .57.22.62.6h-1.28c.06-.36.28-.6.66-.6zm13.43.81V21.3h-.54v1.29c-.17-.22-.43-.36-.78-.36-.69 0-1.23.54-1.23 1.29s.54 1.29 1.23 1.29c.35 0 .61-.14.78-.36v.3h.54v-1.23zm-1.99 0c0-.43.28-.79.75-.79.44 0 .74.34.74.79s-.3.79-.74.79c-.47 0-.75-.36-.75-.79zm-18.09 0v-1.23h-.54v.3c-.17-.22-.43-.36-.78-.36-.69 0-1.23.54-1.23 1.29s.54 1.29 1.23 1.29c.35 0 .61-.14.78-.36v.3h.54v-1.23zm-1.99 0c0-.43.28-.79.75-.79.44 0 .74.34.74.79s-.3.79-.74.79c-.46 0-.75-.36-.75-.79zm22.97.87c.03 0 .07.01.1.02s.06.03.08.05c.02.02.04.05.05.08.01.03.02.06.02.1 0 .03-.01.07-.02.09-.01.03-.03.06-.05.08-.02.02-.05.04-.08.05-.03.01-.06.02-.1.02-.04 0-.07-.01-.1-.02s-.06-.03-.08-.05c-.02-.02-.04-.05-.05-.08-.01-.03-.02-.06-.02-.09s.01-.07.02-.1.03-.06.05-.08c.02-.02.05-.04.08-.05.03-.01.06-.02.1-.02zm0 .44c.03 0 .05-.01.07-.01.02-.01.04-.02.06-.04.02-.02.03-.04.04-.06.01-.02.01-.05.01-.07s0-.05-.01-.07c-.01-.02-.02-.04-.04-.06-.02-.02-.04-.03-.06-.04-.02-.01-.05-.01-.07-.01-.03 0-.05 0-.08.01-.02.01-.04.02-.06.04-.02.02-.03.04-.04.06-.01.02-.01.05-.01.07s0 .05.01.07c.01.02.02.04.04.06.02.02.04.03.06.04.03 0 .05.01.08.01zm.01-.31c.03 0 .05.01.07.02.02.01.02.03.02.05 0 .02-.01.03-.02.05-.01.01-.03.02-.05.02l.07.09h-.05l-.07-.09h-.02v.09h-.05v-.23h.1zm-.05.05v.06h.06c.01 0 .02 0 .03-.01.01 0 .01-.01.01-.02s0-.02-.01-.02-.02-.01-.03-.01h-.06z"></path><path fill="#FF5F00" d="M13.94 3.53h8.11v14.58h-8.11z"></path><path fill="#EB001B" d="M14.46 10.82c0-2.96 1.38-5.59 3.54-7.29-1.58-1.24-3.57-1.98-5.73-1.98C7.15 1.55 3 5.7 3 10.82c0 5.12 4.15 9.27 9.27 9.27 2.16 0 4.15-.74 5.73-1.98-2.16-1.7-3.54-4.33-3.54-7.29z"></path><path fill="#F79E1B" d="M33 10.82c0 5.12-4.15 9.27-9.27 9.27-2.16 0-4.15-.74-5.73-1.98 2.16-1.7 3.54-4.33 3.54-7.29S20.16 5.23 18 3.53c1.58-1.24 3.57-1.98 5.73-1.98 5.12 0 9.27 4.15 9.27 9.27z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 26" width="40px" height="26px"><path fill="#4D4D4D" d="M0 0v26h40V0H0z"></path><path fill="#FFF" d="M16.21 7.99c.52 0 .95.1 1.48.36v1.33c-.5-.46-.93-.65-1.5-.65-1.12 0-2.01.88-2.01 1.99 0 1.17.86 2 2.06 2 .54 0 .97-.18 1.45-.63v1.33c-.55.24-.99.34-1.5.34-1.83 0-3.24-1.32-3.24-3.02-.02-1.7 1.44-3.05 3.26-3.05zm-5.67.04c.67 0 1.29.22 1.81.64l-.63.77c-.31-.33-.61-.47-.97-.47-.52 0-.89.28-.89.64 0 .31.21.48.93.73 1.36.47 1.77.89 1.77 1.81 0 1.12-.87 1.9-2.12 1.9-.91 0-1.58-.34-2.13-1.1l.77-.7c.28.5.74.77 1.31.77.53 0 .93-.35.93-.82 0-.24-.12-.45-.36-.6-.12-.07-.36-.17-.83-.33-1.13-.38-1.51-.78-1.51-1.58 0-.95.83-1.66 1.92-1.66zm13.7.1h1.31l1.64 3.89 1.66-3.89h1.3l-2.66 5.94h-.65l-2.6-5.94zm-23.2.01H2.8c1.94 0 3.3 1.19 3.3 2.9 0 .85-.41 1.68-1.12 2.22-.59.46-1.26.67-2.19.67H1.04V8.14zm5.61 0h1.2v5.79h-1.2V8.14zm24.04 0h3.4v.98h-2.2v1.28h2.12v.98h-2.12v1.56h2.2v.98h-3.4V8.14zm4.2 0h1.78c1.38 0 2.18.63 2.18 1.71 0 .89-.5 1.47-1.4 1.64l1.94 2.44H37.9l-1.66-2.33h-.16v2.33h-1.2V8.14h.01zm1.19.91v1.75h.35c.77 0 1.17-.31 1.17-.89 0-.56-.41-.86-1.15-.86h-.37zm-33.84.07v3.83h.32c.77 0 1.26-.14 1.64-.46.41-.35.66-.9.66-1.46 0-.55-.25-1.09-.66-1.44-.4-.34-.87-.47-1.64-.47h-.32z"></path><path fill="#F47216" d="M21.34 7.95c1.81 0 3.27 1.38 3.27 3.08 0 1.7-1.46 3.08-3.27 3.08s-3.27-1.38-3.27-3.08c0-1.7 1.47-3.08 3.27-3.08zM40 15.1c-1.34.94-11.34 7.66-28.65 10.9H40V15.1z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 26" width="40px" height="26px"><path fill="#0079BE" d="M0 0h40v26H0z"></path><path fill="#FFF" d="M18.1 24C12.01 24.03 7 19.1 7 13.1 7 6.54 12.01 2 18.1 2h2.85c6.01 0 11.5 4.53 11.5 11.1 0 6-5.49 10.9-11.5 10.9H18.1zm.02-21.09c-5.56 0-10.07 4.51-10.07 10.07 0 5.56 4.51 10.07 10.07 10.07 5.56 0 10.07-4.51 10.07-10.07 0-5.56-4.51-10.07-10.07-10.07zm-2.29 16.03V7.02c-2.39.92-4.09 3.24-4.1 5.96.01 2.72 1.71 5.04 4.1 5.96zm8.67-5.96c0-2.72-1.7-5.04-4.1-5.96v11.92c2.4-.92 4.1-3.24 4.1-5.96z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 26" width="40px" height="26px"><path fill-rule="evenodd" clip-rule="evenodd" fill="#007AC5" d="M0 0h40v26H0z"></path><g fill="#FFF"><path d="M4.99 13.55h2.64l-1.3-3.16zM25.16 10.69v1.46h4.23v1.61h-4.23v1.61h4.74l2.17-2.35-2.12-2.32h-4.79zm5.23 1.96l.32.36-.32.35v-.71z"></path><path d="M40 17.13l-.82-.83-3.24-3.3 3.17-3.29.89-.92v-.77h-4.63l-.3.31-1.72 1.82-1.6-1.8-.3-.34H18.32l-.26.6-1.46 3.37-1.56-3.38-.27-.58h-4.71v3.73L8.7 8.62l-.26-.6H4.3l-.26.61-3.42 7.98L.01 18h4.24l.25-.62.46-1.13h2.67l.46 1.13.27.62h5.57V15.43l.89 1.98.27.59h2.94l.27-.59.89-1.98V18h12.14l.3-.32 1.7-1.82 1.62 1.81.3.33H40v-.87zM22.11 17h-1.94v-6.25L17.37 17h-1.64l-2.8-6.25V17h-3.9l-.71-1.76H4.3L3.59 17H1.53l3.42-7.98h2.83l3.28 7.53V9.02h3.07l2.5 5.42 2.35-5.42h3.13V17zm13.56 0l-2.35-2.62L30.88 17h-7.59V9.02H31l2.32 2.62 2.47-2.62h2.59l-3.85 3.99L38.47 17h-2.8z"></path></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 26" width="38px" height="26px"><path fill="#086DB9" d="M6.9 1C4.76 1 3.03 2.74 3.03 4.88v9.97c.9.49 2.11.97 3.36.93 2.5-.08 2.21-1.98 2.21-3.07V9.16H12s.01 3.27.02 4.63c.01 1.36-.81 2.98-3.82 3.23-1.85.16-3.81-.13-5.17-.4V25h5.92c2.14 0 3.87-1.73 3.87-3.87V1H6.9z"></path><path fill="#DD0F3A" d="M17.98 1c-2.14 0-3.87 1.73-3.87 3.87v5.38c.84-.75 2.3-1.32 4.85-1.32 2.85 0 3.84.49 3.84.49v1.69c-.72-.63-6.45-2.27-6.45 1.87 0 3.84 4.72 2.87 6.45 1.9.03.86 0 1.67 0 1.67s-1.62.51-3.84.51c-2.49-.01-3.98-.55-4.85-1.32V25h5.92c2.14 0 3.87-1.73 3.87-3.87V1h-5.92z"></path><path fill="#5AAA34" d="M28.9 1c-2.14 0-3.87 1.73-3.87 3.87v4.15h5.53s2.65.02 2.69 2.02c.03 1.64-1.81 1.83-1.81 1.83s2.28.14 2.28 1.98c0 1.83-2.14 2.11-2.14 2.11l-6.52.02-.03 8.02h5.92c2.14 0 3.87-1.73 3.87-3.87V1H28.9z"></path><path fill="#5AAA34" d="M29.27 13.47h-2.32v2.12h2.32v-.01c.58 0 1.06-.47 1.06-1.06 0-.57-.48-1.05-1.06-1.05zM30.07 11.32c0-.52-.42-.94-.94-.96v-.01h-2.18v1.94h2.18v-.02c.53-.01.94-.43.94-.95z"></path></svg>
</div>
</div>
<div class="payment-method__title">Accept Stripe and card payments on your website</div>
<div class="payment-method__content">
<div class="form-area">
<div class="form-area__content">
<p>To start accepting payments, enter the email address where your payments should be sent. This email address should be the same one associated with your Stripe account. If you don’t have a Stripe account, you can set it up later using the same email address that you’ve provided here.</p>
</div>

<div class="columned">
<div class="columned__item">
<div class="form-area__title">Your Stripe account:</div>
<div class="form-area__content">
<div class="fieldsets-batch">
<div class="fieldset">
<div class="fieldset__field-wrapper">
<div class="field field--medium">
<span class="fieldset__svg-icon"></span>
<label class="field__label">Merchant ID</label>

<!-- Instruction title input. Use data attributes as below to save and update the value to/from application storage via functions.js -->
<input data-name="merchantId" data-visibility="private" type="text" class="field__input">

<div class="field__placeholder">Merchant ID</div>
<span class="field-state--success"><svg xmlns="http://www.w3.org/2000/svg" width="26px" height="26px" viewBox="0 0 26 26" focusable="false"><path d="M5 12l5.02 4.9L21.15 4c.65-.66 1.71-.66 2.36 0 .65.67.65 1.74 0 2.4l-12.3 14.1c-.33.33-.76.5-1.18.5-.43 0-.86-.17-1.18-.5l-6.21-6.1c-.65-.66-.65-1.74 0-2.41.65-.65 1.71-.65 2.36.01z"></path></svg></span>
<span class="field-state--close"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve" focusable="false"><path d="M15.6,15.5c-0.53,0.53-1.38,0.53-1.91,0L8.05,9.87L2.31,15.6c-0.53,0.53-1.38,0.53-1.91,0 c-0.53-0.53-0.53-1.38,0-1.9l5.65-5.64L0.4,2.4c-0.53-0.53-0.53-1.38,0-1.91c0.53-0.53,1.38-0.53,1.91,0l5.64,5.63l5.74-5.73 c0.53-0.53,1.38-0.53,1.91,0c0.53,0.53,0.53,1.38,0,1.91L9.94,7.94l5.66,5.65C16.12,14.12,16.12,14.97,15.6,15.5z"></path></svg></span>
</div>
<div class="fieldset__field-prefix"></div>
<div class="fieldset__field-suffix"></div>
</div>
<div class="field__error" aria-hidden="true" style="display: none;"></div>
<div class="fieldset__note" aria-hidden="true" style="display: none;"></div>
</div>
<div class="fieldset">
<div class="fieldset__field-wrapper">
<div class="field field--medium">
<span class="fieldset__svg-icon"></span>
<label class="field__label">API Secret</label>

<!-- Instruction title input. Use data attributes as below to save and update the value to/from application storage via functions.js -->
<input data-name="APIsecret" data-visibility="private" type="text" class="field__input">


<div class="field__placeholder">API Secret</div>
<span class="field-state--success"><svg xmlns="http://www.w3.org/2000/svg" width="26px" height="26px" viewBox="0 0 26 26" focusable="false"><path d="M5 12l5.02 4.9L21.15 4c.65-.66 1.71-.66 2.36 0 .65.67.65 1.74 0 2.4l-12.3 14.1c-.33.33-.76.5-1.18.5-.43 0-.86-.17-1.18-.5l-6.21-6.1c-.65-.66-.65-1.74 0-2.41.65-.65 1.71-.65 2.36.01z"></path></svg></span><span class="field-state--close"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve" focusable="false"><path d="M15.6,15.5c-0.53,0.53-1.38,0.53-1.91,0L8.05,9.87L2.31,15.6c-0.53,0.53-1.38,0.53-1.91,0 c-0.53-0.53-0.53-1.38,0-1.9l5.65-5.64L0.4,2.4c-0.53-0.53-0.53-1.38,0-1.91c0.53-0.53,1.38-0.53,1.91,0l5.64,5.63l5.74-5.73 c0.53-0.53,1.38-0.53,1.91,0c0.53,0.53,0.53,1.38,0,1.91L9.94,7.94l5.66,5.65C16.12,14.12,16.12,14.97,15.6,15.5z"></path></svg></span>
</div>
<div class="fieldset__field-prefix"></div>
<div class="fieldset__field-suffix"></div>
</div>
<div class="field__error" aria-hidden="true" style="display: none;"></div>

<div class="fieldset__note" aria-hidden="true" style="display: none;"></div>
</div>
</div>
<div class="inline-alert inline-alert--error">This payment processor accepts only Australian Dollar, Hong Kong dollar, Malaysian Ringgit.</div>
</div>

<!-- Advanced settings START-->
<div class="collapsible">
<div class="collapsible__header">Advanced settings</div>
<div class="collapsible__body">
<div class="form-area__content">
<div class="fieldsets-batch">
<div class="fieldset">
<div class="fieldset__field-wrapper">
<div class="field field--medium field--filled">
<span class="fieldset__svg-icon"></span>
<label class="field__label">Endpoint URL</label>


<!-- Instruction title input. Use data attributes as below to save and update the value to/from application storage via functions.js -->
<input data-name="endpointUrl" data-visibility="private" type="text" class="field__input" value="https://secure2.authorize.net/gateway/transact.dll">


<div class="field__placeholder">Endpoint URL</div>
<span class="field-state--success"><svg xmlns="http://www.w3.org/2000/svg" width="26px" height="26px" viewBox="0 0 26 26" focusable="false"><path d="M5 12l5.02 4.9L21.15 4c.65-.66 1.71-.66 2.36 0 .65.67.65 1.74 0 2.4l-12.3 14.1c-.33.33-.76.5-1.18.5-.43 0-.86-.17-1.18-.5l-6.21-6.1c-.65-.66-.65-1.74 0-2.41.65-.65 1.71-.65 2.36.01z"></path></svg></span>
<span class="field-state--close"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve" focusable="false"><path d="M15.6,15.5c-0.53,0.53-1.38,0.53-1.91,0L8.05,9.87L2.31,15.6c-0.53,0.53-1.38,0.53-1.91,0 c-0.53-0.53-0.53-1.38,0-1.9l5.65-5.64L0.4,2.4c-0.53-0.53-0.53-1.38,0-1.91c0.53-0.53,1.38-0.53,1.91,0l5.64,5.63l5.74-5.73 c0.53-0.53,1.38-0.53,1.91,0c0.53,0.53,0.53,1.38,0,1.91L9.94,7.94l5.66,5.65C16.12,14.12,16.12,14.97,15.6,15.5z"></path></svg></span>
</div>
<div class="fieldset__field-prefix"></div>
<div class="fieldset__field-suffix"></div>
</div>
<div class="field__error" aria-hidden="true" style="display: none;"></div>
<div class="fieldset__note">Use this option to emulate the Authorize.Net SIM API. See details in our <a target="_blank" href="http://kb.ecwid.com/w/page/49187841/AuthorizeNet%20Emulation">Knowledge Base</a>.
</div>
</div>
<button type="button" onclick="resetUserData(initialConfig);" class="btn btn-default btn-medium">Revert to default</button>
</div>
</div>
<div class="form-area__content">
<div class="custom-checkbox">
<label>


<!-- Instruction title input. Use data attributes as below to save and update the value to/from application storage via functions.js -->
<input data-name="testMode" data-visibility="private" type="checkbox" checked="true" value="on" class="custom-checkbox__input">


<span class="custom-checkbox__label"></span>
<span class="custom-checkbox__text">Enable test mode (no charges)</span>
</label>
<div class="custom-checkbox__note muted text-small">Please make sure you are using test Alias/Key and Salt values (not production).</div>
</div>
</div>
</div>
</div>

<!-- Advanced settings END -->

</div>

<!-- Payment instructions block START -->
<div class="columned__item columned__item--shifted">
<div class="form-area__title">Configure Account</div>
<div class="form-area__content">
<ul class="bullet">
<li>Log in to the PayUbiz web interface</li>
<li>Click <b>Settings</b> tab on Dashboard menu bar.</li>
<li>Select "Change Alias &amp; View Salt".</li>
<li>Copy the values.</li>
</ul>
<p>In order to enable and use <a href="http://reseller.authorize.net/application/?id=5555901" target="_blank">Authorize.Net</a> SIM as payment option, you need to fill in the form below.</p>
</div>
</div>
<!-- Payment instructions block END -->

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<script src='functions.js'></script>
<script src="https://d35z3p2poghz10.cloudfront.net/ecwid-sdk/css/1.3.13/ecwid-app-ui.min.js"></script>

<script>

// Autosave feature for fields. Complimentary JS for the one from SDK above

(function initFieldset() {

var elms = document.querySelectorAll('.field__input, .field__select, .field__textarea, .radio, .custom-checkbox__input');
for (var i = 0; i < elms.length; i++) {
elms[i].addEventListener('blur', function(e) {
checkFieldChange(this);
if (this.classList.contains('field__input') || this.classList.contains('field__textarea')) {
saveUserData();
}
}, false);

elms[i].addEventListener('change', function() {
if (this.value) {
saveUserData();
}
else {
saveUserData();
}
}, false);

elms[i].addEventListener('click', function() {
if (this.value) {
saveUserData();
}
else {
saveUserData();
}
}, false);
}
})();

</script>

</body>
</html>