What are items to consider when designing the secure payment page?

There are several important items to remember about the secure payment page for the Payment 2.0 and Event Registration 2.0 parts. The secure payment page uses your style sheets, layouts, templates, and pages for desktop browsers and mobile devices to render the page. Make sure you consider this information to enhance accessibility for both options.
Secure Payment Page: Important Considerations​
  • When you use the same Payment 2.0  or Event Registration 2.0 part on two web pages that use two different templates, the secure payment page renders using the template for the page the website user navigates from. For example, your payment page for an event registration uses a template with a red background and your payment page for a donation uses a template with a blue background. When a user navigates from the event registration payment page to the secure payment page, the page renders using the red template. When a user navigates from the donation payment page to the secure payment page, the page renders using the blue template.
  • Some parts,such as Formatted Text & Images and Menu, appear on the secure payment page. Images also appear. However, you may notice that some parts, including Unformatted Text, do not appear on the page.
  • When you include targeted content on your page, be aware that it does not apply to the secure payment page. No matter the role the user is in, the secure payment page renders the view for an anonymous user the same way your page appears for anonymous users. Anonymous users are users not logged in to your website.
  • Blackbaud Secure Payments will only accept HTML and CSS designs (up to HTML5 and CSS3). Javascript and flash are not supported for PCI DSS compliance. If your site is designed using either of these elements, they will be removed on the secure payments page.
  • We recommend you remove third-party social media sharing widgets from your page. These links typically include JavaScript that the secure payment page removes for PCI DSS compliance.
  • External style sheets including those you import in Stylesheets do not appear. Only styles from the default style sheet or inline on a part appear.
  • To enhance performance between your site and Blackbaud's server, the program holds design and property updates you make to the style sheet, layout, template, and page for your payment page in a queue. When this content remains static for five minutes, the updates push to the Blackbaud server within one hour. You cannot change this process. However, you can click Update templates in Sites & settings to manually update the changes for your secure payment page. For more information, see the Administration Guide.
    • Note: The program does not send updates to the Blackbaud secure payment server for Payment 2.0 and Event Registration pages that do not accept credit cards.
  • A generic template exists for the secure payment page. It is unlikely you want to use it because it does not match the rest of your website. However, Flash and JavaScript content does not upload to the secure payment page for PCI DSS compliance. If your page, template, or layout includes this content and the absence of it heavily impacts the appearance of your secure payment page, you may want to use the generic template. You can also use the generic template if you need to temporarily revert your template updates to the page. When you are ready to use your template again, you select Enable secure payment template updates and click Update templates in Sites & settings. For more information, see the Administration Guide.
  • Multiple stacked images being called in one CSS class will prompt the page styles to be stripped.  In order to resolve this, the class must be divided in to multiple containers within the stylesheet, and multiple <div> tags within the layout to break up the content. Example below.
    • Stacked 
       
      @media (min-width: 1050px) {
      #BodyId {
         background: url(image/bg.gif),url(image/bg_bot.gif);
         background-position: left -105px, left bottom;
         background-repeat: repeat-x, repeat-x;
         background-color: transparent;
      }
      }

      Not Stacked
      .container {
         background: url("/image/bg_top.gif") repeat-x left -105px;
         overflow: hidden;
         padding: 30px 0 0;  }
       
      .container2 {
         background: url("/image/bg_bot.gif") repeat-x left bottom;  }
       
      .container3 {
         background: url("/image/bg_repeat.gif") repeat left top #bfbfbf;  }
  • Exclude all special characters from the Template Name (when not on the latest version)
  • Targeting & Security for the part, page, template and style sheet must be set to Everyone
  • Flash, JavaScript, and externally hosted content will not upload to the secure payment page for PCI DSS compliance. If your page, template, or layout includes this content and the absence of the content heavily impacts the appearance of your secure payment page, you may want to use the generic template that is currently in use. You can also use the generic template if you need to temporarily revert your template updates to the page.
  • All image URLs should use the full Image URL. Do not include incomplete URL or Base64 encoded image URLs.
  • Exclude custom fonts, otherwise when users are directed to the secure payment page during the event registration process, the site's style sheet formatting is lost. Custom font example below.Custom Font Example
  • Print Styles Are Not Currently Supported: Blackbaud Secure Payments page loads only a background-image
How to use responsive secure payment pages with Blackbaud NetCommunity 7.0
Page navigates to payments.blackbaud.com
FAQs Regarding Upgrading to Blackbaud Secure Payments 2.0
Blackbaud Secure Payments page loads only a background-image
 

Environment

 Blackbaud NetCommunity

Was this article helpful?