Update Self-Hosted Forms for Stripe Connect

This article assumes you are experienced in modifying HTML, CSS, and JavaScript and testing forms. Bloomerang Support does not troubleshoot self-hosted forms. If you are having difficulty updating your forms, contact us to discuss your options.

These are the minimum instructions necessary to update your self-hosted form from Spreedly to Stripe Connect. There will still be a fair amount of (now-unneeded) Spreedly code in the form after you follow these instructions.

Note that these instructions assume an unmodified Self-Hosted form. That is, the starting point for this code is the most recent version of the self-hosted code that was produced by Bloomerang CRM prior to the Stripe Connect integration being released. If you have an older form, or you have modified your form before placing it on your website, you may need to figure out yourself how to correctly update the code.

Tip: We recommend going back to Bloomerang CRM and getting a fresh copy of the code for your form, then re-implementing your customizations. This way, you will have the most up to date code as your starting point.

Add Styles

Add these styles:

.donation-form label.error, .donation-form #card-errors{color: #900;}

.donation-form #card-element{max-width:275px;}

Remember that if you’re adding to the HTML, you must match the way the existing HTML is declared. Be sure to double check your quotations and string concatenation if you’re adding to the default HTML string that’s being built up.

Add <div>

Add the following <div> after the Address section:

<div class="section payment"> 
<h3>Payment Information</h3>
<div class="field text payment required">
<label for="card-element"><span class="label">Credit or debit card</span><span class="required-star">*</span></label>
<div id="card-element"></div>
<div id="card-errors" role="alert"></div>
</div>
</div>

Find and Replace

Find the lines like:

function($) {if (!Bloomerang.useDonationId(‘[Your Form Id Here]')) {html[Your Form Id Here] = '<p style="color: red">Only one donation or event registration form can be used on each page.</p>';
}

And replace them with:

function($) {
if (Bloomerang.useDonationId('[Your Form Id Here]')) {Bloomerang.useProcessor('[Your Processor Id Here]', 'StripeConnect');
} else {html[Your Form Id Here] = '<p style="color: red">Only one donation or event registration form can be used on each page.</p>';
};

Remember to sub out the form Id and the processor Id (which is the numeric portion of the URL of the Edit Transaction Processor page in Bloomerang CRM).

Add Javascript

Add this Javascript after the form has been loaded on the page.

For example, after the jQuery('#bloomerangForm[Your Form Id Here]’).after(html[Your Form Id Here]) ):

Bloomerang.Util.requireStripe(function() {
Bloomerang.Util.Stripe = Stripe('[Your Stripe Publishable Key Here]');
var elements = Bloomerang.Util.Stripe.elements();
 
// Create an instance of the card Element.
Bloomerang.Util.StripeCard = elements.create('card', {
hidePostalCode: true,
style: {
base: {
color: "#333",
fontSize: "14px",
fontFamily: "'Century Gothic', verdana, sans-serif"
},
invalid: {
color: "#333"
}
}
});
 
// Add an instance of the card Element into the `card-element` <div>.
Bloomerang.Util.StripeCard.mount('#card-element');
 
// Handle real-time validation errors from the card Element.
Bloomerang.Util.StripeCardIsValid = false;
Bloomerang.Util.StripeCard.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
if (event.complete) {
Bloomerang.Util.StripeCardIsValid = true;
} else {
Bloomerang.Util.StripeCardIsValid = false;
}
});
});

Make sure to sub out your Stripe publishable key with the key from your Stripe account.

Change the Submit Button Text

Change the text of the submit button from “Enter Payment” to “Donate” (or whatever you’d like).

Remember to also change the text in the Bloomerang.Api.OnError function.

Add

In the collectPayment function, after:

if (!form.valid()) {
return false;
}

Add the following:

if ( !Bloomerang.Util.StripeCardIsValid) {
document.getElementById('card-errors').textContent = "Valid card info is required";
return false;
}

Add

After the line:

jQuery('meta[name="viewport"]').attr('content', oldMeta);

Replace the line:

SpreedlyExpress.openView();

With the line:

submitDonation();

Update the Date at the End of the URL

In the startBloomerangLoad function, update the cachebuster (the date at the end of the URL) on Bloomerang-v2.js from 2019-05-30 to 2019-10-02

Replace

Replace all instances of:

requireJQueryValidatio

With:

requireJQueryValidationAndStripe

Test Forms with Transactions