Blackbaud Checkout iFrame

Andrea Norris

As we’ve worked to implement Blackbaud Checkout, we had a question based on what we’re seeing in the documentation. Our goal is to avoid any processing/server-side-work on our end and simply use an iframe. It was our understanding that we could do this based on the description/docs:


Blackbaud Checkout


Blackbaud Checkout leverages a JavaScript iFrame to display a secure form within your application. The form appears to be a native part of your application, but sensitive card information is sent securely and directly to Blackbaud without exposing it to the consuming application.


However, we’re seeing that elsewhere in the documentation that we may still need to use an OAuth 2 flow: https://developer.blackbaud.com/skyapi/apis/payments/checkout/integration-guide/preloading-workflow#…<https://developer.blackbaud.com/skyapi/apis/payments/checkout/integration-guide/preloading-workflow#charge-transaction>


Can we get a clarification on how to implement this exclusively with an iframe?

Timothy Wittig

Hey Andrea,


You'll have to do some server-side-work. The reason is we need a secured call from you to approve the transaction.


The Blackbaud Checkout documentation is describing the fact that it handles all of the sensitive payment information within an iFrame -- this means you and your code avoid essentially all of the PCI burden that comes with that information. While it handles gathering all of the data, we still require an authorized call to confirm the data originated with you and your code. Basically, you need a way to tell us "Hey, it's Andrea's App, if you saw a transaction come through with this id, it came from me and I approve it" and then we'll go "Oh hey, Andrea's App, we trust you, and we know about that transaction so we'll go approve it." The trick is proving to us who you are -- you can't put secret data in a web page, so it has to come from a backend service that you can secure.


Hope this helps and let me know if I can answer any other questions!