How to Connect Stripe Payments to Salesforce (Step-by-Step Guide)

Integrating Stripe with Salesforce allows you to accept payments and save transaction data directly into your CRM. No more switching between tabs—your payment status and transaction IDs will live right inside your Salesforce records.

Step 1: Create Your Stripe Account & Get API Keys

• Go to Stripe.com and sign up for a free account.
• Once logged in, switch to Test Mode (toggle on the left side).
• Go to Developers > API Keys.
• Copy your Publishable Key (starts with pk_test_...) and Secret Key (starts with sk_test_...).
• Note: Keep your Secret Key safe. Never share it publicly!

Step 2: Prepare Salesforce

1. Create a Custom Object: Go to Setup > Object Manager > Create > Custom

• Object. Name itPayment_Transaction__c.
• Add Fields: Create these fields:
• Payment_ID__c (Text, length 255)
• Status__c (Text, length 50)
• Amount__c (Currency)

2.Add Remote Site:
Go to Setup > Quick Find > "Remote Site Settings". Add a new site:

• Name:Stripe_API
• URL: https://api.stripe.com

Step 3: Secure the Connection
Don’t hardcode your API keys in the code.

1. Go to Setup > Named Credentials.
2. Create a new Named Credential.
3. Name: Stripe_Named_Credential.
4. URL: https://api.stripe.com.
5. Select "Password Authentication" and enter your Secret Key as the Password.

Step 4: The Apex Controller (Backend)
This Apex code sends the payment request to Stripe and saves the response into your Payment_Transaction__c object.

public with sharing class PaymentController {

    @AuraEnabled
    public static String processAndSavePayment(Decimal amount, String stripeToken) {
        try {
            Http http = new Http();
            HttpRequest req = new HttpRequest();
            // Use your Named Credential here
            req.setEndpoint('callout:Stripe_Named_Credential/v1/charges');
            req.setMethod('POST');
            req.setBody('amount=' + (Integer)(amount * 100) + '&currency=usd&source=' + stripeToken);

            HttpResponse res = http.send(req);
            Map<String, Object> responseMap = (Map<String, Object>) JSON.deserializeUntyped(res.getBody());

            if (res.getStatusCode() == 200) {
                Payment_Transaction__c txn = new Payment_Transaction__c(
                    Payment_ID__c = (String)responseMap.get('id'),
                    Status__c = (String)responseMap.get('status'),
                    Amount__c = amount
                );
                insert txn;
                return 'SUCCESS:' + txn.Payment_ID__c;
            }
            return 'ERROR: Payment Failed';
        } catch (Exception e) {
            return 'ERROR: ' + e.getMessage();
        }
    }
}

Step 5: Add a CSP Trusted Site
Salesforce has a strict security system called Content Security Policy (CSP). To allow your Lightning Web Component (LWC) to communicate with Stripe’s external servers, you must whitelist the Stripe URL.

1. Log in to your Salesforce Admin account.
2. Click the Gear Icon at the top right corner and select Setup.
3. In the Quick Find box on the left, type "CSP Trusted Sites".
4. Click on CSPTrusted Sites from the search results.
5. Click the New Trusted Site button.

Step 6: Configure Trusted Site Details
Fill in the form with the following information to permit communication:

1. Trusted Site Name: Stripe_JS_CDN
2. Trusted Site URL: https://js.stripe.com
3. Active: Check the Activecheckbox to enable the site.
**4. CSP Directives: **Under the CSP Directives section, ensure both "Allow JavaScript Connectors" and "Allow Font Connectors" are checked.

1. Click Save.

Step 6: The Lightning Web Component (Frontend)
Create an LWC with a button. When clicked, it generates a token via Stripe and sends it to the Apex class above.

import { LightningElement } from 'lwc';
import processAndSavePayment from '@salesforce/apex/PaymentController.processAndSavePayment';

export default class PaymentComponent extends LightningElement {

    async handlePayClick() {
        // Use Stripe JS to tokenize card data
        const stripe = window.Stripe('pk_test_YOUR_KEY');
        const cardElement = this.template.querySelector('c-card-element');
        const { token } = await stripe.createToken(cardElement);

        processAndSavePayment({ amount: 50.00, stripeToken: token.id })
            .then(result => {
                alert(result.startsWith('SUCCESS') ? 'Payment Saved!' : 'Error Occurred');
            });
    }
}

Summary Checklist for Your Blog
Safety First: We used Named Credentials, so your Secret Key is never exposed in the code.

Data Integrity: We use insert in the same transaction as the API call, ensuring that no payment succeeds without a record being saved.

User Experience: The user gets an instant confirmation once the button is clicked.