S1300 Blackbaud Checkout
Add the S1300 tag to a PageBuilder page to display donation button options that lead your donor to Blackbaud Checkout.
Note: Donation forms only display on securely-hosted PageBuilder pages.
How do I use this tag? You'll add this tag to a secure PageBuilder page to render a donation form that leads a donor to Blackbaud Checkout. See Blackbaud Checkout.
Can I customize my web page? See Customize Blackbaud Checkout.
How can I customize donation button styles? See Customize S1300 .
Tip: Don't embed S1300 in an email. Instead, link to the PageBuilder page that uses the S-Tag.
Application
Donations
Can You Add This S-Tag in the Luminate Online Content Editor?
No, add the S-Tag code to the HTML using the Plain Text Editor.
Parameters:
form_id - The donation form ID of a published, Online Giving donation form. The form must be in a campaign that is associated with Blackbaud Secure Payments. See the prerequisites here: Set up Blackbaud Checkout.
Tip: To find the Form ID number, go to Fundraising > Donation Management > Online Giving > All Donation Forms, locate the form and note its Form ID number in the Name column.
Note: If you use MultiCenter, use a uniquely identifiable donation form for each center so that transactions are tracked to the correct site.
[[S1300:<form_id>]]
<convio:session name="1300" param="form_id"></convio:session>
Customize S1300
If you're interested in customizing the initial donation form page rendered by the S1300 S-tag, you can review the page code and customize it. The page contains a "div" element that has a css class on it called "custom." The custom class does not have any css. It's there for you to use and customize.
The div tag in the HTML can be found in this line:
<div id=” secure_checkout_container" class="secure-checkout-container custom">
HTML example for the S1300 tag
You can download a file of the example HTML code or view it below.
HTML code for S1300
<link rel="stylesheet" type="text/css" href="../css/responsive/ResponsiveBase.css">
<link rel="stylesheet" type="text/css" href="../css/responsive/DonFormResponsive.css">
<link rel="stylesheet" type="text/css" href="../css/donation2/secure_checkout/secure_checkout.css">
<link rel="stylesheet" type="text/css" href="../css/donation2/secure_checkout/secure_checkout_mobile.css">
</p><div id="page_load_error" class="page-load-error error">
<span class="error-message-text">
This page could not be initialized properly. Please reload the page using your browser's reload action. </span>
</div>
<div id="secure_checkout_container" class="secure-checkout-container custom">
<form id="secureCheckoutForm" name="secureCheckoutForm" method="post">
<input id="secure_checkout_js_request_timeout" value="60000" type="hidden">
<input name="donationFormUrl" id="donationFormUrl" value="http://example/admin/Donation2?df_id=1015&mfc_pref=T&1015.donation=root" type="hidden">
<input name="submitUrl" id="submitUrl" value="http://example/admin/CRDonationAPI" type="hidden">
<input class="submit-field" name="method" value="securePayToForm" type="hidden">
<input class="submit-field" name="api_key" value="open" type="hidden">
<input class="submit-field" name="v" value="1.0" type="hidden">
<input class="submit-field" name="response_format" value="json" type="hidden">
<input class="submit-field" name="form_id" id="form_id" value="1015" type="hidden">
<input class="submit-field" name="donor.cons_id" id="donor_id" value="0" type="hidden">
<input class="submit-field" name="donor.email_opt_in" value="true" type="hidden">
<input class="submit-field" name="donor.postal_opt_in" value="true" type="hidden">
<input class="submit-field" name="source" value="" type="hidden">
<input class="submit-field" name="sub_source" value="" type="hidden">
<input name="attempt-count" id="attempt-count" value="0" type="hidden">
<input id="maxAttemptCount" value="3" type="hidden">
<input id="maxDonationAmount" value="1000000" type="hidden">
<input id="attemptCount" value="0" type="hidden">
<div class="donation-form-container responsive">
<div id="message">
<div id="secure_checkout_loading_timeout" class="error">
<span class="error-message-header">
This page isn't working right now. </span>
<span class="error-message-text">
We'll redirect you to another page in <span id="redirect_time">10</span>
seconds. </span>
</div>
<div id="capture_error" class="error">
<span class="error-message-header">
Your donation wasn't processed. </span>
<span class="error-message-text">
Something went wrong. Can we try that again? </span>
</div>
<div id="success_message" class="success">
<span class="success-message-header">
Thank you for your {0} donation! </span>
</div>
</div>
<div class="donation-form-content" style="">
<div class="don-standard-levels form-row">
<input id="currencyLocale" value="en_CA" type="hidden">
<input id="defaultDonationLevelId" value="0" type="hidden">
<input id="giftAmountError" value="Gift amount is required." type="hidden">
<input id="giftAmountLessThanMinAllowedError" value="Gift amount is lower than minimum allowed." type="hidden">
<input id="giftAmountGreaterThanMaxAllowedError" value="Gift amount is more than maximum allowed." type="hidden">
<div id="level_standard_row" class="form-row form-donation-level">
<div class="ErrorMessage" style="display:none;">
<span class="field-error-indicator"></span>
<span id="level-error" class="error field-error-text" style="display: inline;">
Gift amount is required. </span>
</div>
<div class="form-content">
<span class="FormLabelText">
Your Gift Amount </span>
<div id="donation-levels" class="donation-levels" style="">
<div class="donation-level-container">
<div id="form-content" class="form-content">
<div id="donation-level-input-container" class="donation-level-input-container form-input" type="preset">
<input id="donation_level1048_amount" name="donation_level1048_amount" value="35" type="hidden">
<input id="donation_level1048_minimum_amount" name="donation_level1048_minimum_amount" value="35" type="hidden">
<div class="donation-level-label-input-container">
<input id="donation_level1048" name="level_id" value="1048" type="radio">
</div>
<label for="donation_level1048">
<div class="donation-level-label-container">
$35
</div>
</label>
</div>
</div>
</div>
<div class="donation-level-container">
<div id="form-content" class="form-content">
<div id="donation-level-input-container" class="donation-level-input-container form-input" type="preset">
<input id="donation_level1049_amount" name="donation_level1049_amount" value="60" type="hidden">
<input id="donation_level1049_minimum_amount" name="donation_level1049_minimum_amount" value="60" type="hidden">
<div class="donation-level-label-input-container">
<input id="donation_level1049" name="level_id" value="1049" type="radio">
</div>
<label for="donation_level1049">
<div class="donation-level-label-container">
$60
</div>
</label>
</div>
</div>
</div>
<div class="donation-level-container">
<div id="form-content" class="form-content">
<div id="donation-level-input-container" class="donation-level-input-container form-input" type="preset">
<input id="donation_level1046_amount" name="donation_level1046_amount" value="120" type="hidden">
<input id="donation_level1046_minimum_amount" name="donation_level1046_minimum_amount" value="120" type="hidden">
<div class="donation-level-label-input-container">
<input id="donation_level1046" name="level_id" value="1046" type="radio">
</div>
<label for="donation_level1046">
<div class="donation-level-label-container">
$120
</div>
</label>
</div>
</div>
</div>
<div class="donation-level-container">
<div id="form-content" class="form-content">
<div id="donation-level-input-container" class="donation-level-input-container form-input" type="userSpecified">
<input id="donation_level1047_amount" name="donation_level1047_amount" value="5" type="hidden">
<input id="donation_level1047_minimum_amount" name="donation_level1047_minimum_amount" value="5" type="hidden">
<div class="donation-level-label-input-container">
<input id="donation_level1047" name="level_id" value="1047" type="radio">
</div>
<label for="donation_level1047">
<div class="donation-level-label-container">
Other </div>
</label>
<div class="donation-level-user-entered">
<p id="dollarSign">$</p>
<input name="other_amount" id="other_amount" value="" size="12" aria-required="true" aria-invalid="true" aria-describedby="donation_level1047amount-error" type="text">
<a class="otherClose" href="#"><img alt="Close" src="../images/closeButton.gif"></a>
</div>
</div>
</div>
</div>
<div class="donation-level-container">
<div id="form-content" class="form-content">
<div id="donation-level-input-container" class="donation-level-input-container form-input" type="preset">
<input id="donation_level1050_amount" name="donation_level1050_amount" value="10" type="hidden">
<input id="donation_level1050_minimum_amount" name="donation_level1050_minimum_amount" value="10" type="hidden">
<div class="donation-level-label-input-container">
<input id="donation_level1050" name="level_id" value="1050" type="radio">
</div>
<label for="donation_level1050">
<div class="donation-level-label-container">
$10
</div>
</label>
</div>
</div>
</div>
<div class="donation-level-container">
<div id="form-content" class="form-content">
<div id="donation-level-input-container" class="donation-level-input-container form-input" type="preset">
<input id="donation_level1051_amount" name="donation_level1051_amount" value="20" type="hidden">
<input id="donation_level1051_minimum_amount" name="donation_level1051_minimum_amount" value="20" type="hidden">
<div class="donation-level-label-input-container">
<input id="donation_level1051" name="level_id" value="1051" type="radio">
</div>
<label for="donation_level1051">
<div class="donation-level-label-container">
$20
</div>
</label>
</div>
</div>
</div>
<div class="donation-level-container">
<div id="form-content" class="form-content">
<div id="donation-level-input-container" class="donation-level-input-container form-input" type="preset">
<input id="donation_level1052_amount" name="donation_level1052_amount" value="40" type="hidden">
<input id="donation_level1052_minimum_amount" name="donation_level1052_minimum_amount" value="40" type="hidden">
<div class="donation-level-label-input-container">
<input id="donation_level1052" name="level_id" value="1052" type="radio">
</div>
<label for="donation_level1052">
<div class="donation-level-label-container">
$40
</div>
</label>
</div>
</div>
</div>
<div class="donation-level-container">
<div id="form-content" class="form-content">
<div id="donation-level-input-container" class="donation-level-input-container form-input" type="preset">
<input id="donation_level1053_amount" name="donation_level1053_amount" value="50" type="hidden">
<input id="donation_level1053_minimum_amount" name="donation_level1053_minimum_amount" value="50" type="hidden">
<div class="donation-level-label-input-container">
<input id="donation_level1053" name="level_id" value="1053" type="radio">
</div>
<label for="donation_level1053">
<div class="donation-level-label-container">
$50
</div>
</label>
</div>
</div>
</div>
<div class="donation-level-container">
<div id="form-content" class="form-content">
<div id="donation-level-input-container" class="donation-level-input-container form-input" type="preset">
<input id="donation_level1070_amount" name="donation_level1070_amount" value="70" type="hidden">
<input id="donation_level1070_minimum_amount" name="donation_level1070_minimum_amount" value="70" type="hidden">
<div class="donation-level-label-input-container">
<input id="donation_level1070" name="level_id" value="1070" type="radio">
</div>
<label for="donation_level1070">
<div class="donation-level-label-container">
$70
</div>
</label>
</div>
</div>
</div>
<div class="donation-level-container">
<div id="form-content" class="form-content">
<div id="donation-level-input-container" class="donation-level-input-container form-input" type="preset">
<input id="donation_level1071_amount" name="donation_level1071_amount" value="80" type="hidden">
<input id="donation_level1071_minimum_amount" name="donation_level1071_minimum_amount" value="80" type="hidden">
<div class="donation-level-label-input-container">
<input id="donation_level1071" name="level_id" value="1071" type="radio">
</div>
<label for="donation_level1071">
<div class="donation-level-label-container">
$80
</div>
</label>
</div>
</div>
</div>
<div class="donation-level-container">
<div id="form-content" class="form-content">
<div id="donation-level-input-container" class="donation-level-input-container form-input" type="preset">
<input id="donation_level1072_amount" name="donation_level1072_amount" value="90" type="hidden">
<input id="donation_level1072_minimum_amount" name="donation_level1072_minimum_amount" value="90" type="hidden">
<div class="donation-level-label-input-container">
<input id="donation_level1072" name="level_id" value="1072" type="radio">
</div>
<label for="donation_level1072">
<div class="donation-level-label-container">
$90
</div>
</label>
</div>
</div>
</div>
<div class="donation-level-container">
<div id="form-content" class="form-content">
<div id="donation-level-input-container" class="donation-level-input-container form-input" type="preset">
<input id="donation_level1073_amount" name="donation_level1073_amount" value="1,000" type="hidden">
<input id="donation_level1073_minimum_amount" name="donation_level1073_minimum_amount" value="1,000" type="hidden">
<div class="donation-level-label-input-container">
<input id="donation_level1073" name="level_id" value="1073" type="radio">
</div>
<label for="donation_level1073">
<div class="donation-level-label-container">
$1,000
</div>
</label>
</div>
</div>
</div>
<div class="donation-level-container">
<div id="form-content" class="form-content">
<div id="donation-level-input-container" class="donation-level-input-container form-input" type="preset">
<input id="donation_level1074_amount" name="donation_level1074_amount" value="10,000" type="hidden">
<input id="donation_level1074_minimum_amount" name="donation_level1074_minimum_amount" value="10,000" type="hidden">
<div class="donation-level-label-input-container">
<input id="donation_level1074" name="level_id" value="1074" type="radio">
</div>
<label for="donation_level1074">
<div class="donation-level-label-container">
$10,000
</div>
</label>
</div>
</div>
</div>
<div class="donation-level-container">
<div id="form-content" class="form-content">
<div id="donation-level-input-container" class="donation-level-input-container form-input" type="preset">
<input id="donation_level1075_amount" name="donation_level1075_amount" value="66,666.66" type="hidden">
<input id="donation_level1075_minimum_amount" name="donation_level1075_minimum_amount" value="66,666.66" type="hidden">
<div class="donation-level-label-input-container">
<input id="donation_level1075" name="level_id" value="1075" type="radio">
</div>
<label for="donation_level1075">
<div class="donation-level-label-container">
$66,666.66
</div>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="../js/don2/secure_checkout/donation_levels.js"></script>
<script type="text/javascript" src="../js/don2/secure_checkout/bbsp_secure_checkout.js"></script>
<input id="merchantAccountId" value="d68d0a89-dfb3-4db9-873e-291c847f3182" type="hidden">
<input id="secureCheckoutKey" value="d487aa64-5dc9-4883-ba40-883cf635c1c9" type="hidden">
<input class="submit-field" name="transactiontoken" id="transactiontoken" value="" type="hidden">
<input id="clientName" value="Luminate" type="hidden">
<input id="secureCheckoutPaneLoadingTimeout" value="10000" type="hidden">
<div class="button-container clearfix">
<div class="button-sub-container">
<button class="step-button action-button finish-step disabled" type="button" id="pstep_finish" name="pstep_finish" disabled="true">
<span id="processingSpinner" class="processing-spinner hidden" name="processingSpinner">
<img src="../images/ajax_loaders/ajax-loader.gif">
</span>
<span id="submitButtonLabel" class="submit-button-label" resubmitlabel="Resubmit {0} gift" name="submitButtonLabel">
Give securely </span>
</button>
<button class="step-button action-button hidden" type="button" id="goto_donation_form_button">
<span id="donationFormButtonLabel" class="submit-button-label">
Redirect me now </span>
</button>
</div>
</div>
</div>
</div>
</form>
</div>
<div id="secure_checkout_loading" style="display: none;">
<img id="loading_image" src="../images/ajax_loaders/ajax-loader.gif" alt="Loading ...">
</div>
<script type="text/javascript" src="../js/don2/secure_checkout/secure_checkout_shell.js"></script><p></p>
</div>CSS for the S1300 tag
You can download a file with the CSS code, or view it below.
CSS code for S1300
body.sp-checkout-modal-open {
margin: 0; height: 100%; overflow: hidden;
}
.page-load-error {
width: 896px;
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
display: none;
}
.donation-form-container.responsive .field-required {
display: none;
}
.donation-form-container.responsive .field-required + label:before {
font-size: 10px;
font-weight: 400;
content: "\f069";
text-decoration: inherit;
display: inline-block;
speak: none;
margin-right: 4px;
vertical-align: text-top;
}
.donation-form-container.responsive .field-required + label > span {
margin-left: -4px;
}
.donation-form-container.responsive #select_grid_row {
display: none;
}
div.donation-form-container.responsive {
background: inherit;
border: none;
padding: 0px;
color: inherit;
font-family: inherit;
font-size: inherit;
margin: auto;
width: 896px;
}
.donation-form-container.responsive .form-content {
margin: 0;
padding: 0;
width: 100%;
}
.donation-form-container.responsive h2.section-header-container,
.donation-form-container.responsive #level_standard_row .FormLabelText {
color: #181818;
line-height: 3em;
font-size:18px;
font-weight:700;
border-top: 0;
margin: 0;
padding: 0;
}
.donation-form-container.responsive h1.donation-headline {
max-width: 600px;
font-weight: 700;
margin: 20px 0px;
}
/* Input and Label Styles */
.donation-form-container.responsive div.form-row div.form-content > input[type="text"] {
-webkit-border-radius: 2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
border-radius: 2px 2px 2px 2px;
color: #1c1c1c;
background-color: #FFFFFF;
border: 1px solid rgb(180, 180, 180);
outline: none;
padding: 5px 0px 5px 5px;
margin: 5px 1px 3px 0;
font-size: 1em;
font-weight: 500;
box-shadow: inset 0px 0px 1px 0px rgba(97,99,101,0.54), inset 1px 1px 4px 0px rgba(215,215,215,0.85);
width: 94%;
max-width: 620px;
height: 44px;
line-height: 40px;
}
.donation-form-container.responsive div.form-row div.form-content > input[type="text"]:focus {
border-color: #1c1c1c;
}
/* Donation Levels */
.donation-form-container.responsive .don-standard-levels {
min-height: 180px;
}
.donation-form-container.responsive #level_standard_row .field-required {
display: none;
}
.donation-form-container.responsive .form-donation-level .form-content {
margin: 0;
height: inherit;
}
.donation-form-container.responsive .donation-levels {
position: relative;
height: 95px;
}
.donation-form-container.responsive .donation-level-container {
border: none;
margin: 0 10px 10px 0;
width: 125px;
float: left;
}
.donation-form-container.responsive .donation-level-input-container,
.donation-form-container.responsive .generic-repeat-label-checkbox-container {
padding: 0;
}
.donation-form-container.responsive .donation-level-input-container {
height: 95px;
}
.donation-form-container.responsive .donation-level-label-input-container {
float: left;
}
.donation-form-container.responsive .donation-level-container.other-field .form-content .donation-level-input-container > label {
float: right;
margin-right: 0px;
}
.donation-form-container.responsive .donation-levels input[type="radio"],
.donation-form-container.responsive .donation-level-label-input-container {
text-indent: -9999px;
height: 0;
width: 0;
}
.donation-form-container.responsive .donation-level-label-container {
line-height: 35px;
align-self: center;
}
.donation-form-container.responsive .donation-level-input-container label.donation-level-selector {
float: left;
clear: none;
background-color: #CCCCCC;
background-image: none;
border-radius: 4px 4px 4px 4px;
color: #333333;
cursor: pointer;
font-size: 1.7em;
margin-right: 1%;
padding-left: 0;
text-align: center;
vertical-align: middle;
width: 125px;
height: 95px;
line-height: 95px;
font-weight: 700;
display: flex;
justify-content: center;
}
.donation-form-container.responsive .donation-level-input-container label:hover {
background-color: #DDDDDD;
}
.donation-form-container.responsive .donation-level-input-container label.selected,
.donation-form-container.responsive .donation-level-input-container .selected,
.donation-form-container.responsive .donation-level-input-container .selected:hover {
background-color: #1D8FD7;
}
.donation-form-container.responsive .other-field {
width: 100%;
position: absolute;
left: 0;
}
.donation-form-container.responsive .other-field .donation-level-input-container {
width: 650px;
}
.donation-form-container.responsive label + .donation-level-user-entered {
float: left;
margin-left: 0;
}
.donation-form-container.responsive .donation-level-user-entered {
position: relative;
display: none;
}
.donation-form-container.responsive .donation-level-user-entered input[type="text"] {
position: relative;
top: -10px;
height: 95px;
font-size: 3.3em;
text-indent: 1.5em;
width: 515px;
margin-right: 1%;
padding: 0;
display: block;
line-height: 1px;
color: #000000;
}
.donation-level-user-entered label.userCurrency #dollarSign {
font-size: 4em;
line-height: 95px;
color: #CCCCCC;
margin: 0;
position: absolute;
top: -10px;
left: 20px;
z-index: 1000;
width: 40px;
}
.donation-form-container.responsive .otherClose {
position: absolute;
right: 20px;
top: 5px;
opacity: .6;
}
.donation-form-container.responsive .otherClose:hover {
border-bottom: 0;
opacity: 1;
}
/* End Donation Levels */
/* Donate Button Styles */
.donation-form-container.responsive .button-sub-container {
clear:both;
float:left;
}
.donation-form-container.responsive button#pstep_finish,
.donation-form-container.responsive button#goto_donation_form_button {
max-width:none;
padding:25px 15px;
#width:380px;
background:#1D8FD7;
color:#000000;
border:none;
font-size:2em;
font-weight:700;
border-radius:6px;
transition:.5s;
float:left;
clear:both;
}
.donation-form-container.responsive button#pstep_finish.disabled {
background: #CCCCCC;
}
.donation-form-container.responsive button#pstep_finish.enabled {
background: #1D8FD7;
}
/* End Donate Button Styles */
/* Error/Info Message Styles */
div.responsive div.error,
div.responsive div.success {
display: none;
}
div.responsive div.success {
border: 1px solid #479B0D;
background-color: #A2D1BE1A;
padding: 3px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
margin-top: 4px;
}
div.responsive div#message span.error-message-header,
div.responsive div#message span.success-message-header {
display: block;
content: "\f12a";
font: normal bold normal 20px FontAwesome;
line-height: 20px;
color: #B94A49;
padding-bottom: 25px;
}
div.responsive div#message span.success-message-header {
padding-top: 25px;
padding-left: 10px;
}
div.responsive div#message span.success-message-header {
color: #12870F;
}
div.responsive div#message span.error-message-text {
font-size: 15px;
}
div.responsive div.ErrorMessage.page-error,
div.responsive div.form-info-message {
margin: 40px 0px 16px 0px;
}
div.responsive div.ErrorMessage.page-error>span.field-error-indicator,
div.responsive div.form-info-message div.form-message-text > span.header-info-message,
div.responsive div.form-info-message div.form-message-text > span.header-warning-message {
background: inherit;
height: auto;
width: auto;
vertical-align: baseline;
}
div.responsive div.ErrorMessage.page-error>span.field-error-indicator {
padding-left: 16px;
}
div.responsive div.ErrorMessage.page-error>span.field-error-indicator:before {
content: "\f12a";
font: normal normal normal 18px FontAwesome;
line-height: 18px;
color: #B94A49;
}
div.responsive div.form-info-message div.form-message-text > span.header-info-message:before,
div.responsive div.form-info-message div.form-message-text > span.header-warning-message:before {
content: "Please note: ";
font-size: 18px;
font-weight: 600;
line-height: 18px;
color: #93AA43;
}
div.responsive span.field-error-text,
div.responsive div.ErrorMessage.page-error>span.field-error-text,
div.error > span.error-message-text
{
background-color: #FEEAEB;
color: #B94A49;
border: none;
vertical-align: baseline;
font-size: 18px;
font-weight: 400;
line-height: 23px;
}
div.responsive div.form-info-message {
border: 1px solid #93AA43;
padding: 3px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #F4F8E6;
}
div.responsive div.form-info-message div.form-message-text {
background-color: #F4F8E6;
padding: 5px 12px 6px;
color: #93AA43;
vertical-align:baseline;
font-size: 18px;
font-weight: 400;
line-height: 23px;
}
/* End Error Message Styles */
/* IE Styles */
input::-ms-clear {
display: none;
}
/* Secure checkout loading styles */
div#secure_checkout_loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
display: flex;
justify-content: center;
}
#loading_image {
z-index: 100;
vertical-align: middle;
align-self: center;
}
/* End secure checkout loading styles */