Blackbaud Checkout LWC Integration
Budget: $10 – $30 USD
I need a Lightning Web Component that invokes Blackbaud’s JavaScript library and launches their iframe-based payment-checkout modal directly from Salesforce. The component’s sole purpose is payment processing, and at this stage it only needs to accept credit and debit cards.
Here is what I expect:
• A solution that when a donate button is clicked the Blackbaud_OpenPaymentForm(transactionData) method is called from https://payments.blackbaud.com/Checkout/bbCheckout.2.0.js or from
Static Resources and open the Donate Payment Modal Form from Blackbaud.
See this sample https://ocdiopro.org/ - For testing use card no 4242 4242 4242 4242
After success donation capture
Transaction token:
Card token:
Authorized amount:
• The LWC renders a button (or similar trigger) that calls the Blackbaud JS SDK and opens the hosted checkout modal inside an iframe.
• Successful transactions should return the token/transaction object to Salesforce so I can store the reference on a given record.
• Handle callbacks for success, cancel, and error states, surfacing any error messages in the component UI.
• The solution must follow standard Salesforce security guidelines (Locker, CSP) and keep sensitive data inside Blackbaud’s environment—no card data should ever touch Salesforce.
• Code should be clean, commented, and delivered as an unlocked package or a simple metadata bundle I can deploy with SFDX. A short README explaining setup, required Blackbaud keys, and usage is appreciated.
Completion is verified when I can install the component in a sandbox, click the button, complete a test card payment, and see the transaction token returned to a custom field.
Here is what I expect:
• A solution that when a donate button is clicked the Blackbaud_OpenPaymentForm(transactionData) method is called from https://payments.blackbaud.com/Checkout/bbCheckout.2.0.js or from
Static Resources and open the Donate Payment Modal Form from Blackbaud.
See this sample https://ocdiopro.org/ - For testing use card no 4242 4242 4242 4242
After success donation capture
Transaction token:
Card token:
Authorized amount:
• The LWC renders a button (or similar trigger) that calls the Blackbaud JS SDK and opens the hosted checkout modal inside an iframe.
• Successful transactions should return the token/transaction object to Salesforce so I can store the reference on a given record.
• Handle callbacks for success, cancel, and error states, surfacing any error messages in the component UI.
• The solution must follow standard Salesforce security guidelines (Locker, CSP) and keep sensitive data inside Blackbaud’s environment—no card data should ever touch Salesforce.
• Code should be clean, commented, and delivered as an unlocked package or a simple metadata bundle I can deploy with SFDX. A short README explaining setup, required Blackbaud keys, and usage is appreciated.
Completion is verified when I can install the component in a sandbox, click the button, complete a test card payment, and see the transaction token returned to a custom field.