DEV Community: Sabir Sheikh

Accept Payments in Salesforce: A Complete Guide to Stripe Integration

Sabir Sheikh — Sat, 07 Mar 2026 16:44:49 +0000

Accept Payments in Salesforce: A Complete Guide to Stripe Integration

Tired of switching between your Salesforce CRM and a separate payment processor? What if you could accept credit card payments directly inside Salesforce and have every transaction automatically logged?

This guide will walk you through building a complete, secure payment gateway using Stripe and a Lightning Web Component (LWC). We'll cover everything: backend logic, frontend UI, security best practices, and deployment.

Prerequisites

Before you start, make sure you have:

A Salesforce Developer Org or Scratch Org.
A free Stripe Account.
Visual Studio Code with the Salesforce Extension Pack installed.

Step 1: Get Your Stripe API Keys

First, we need to get the credentials from Stripe to allow Salesforce to communicate with it.

Log in to your Stripe Dashboard.
Toggle the Test Mode switch in the top-left corner. This lets you make fake payments without charging real cards.
In the left-hand menu, go to Developers > API keys.
You will see two keys we need:
- Publishable key: Starts with pk_test_.... This is safe to use in your frontend code.
- Secret key: Starts with sk_test_.... Treat this like a password! Never expose it in frontend code. We will secure this in Salesforce.

Copy both keys and keep them handy.

Step 2: Create the Salesforce Data Model

We need a place to store the record of each successful payment.

In Salesforce Setup, go to Object Manager > Create > Custom Object.
Fill in the details:
- Label: Payment Transaction
- Plural Label: Payment Transactions
- Object Name: Payment_Transaction__c
Click Save.
Go to the Fields section for your new object and click New. Create the following three fields:
- Field 1:
  - Data Type: Text
  - Field Label: Payment ID
  - Field Name: Payment_ID__c
  - Length: 255
- Field 2:
  - Data Type: Text
  - Field Label: Status
  - Field Name: Status__c
  - Length: 50
- Field 3:
  - Data Type: Currency
  - Field Label: Amount
  - Field Name: Amount__c
  - Decimal Places: 2

Step 3: Secure the Connection with Named Credentials

This is the most important security step. We will store the Secret Key in a Named Credential so it's encrypted and never visible in your code.

In Salesforce Setup, go to Security > Named Credentials.
Click New Named Credential.
Fill in the form as follows:
- Label: Stripe_Named_Credential
- Name: Stripe_Named_Credential (this will auto-fill)
- URL: https://api.stripe.com
- Identity Type: Named Principal
- Authentication Protocol: Password Authentication
- Username: Leave this blank.
- Password: Paste your Stripe Secret Key (sk_test_...).
- Check the box for Allow Merge Fields in HTTP Header.
Click Save.

Step 4: The Apex Controller (Backend Logic)

This Apex class will receive the payment information from our LWC, communicate with Stripe using the Named Credential, and create a Payment_Transaction__c record on success.

In VS Code, create a new Apex class named PaymentController.cls.
Paste the following code:

// File: force-app/main/default/classes/PaymentController.cls
public with sharing class PaymentController {

    @AuraEnabled(cacheable=false)
    public static String processPayment(Decimal amount, String stripeToken) {
        // The 'callout:' prefix tells Salesforce to use the Named Credential for authentication.
        String endpoint = 'callout:Stripe_Named_Credential/v1/charges';

        Http http = new Http();
        HttpRequest req = new HttpRequest();
        req.setEndpoint(endpoint);
        req.setMethod('POST');

        // Stripe requires the amount in cents (e.g., $50.00 -> 5000)
        Integer amountInCents = (Integer)(amount * 100);

        // Set the request body with the amount, currency, and the token from the frontend
        req.setBody('amount=' + amountInCents + '&currency=usd&source=' + stripeToken);

        try {
            HttpResponse res = http.send(req);

            // Deserialize the JSON response from Stripe
            Map<String, Object> responseMap = (Map<String, Object>) JSON.deserializeUntyped(res.getBody());

            if (res.getStatusCode() == 200 && (String)responseMap.get('status') == 'succeeded') {
                // Payment was successful, create a record in Salesforce
                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 a success message with the Salesforce Record ID
                return 'SUCCESS: Payment recorded with ID ' + txn.Id;
            } else {
                // Payment failed, return the error message from Stripe
                return 'ERROR: ' + (String)responseMap.get('error_message');
            }
        } catch (Exception e) {
            // Handle any other exceptions (e.g., network issues)
            return 'ERROR: An unexpected error occurred - ' + e.getMessage();
        }
    }
}

Step 5: Configure CSP Trusted Sites

For security, Salesforce blocks external scripts. We must whitelist Stripe's JavaScript library.

In Salesforce Setup, go to Security > CSP Trusted Sites.
Click New Trusted Site.
Fill in the details:
- Trusted Site Name: Stripe_JS_CDN
- Trusted Site URL: https://js.stripe.com
- Active: Check this box.
- CSP Directives: Check the box for Allow JavaScript Connectors.
Click Save.

Step 6: The Lightning Web Component (Frontend)

This is the user-facing part. We will create a single LWC that securely displays the payment form.

Part A: Create the Static Resource for Stripe.js

Go to https://js.stripe.com/v3/.
Save the page as stripe.js to your computer.
In VS Code, right-click the force-app/main/default/staticresources folder and select SFDX: Create Static Resource.
Name: stripe
Cache Control: Public
Browse and select the stripe.js file you just saved.
Click Save.

Part B: Create the LWC

In VS Code, right-click the lwc folder and select SFDX: Create Lightning Web Component.
Name it stripePaymentForm.

Part C: Write the Code

Now, replace the contents of the three generated files with the code below.

stripePaymentForm.html

<template>
    <lightning-card title="Make a Payment" icon-name="standard:payment">
        <div class="slds-m-around_medium">
            <form id="payment-form">
                <div id="card-element" class="slds-p-around_small slds-box">
                    <!-- A Stripe Element will be securely inserted here. -->
                </div>
                <button id="submit-button" class="slds-button slds-button_brand slds-m-top_small" onclick={handlePayClick}>
                    Pay $50.00
                </button>
                <div id="card-errors" role="alert" class="slds-m-top_small slds-text-color_error"></div>
            </form>
        </div>
    </lightning-card>
</template>

stripePaymentForm.js

// File: force-app/main/default/lwc/stripePaymentForm/stripePaymentForm.js
import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import processPayment from '@salesforce/apex/PaymentController.processPayment';
import { loadScript } from 'lightning/platformResourceLoader';
import STRIPE_JS from '@salesforce/resourceUrl/stripe';

export default class StripePaymentForm extends LightningElement {
    stripe;
    cardElement;
    // Replace with your Stripe TEST Publishable Key
    stripePublishableKey = 'pk_test_...'; // <-- PASTE YOUR KEY HERE
    amount = 50.00; 

    renderedCallback() {
        if (this.stripe) {
            return; // Prevents script from being loaded multiple times
        }
        loadScript(this, STRIPE_JS)
            .then(() => {
                this.initializeStripe();
            })
            .catch(error => {
                console.error('Error loading Stripe.js:', error);
                this.showToast('Error', 'Could not load payment form.', 'error');
            });
    }

    initializeStripe() {
        this.stripe = window.Stripe(this.stripePublishableKey);
        const elements = this.stripe.elements();

        this.cardElement = elements.create('card', {
            style: {
                base: {
                    fontSize: '16px',
                    color: '#424770',
                },
            },
        });

        this.cardElement.mount('#card-element');

        this.cardElement.on('change', ({ error }) => {
            const displayError = this.template.querySelector('#card-errors');
            if (error) {
                displayError.textContent = error.message;
            } else {
                displayError.textContent = '';
            }
        });
    }

    async handlePayClick() {
        const submitButton = this.template.querySelector('#submit-button');
        submitButton.disabled = true;

        const { token, error } = await this.stripe.createToken(this.cardElement);

        if (error) {
            const errorElement = this.template.querySelector('#card-errors');
            errorElement.textContent = error.message;
            submitButton.disabled = false;
        } else {
            processPayment({ amount: this.amount, stripeToken: token.id })
                .then(result => {
                    if (result.startsWith('SUCCESS')) {
                        this.showToast('Success!', 'Payment was successful.', 'success');
                        this.cardElement.clear(); // Clear the form
                    } else {
                        this.showToast('Payment Failed', result, 'error');
                    }
                })
                .catch(apexError => {
                    this.showToast('Apex Error', apexError.body.message, 'error');
                })
                .finally(() => {
                    submitButton.disabled = false;
                });
        }
    }

    showToast(title, message, variant) {
        this.dispatchEvent(new ShowToastEvent({
            title: title,
            message: message,
            variant: variant,
        }));
    }
}

stripePaymentForm.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>58.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Step 7: Deploy and Add to Your Home Page

You're ready to see it in action!

Deploy: In VS Code, open the Command Palette (Ctrl+Shift+P) and run SFDX: Deploy Source to Org.
Create a Home Page:
- In Salesforce Setup, go to Lightning App Builder.
- Click New.
- Select Home Page and click Next.
- Give it a name like "Payment Home" and click Next.
- Click Finish.
Add Your Component:
- On the left side, under "Standard Components," find your stripePaymentForm component.
- Drag it onto the page canvas.
Save and Activate:
- Click Save.
- You will be taken to the activation screen. Select "App Default" and choose an app (e.g., "Sales").
- Click Save, then Activate.

Now, navigate to the Home tab in the app you selected. You will see your fully functional Stripe payment form! You can test it with the Stripe test card number: 4242 4242 4242 4242.

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

Sabir Sheikh — Sat, 07 Mar 2026 15:15:08 +0000

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.

Go to Setup > Named Credentials.
Create a new Named Credential.
Name: Stripe_Named_Credential.
URL: https://api.stripe.com.
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.

Log in to your Salesforce Admin account.
Click the Gear Icon at the top right corner and select Setup.
In the Quick Find box on the left, type "CSP Trusted Sites".
Click on CSPTrusted Sites from the search results.
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.

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.

🔗 Salesforce Integration with JavaScript: Get Access Token & Perform CRUD

Sabir Sheikh — Wed, 10 Sep 2025 10:02:17 +0000

Salesforce provides powerful REST APIs that allow developers to interact with Salesforce data from external applications. In this blog, we’ll learn how to:

✅ Get an Access Token from Salesforce using JavaScript
✅ Perform CRUD operations (Create, Read, Update, Delete) on Salesforce records
✅ Test everything in a simple HTML + JS file without extra tools

🛠️ Prerequisites

Before we start, you’ll need:

A Salesforce Developer Org (free: signup here)
A Connected App created in Salesforce with OAuth enabled
Your Client ID, Client Secret, Username, Password, and Security Token

🔑 Step 1: Create a Connected App in Salesforce

Go to Setup → App Manager → New Connected App
Enter the following:
- Name: JS Integration
- Enable OAuth Settings ✅
- Callback URL: https://www.postman.com/oauth2/callback (or your app URL)

OAuth Scopes:
-Full access (full)
-Access and manage your data (api)
-Perform requests on your behalf
(refresh_token, offline_access)

Save → Copy the Client ID and Client Secret

🔑 Step 2: Get Access Token via JavaScript

Salesforce uses OAuth 2.0 for authentication. In testing, we can use the Password Grant Flow.

Here’s how we request an access token with plain JavaScript:

function getAccessToken() {
  const body = new URLSearchParams({
    grant_type: "password",
    client_id: "YOUR_CLIENT_ID",
    client_secret: "YOUR_CLIENT_SECRET",
    username: "YOUR_SALESFORCE_USERNAME",
    password: "YOUR_PASSWORD_WITH_SECURITY_TOKEN"
  });

  return fetch("https://login.salesforce.com/services/oauth2/token", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: body
  })
  .then(res => res.json())
  .then(data => {
    console.log("Access Token:", data.access_token);
    return data;
  });
}

🔨 Step 3: Perform CRUD Operations

Once you have the access_token and instance_url, you can interact with Salesforce objects.

Here’s a full HTML + JavaScript example:

<!DOCTYPE html>
<html>
<head>
  <title>Salesforce CRUD Example</title>
</head>
<body>
  <h2>Salesforce CRUD via JavaScript</h2>
  <script>
    const clientId = "YOUR_CLIENT_ID";
    const clientSecret = "YOUR_CLIENT_SECRET";
    const username = "YOUR_SALESFORCE_USERNAME";
    const password = "YOUR_PASSWORD_WITH_SECURITY_TOKEN";
    const loginUrl = "https://login.salesforce.com"; 
    const apiVersion = "v59.0";

    let accessToken = "";
    let instanceUrl = "";

    // 1️⃣ Get Access Token
    function getAccessToken() {
      const body = new URLSearchParams({
        grant_type: "password",
        client_id: clientId,
        client_secret: clientSecret,
        username: username,
        password: password
      });

      return fetch(`${loginUrl}/services/oauth2/token`, {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        body: body
      })
      .then(res => res.json())
      .then(data => {
        console.log("🔑 Access Token:", data);
        accessToken = data.access_token;
        instanceUrl = data.instance_url;
        return data;
      });
    }

    // 2️⃣ CREATE
    function createAccount() {
      fetch(`${instanceUrl}/services/data/${apiVersion}/sobjects/Account/`, {
        method: "POST",
        headers: {
          "Authorization": "Bearer " + accessToken,
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          Name: "JS Test Account",
          Phone: "1234567890"
        })
      })
      .then(res => res.json())
      .then(data => {
        console.log("✅ Account Created:", data);
        getAccount(data.id);
      });
    }

    // 3️⃣ READ
    function getAccount(accountId) {
      fetch(`${instanceUrl}/services/data/${apiVersion}/sobjects/Account/${accountId}`, {
        method: "GET",
        headers: { "Authorization": "Bearer " + accessToken }
      })
      .then(res => res.json())
      .then(data => {
        console.log("📖 Account Data:", data);
        updateAccount(accountId);
      });
    }

    // 4️⃣ UPDATE
    function updateAccount(accountId) {
      fetch(`${instanceUrl}/services/data/${apiVersion}/sobjects/Account/${accountId}`, {
        method: "PATCH",
        headers: {
          "Authorization": "Bearer " + accessToken,
          "Content-Type": "application/json"
        },
        body: JSON.stringify({ Phone: "9876543210" })
      })
      .then(res => {
        if (res.status === 204) {
          console.log("✏️ Account Updated!");
          deleteAccount(accountId);
        } else {
          console.log("❌ Update Failed");
        }
      });
    }

    // 5️⃣ DELETE
    function deleteAccount(accountId) {
      fetch(`${instanceUrl}/services/data/${apiVersion}/sobjects/Account/${accountId}`, {
        method: "DELETE",
        headers: { "Authorization": "Bearer " + accessToken }
      })
      .then(res => {
        if (res.status === 204) {
          console.log("🗑️ Account Deleted!");
        } else {
          console.log("❌ Delete Failed");
        }
      });
    }

    // 🚀 Run: Login then CRUD
    getAccessToken().then(() => createAccount());
  </script>
</body>
</html>

🔒 Security Considerations

The Password Grant Flow exposes your Salesforce password → only use for testing.
For production apps, always use the OAuth Web Server Flow (authorization code).
Never commit your Client Secret or Access Token to GitHub.

*🎯 Conclusion
*

With just a few lines of JavaScript, you can:
Authenticate with Salesforce
Create, Read, Update, and Delete records
Test your API integration in the browser
This approach is perfect for learning, prototyping, or small automation tasks.
For production, switch to secure OAuth flows and use server-side code (Node.js, Java, .NET, etc.).

Building a QR Code Generator in Salesforce Using LWC

Sabir Sheikh — Sun, 17 Aug 2025 14:51:18 +0000

QR codes are a convenient way to share information such as URLs, IDs, or text strings in a compact scannable format. With Salesforce Lightning Web Components (LWC), you can build a QR Code Generator that works directly inside Salesforce pages such as Home, Record, or App Pages. In this blog, we'll walk through how to implement this step by step.

1. Prerequisites

Before you start, make sure you have:

A Salesforce org (Developer Edition or Sandbox is fine)
Familiarity with LWC basics
Access to upload static resources

2. Download and Upload the QR Code Library

We will use the popular QRCode.js library to generate QR codes.

Download the qrcode.min.js file.
In Salesforce Setup, search for Static Resources.
Upload the file as a static resource with the name: qrcode.

3. Create a New Lightning Web Component

Run the following command (if using Salesforce CLI):

sfdx force:lightning:component:create --type lwc --componentname qrcodeGenrate --outputdir force-app/main/default/lwc

This will create the component folder with .js, .html, and .js-meta.xml files.

4. Implement the Component Code

qrcodeGenrate.js

import { LightningElement, track } from 'lwc';
import qrcodeLib from '@salesforce/resourceUrl/qrcode';
import { loadScript } from 'lightning/platformResourceLoader';

export default class QrcodeGenrate extends LightningElement {
    @track inputText = '';
    qrcodeInitialized = false;
    qrLibLoaded = false;

    renderedCallback() {
        if (this.qrcodeInitialized) return;
        this.qrcodeInitialized = true;

        loadScript(this, qrcodeLib)
            .then(() => {
                this.qrLibLoaded = true;
                console.log('✅ QRCode library loaded');
            })
            .catch(error => {
                console.error('❌ Error loading QRCode library', error);
            });
    }

    handleChange(event) {
        this.inputText = event.target.value;
    }

    generateQRCode() {
        if (!this.qrLibLoaded) {
            alert('QR Code library not loaded yet');
            return;
        }

        if (!this.inputText) {
            alert('Please enter some text or URL');
            return;
        }

        const container = this.template.querySelector('.qrcode');
        container.innerHTML = ""; // clear old QR

        // ✅ Use window.QRCode
        new window.QRCode(container, {
            text: this.inputText,
            width: 200,
            height: 200
        });
    }
}

qrcodeGenrate.html

<template>
    <lightning-card title="QR Code Generator">
        <div class="slds-p-around_medium">
            <lightning-input
                label="Enter Text or URL"
                value={inputText}
                onchange={handleChange}>
            </lightning-input>

            <lightning-button
                label="Generate QR Code"
                onclick={generateQRCode}
                class="slds-m-top_small">
            </lightning-button>

            <!-- QR Code will appear here -->
            <div class="qrcode" style="margin-top:20px;"></div>
        </div>
    </lightning-card>
</template>

qrcodeGenrate.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>59.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

5. Deploy and Test the Component

Deploy the component to your org.
Open the App Builder (e.g., Home Page → Edit Page).
Drag and drop the QR Code Generator component onto the page.
Enter text or a URL and click Generate QR Code.

6. Possible Enhancements

Auto-generate QR code as you type (no button click needed).
Add a download button to save the QR code as an image.
Store QR code data in Salesforce records.
Support dynamic QR codes that can redirect to Salesforce pages.

🔐 Building JWT Authentication in ASP.NET Core (Step-by-Step)

Sabir Sheikh — Sun, 20 Jul 2025 05:04:03 +0000

In modern web applications, JWT (JSON Web Token) is a powerful and widely used technique for securing APIs. This guide will walk you through how to implement JWT authentication in an ASP.NET Core MVC project using a practical controller and configuration example.

🧱 Prerequisites

.NET Core SDK installed
Visual Studio or VS Code
Basic understanding of ASP.NET Core
NuGet packages:

Microsoft.AspNetCore.Authentication.JwtBearer

System.IdentityModel.Tokens.Jwt

🎯 Project Overview

We are building a simple API that:

Accepts login credentials
Generates a JWT token if the credentials are correct
Provides a protected endpoint (TestApi2) accessible only with a valid token

🛠 Step 1: Configure JWT in `Startup.cs`

🔐 ConfigureServices– JWT Setup

public void ConfigureServices(IServiceCollection services)
{
    string securityKey = "Your256BitSecretKeyWhichNeedsToBe32BytesLong!"; // Must be 32 bytes
    var symmetricSecurityKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(securityKey));

    services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
        .AddJwtBearer(options =>
        {
            options.TokenValidationParameters = new TokenValidationParameters
            {
                ValidateIssuer = true,
                ValidateAudience = true,
                ValidateIssuerSigningKey = true,
                ValidIssuer = "myshop.com.in",
                ValidAudience = "user",
                IssuerSigningKey = symmetricSecurityKey
            };
        });

    services.Configure<CookiePolicyOptions>(options =>
    {
        options.CheckConsentNeeded = context => true;
        options.MinimumSameSitePolicy = SameSiteMode.None;
    });

    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
}

✅ Key points:

The securityKey must be 32 bytes when using HMAC SHA-256.
The token is validated based on Issuer, Audience, and SigningKey.

🔁 Configure– Middleware

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
    }

    app.UseAuthentication(); // 🔐 Add JWT Authentication middleware
    app.UseStaticFiles();
    app.UseCookiePolicy();

    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");
    });
}

✅ Important: app.UseAuthentication() must be called before UseMvc().

📦 Step 2: Create JWT Controller

Here’s a breakdown of your TestJWTController.

[HttpPost]
public IActionResult GetToken()
{
    string securityKey = "Your256BitSecretKeyWhichNeedsToBe32BytesLong!";
    var symmetricSecurityKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(securityKey));
    var signingCredentials = new SigningCredentials(symmetricSecurityKey, SecurityAlgorithms.HmacSha256);

    var token = new JwtSecurityToken(
        issuer: "myshop.com.in",
        audience: "user",
        expires: DateTime.Now.AddHours(1),
        signingCredentials: signingCredentials
    );

    return Ok(new JwtSecurityTokenHandler().WriteToken(token));
}

🔐 /GetToken Endpoint
This endpoint generates a JWT token signed with your securityKey.
The token is valid for 1 hour.

*🧪 /Login Endpoint (Dummy Authentication)
*

[HttpPost]
public string Login([FromBody] LoginModel login)
{
    if (login.Username == "sabir" && login.Password == "sabir")
    {
        return "Success";
    }
    return "Unauthorized";
}

Simple login check with hardcoded credentials.
In a real-world app, validate against a database.

*🔓 /TestApi – Public Endpoint
*

[HttpPost]
public string TestApi()
{
    byte[] key = new byte[16];
    using (var rng = new RNGCryptoServiceProvider())
    {
        rng.GetBytes(key);
    }

    return Convert.ToBase64String(key);
}

Generates a 128-bit random key.
This API is accessible without authentication.

*🔐 /TestApi2 – Protected with [Authorize]
*

[HttpPost]
[Authorize]
public string TestApi2()
{
    byte[] key = new byte[16];
    using (var rng = new RNGCryptoServiceProvider())
    {
        rng.GetBytes(key);
    }

    return "Auth" + Convert.ToBase64String(key);
}

You must send a valid JWT token in the Authorization header to access this.

Example:

Authorization: Bearer <your_token_here>

📦 LoginModel Class

Used to bind JSON payload during login:

public class LoginModel
{
    public string Username { get; set; }
    public string Password { get; set; }
}

🧪 Testing the Flow

1. Get Token
POST /TestJWT/GetToken
→ Returns JWT token

2. Access Unprotected API
POST /TestJWT/TestApi
→ Always works

3. Access Protected API
POST /TestJWT/TestApi2 with Header:
Authorization: Bearer
→ Returns response only if token is valid

✅ Final Thoughts

🔒 JWT is great for securing APIs in stateless applications.
🚫 Do not hardcode credentials or secrets in production.
🛡 Always store JWT secret keys in a secure config like Azure Key Vault or AWS Secrets Manager.
👨‍💻 Use middleware and services to centralize token handling and validation.

Complete Guide: Building a Google Forms to Salesforce Webhook Integration

Sabir Sheikh — Mon, 07 Jul 2025 18:32:08 +0000

Introduction
Integrating Google Forms with Salesforce via webhooks enables real-time data transfer without third-party tools. This guide covers the end-to-end implementation, troubleshooting common errors, and best practices.

Section 1: Architecture Overview

Components:

Google Form: Collects user data
Google Apps Script: Processes form submissions
Salesforce REST Endpoint: Receives and stores data
OAuth 2.0: Secures the connection

Section 2: Step-by-Step Implementation
Step 1: Prepare Salesforce

Create a REST Endpoint

@RestResource(urlMapping='/form-submissions/*')
global class FormWebhook {

    @HttpPost
    global static String processFormData() {
        try {
            // Parse incoming JSON
            RestRequest req = RestContext.request;
            Map<String, Object> payload = (Map<String, Object>)JSON.deserializeUntyped(req.requestbody.toString());

            // Create Lead record
            Lead newLead = new Lead(
                FirstName = String.valueOf(payload.get('firstName')),
                LastName = String.valueOf(payload.get('lastName')),
                Email = String.valueOf(payload.get('email')),
                Company = String.valueOf(payload.get('company'))
            );
            insert newLead;

            return '{"status": "success", "recordId": "' + newLead.Id + '"}';

        } catch(Exception e) {
            return '{"error": "' + e.getMessage() + '"}';
        }
    }
}

2. Enable Remote Site Settings
`

Go to Setup → Security → Remote Site Settings
Add https://script.google.com as a trusted domain`

Step 2: Set Up Google Apps Script

Create the Webhook Handler

function onFormSubmit(e) {
  const sfEndpoint = 'https://yourdomain.salesforce.com/services/apexrest/form-submissions';
  const accessToken = getSalesforceToken(); // See Step 3 for OAuth setup

  const payload = {
    firstName: e.namedValues['First Name'][0],
    lastName: e.namedValues['Last Name'][0],
    email: e.namedValues['Email'][0],
    company: e.namedValues['Company'][0]
  };

  const options = {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer ' + accessToken,
      'Content-Type': 'application/json'
    },
    payload: JSON.stringify(payload),
    muteHttpExceptions: true
  };

  try {
    const response = UrlFetchApp.fetch(sfEndpoint, options);
    const result = JSON.parse(response.getContentText());

    if (result.error) {
      Logger.log('Error: ' + result.error);
      sendErrorEmail(result.error); // Implement error handling
    } else {
      Logger.log('Success: Record ID ' + result.recordId);
    }
  } catch (error) {
    Logger.log('Connection Error: ' + error.toString());
  }
}

2. Configure the Trigger
Open script editor in Google Forms
Go to Edit → Current project's triggers
Set:
Function: onFormSubmit
Event: On form submit
Failure notification: Daily

Section 3: Authentication Methods
Option A: Password-Based OAuth

function getSalesforceToken() {
  const loginUrl = 'https://login.salesforce.com/services/oauth2/token';

  const params = {
    method: 'POST',
    payload: {
      grant_type: 'password',
      client_id: 'YOUR_CONSUMER_KEY',
      client_secret: 'YOUR_CONSUMER_SECRET',
      username: 'salesforce@email.com',
      password: 'PASSWORD+SECURITY_TOKEN'
    }
  };

  const response = UrlFetchApp.fetch(loginUrl, params);
  return JSON.parse(response).access_token;
}

*Option B: JWT Bearer Flow (Recommended for Production)
*

Generate a self-signed certificate:

openssl req -x509 -sha256 -nodes -days 365 -newkey rsa:2048 -keyout private.key -out cert.pem

Upload cert.pem to Salesforce: Setup → Certificate and Key Management
Use this Apps Script function:

function getJWTAccessToken() {
  const jwtHeader = Utilities.base64Encode(JSON.stringify({
    "alg": "RS256",
    "typ": "JWT"
  }));

  const jwtClaim = Utilities.base64Encode(JSON.stringify({
    "iss": "YOUR_CONSUMER_KEY",
    "sub": "user@domain.com",
    "aud": "https://login.salesforce.com",
    "exp": Math.floor(Date.now()/1000) + 300
  }));

  const signature = Utilities.computeRsaSha256Signature(
    jwtHeader + "." + jwtClaim,
    "-----BEGIN PRIVATE KEY-----\n" + 
    "YOUR_PRIVATE_KEY\n" +
    "-----END PRIVATE KEY-----"
  );

  const jwt = jwtHeader + "." + jwtClaim + "." + Utilities.base64Encode(signature);

  const response = UrlFetchApp.fetch('https://login.salesforce.com/services/oauth2/token', {
    method: 'POST',
    payload: {
      grant_type: 'urn:ietf:params:oauth:grant-type:jwt-bearer',
      assertion: jwt
    }
  });

  return JSON.parse(response).access_token;
}

Section 4: Testing & Debugging
Test Cases

Complete Guide: Sending Google Form Data to Salesforce Using Webhooks

Sabir Sheikh — Mon, 07 Jul 2025 15:28:03 +0000

Introduction
Webhooks provide a powerful way to connect Google Forms with Salesforce in real-time. This guide walks through the entire process from setup to implementation, including troubleshooting tips.

Section 1: Prerequisites
Before beginning, ensure you have:

Google Workspace account (for Google Forms and Apps Script)
Salesforce account with API access enabled
Basic understanding of:
Google Apps Script (JavaScript-based)
Salesforce REST API
Webhook concepts

Section 2: Implementation Steps

Step 1: Create Your Salesforce Webhook Endpoint
In Salesforce Setup, navigate to:

Setup → Develop → Apex Classes

Create a new Apex REST class:

@RestResource(urlMapping='/form-submissions/*')
global class GoogleFormWebhook {
    @HttpPost
    global static void handleFormSubmission() {
        RestRequest req = RestContext.request;
        Map<String, Object> formData = (Map<String, Object>)JSON.deserializeUntyped(req.requestBody.toString());

        // Process data and create Salesforce records
        Lead newLead = new Lead(
            FirstName = (String)formData.get('firstName'),
            LastName = (String)formData.get('lastName'),
            Email = (String)formData.get('email'),
            Company = (String)formData.get('company')
        );
        insert newLead;
    }
}

Deploy the class and note your endpoint URL:
https://yourdomain.my.salesforce.com/services/apexrest/form-submissions

Step 2: Configure the Google Form Webhook

Open your Google Form → Click "⋮" → Script Editor

Paste this script:

function onFormSubmit(e) {
  const webhookUrl = 'YOUR_SALESFORCE_ENDPOINT_URL';
  const authToken = 'YOUR_SALESFORCE_SECURITY_TOKEN';

  const headers = {
    "Authorization": "Bearer " + authToken,
    "Content-Type": "application/json"
  };

  const payload = {
    "firstName": e.namedValues['First Name'][0],
    "lastName": e.namedValues['Last Name'][0],
    "email": e.namedValues['Email'][0],
    "company": e.namedValues['Company'][0]
    // Add other form fields as needed
  };

  const options = {
    "method": "POST",
    "headers": headers,
    "payload": JSON.stringify(payload),
    "muteHttpExceptions": true
  };

  try {
    const response = UrlFetchApp.fetch(webhookUrl, options);
    Logger.log("Submission success: " + response.getContentText());
  } catch (error) {
    Logger.log("Error: " + error.toString());
  }
}

Step 3: Set Up the Trigger
In the Apps Script editor:

Go to Edit → Current project's triggers Click + Add Trigger Configure: Function to run: onFormSubmit Event: "On form submit" Failure notifications: Daily

Step 4: Test the Integration
Submit a test form Check: Apps Script logs (View → Logs) Salesforce debug logs (Setup → Debug → Logs) Verify the new Lead record appears in Salesforce

How to Send Email Using JSP and JavaMail API

Sabir Sheikh — Sun, 06 Jul 2025 18:40:39 +0000

Sending emails from a JSP page is very useful for contact forms, notifications, and automation in Java web applications. In this guide, you’ll learn how to send a simple text email using JSP + JavaMail API, step by step.

✅ Requirements
Before you begin, you need the following:

JavaMail API Library Download from the official GitHub:

JavaMail (javax.mail.jar):
[https://repo1.maven.org/maven2/com/sun/mail/javax.mail/1.6.2/javax.mail-1.6.2.jar]

JavaBeans Activation Framework (activation.jar) Download:

activation.jar:
[https://repo1.maven.org/maven2/com/sun/mail/javax.mail/1.6.2/javax.mail-1.6.2.jar]

📁 Place both JARs in your project’s WEB-INF/lib folder.

📝 Instructions to Use:
Download both .jar files.

Place them in your project’s WEB-INF/lib folder if using a Java web app.

Make sure your server (e.g., Apache Tomcat) loads them at runtime.

📄 Step-by-Step Implementation in JSP
Here’s a complete working example of sending an email from a sendmail.jsp file.

<%@ page import="java.util.*, javax.mail.*, javax.mail.internet.*" %>
<%
    final String senderEmail = "your_email@gmail.com";
    final String senderPassword = "your_app_password"; // App Password, not Gmail password
    String recipient = "recipient@example.com";
    String subject = "Test Mail from JSP";
    String messageText = "This is a test email sent from JSP page.";

    Properties props = new Properties();
    props.put("mail.smtp.host", "smtp.gmail.com");
    props.put("mail.smtp.port", "587");
    props.put("mail.smtp.auth", "true");
    props.put("mail.smtp.starttls.enable", "true");

    Session session = Session.getInstance(props,
        new javax.mail.Authenticator() {
            protected PasswordAuthentication getPasswordAuthentication() {
                return new PasswordAuthentication(senderEmail, senderPassword);
            }
        });

    try {
        Message message = new MimeMessage(session);
        message.setFrom(new InternetAddress(senderEmail));
        message.setRecipients(Message.RecipientType.TO, InternetAddress.parse(recipient));
        message.setSubject(subject);
        message.setText(messageText);
        Transport.send(message);

        out.println("<h3>Email sent successfully!</h3>");
    } catch (MessagingException e) {
        out.println("<h3>Error: " + e.getMessage() + "</h3>");
        e.printStackTrace(out);
    }
%>

🔐 Gmail App Password Setup
Since Google doesn't allow you to use your Gmail password directly, follow these steps:

Turn on 2-Step Verification for your Google account.

Go to: [https://myaccount.google.com/apppasswords]

Generate a new App Password.

Use this password in place of your Gmail password in the JSP code.

📌 Tips
Never use real credentials in public code.

Always handle exceptions gracefully.

For real-world projects, separate business logic (email sending) into a Servlet or Java Bean instead of putting it directly in JSP.
🧾 Summary
| Component | Description |
| -------------- | --------------------------------- |
| JSP Page | Sends email using JavaMail API |
| JavaMail Jar | javax.mail-1.6.2.jar |
| Activation Jar | activation-1.1.1.jar |
| SMTP Server | Gmail SMTP (smtp.gmail.com:587) |
| Authentication | Gmail App Password |

Node JS Upload Multiple Files

Sabir Sheikh — Thu, 12 Jun 2025 09:15:52 +0000

You can upload multiple files using multer in Node.js and return their filenames. Here's how:

1. Setup Express & Multer
Install dependencies:

npm install express multer cors

2. Configure the Server
Set up an Express server with multer:

const express = require('express');
const multer = require('multer');
const cors = require('cors');

const app = express();
app.use(cors());

const storage = multer.diskStorage({
    destination: './uploads/',
    filename: (req, file, cb) => {
        cb(null, Date.now() + '-' + file.originalname);
    }
});

const upload = multer({ storage: storage });

app.post('/upload', upload.array('files', 10), (req, res) => {
    const filenames = req.files.map(file => file.filename);
    res.json({ message: 'Files uploaded successfully', filenames });
});

app.listen(3000, () => console.log('Server running on port 3000'));

3. Frontend Fetch Request
Send multiple files using fetch:

<input type="file" id="fileInput" multiple>
<button onclick="uploadFiles()">Upload</button>

<script>
function uploadFiles() {
    const fileInput = document.getElementById('fileInput');
    const files = fileInput.files;
    const formData = new FormData();

    for (let file of files) {
        formData.append('files', file);
    }

    fetch('http://localhost:3000/upload', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => console.log('Uploaded Files:', data.filenames))
    .catch(error => console.error('Error:', error));
}
</script>

4. Running the Project
Start your server (node server.js).

Open the HTML file in your browser.

Select multiple files and click "Upload."

Upload File Using Fetch Method

Sabir Sheikh — Thu, 12 Jun 2025 09:08:10 +0000

Using the fetch method, you can send files from the frontend to your Node.js backend for processing. Here's a simple example:

1. Backend (Node.js with Express & Multer)
Set up an Express server to handle file uploads:

const express = require('express');
const multer = require('multer');
const cors = require('cors');

const app = express();
app.use(cors());

const storage = multer.diskStorage({
    destination: './uploads/',
    filename: (req, file, cb) => {
        cb(null, file.originalname);
    }
});

const upload = multer({ storage: storage });

app.post('/upload', upload.single('file'), (req, res) => {
    res.json({ message: 'File uploaded successfully', filename: req.file.filename });
});

app.listen(3000, () => console.log('Server running on port 3000'));

2. Frontend (Using fetch to Upload File)
Use JavaScript's fetch API to send a file to your backend:

<input type="file" id="fileInput">
<button onclick="uploadFile()">Upload</button>

<script>
function uploadFile() {
    const fileInput = document.getElementById('fileInput');
    const file = fileInput.files[0];

    const formData = new FormData();
    formData.append('file', file);

    fetch('http://localhost:3000/upload', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));
}
</script>

3. Running the Project
Start the Node.js server (node server.js)

Open the HTML file in your browser, select a file, and click "Upload."

This will send the file to the backend using the fetch method and store it in the uploads directory.

Would you like to extend this to store blog content dynamically in a database?

Upload file Node JS

Sabir Sheikh — Thu, 12 Jun 2025 09:05:47 +0000

1. Initialize Your Project
Create a new Node.js project and install dependencies:

mkdir my-blog
cd my-blog
npm init -y
npm install express multer body-parser ejs

2. Configure Express Server
Set up an Express server with multer for file uploads:

const express = require('express');
const multer = require('multer');
const path = require('path');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('uploads'));
app.set('view engine', 'ejs');

const storage = multer.diskStorage({
    destination: './uploads/',
    filename: (req, file, cb) => {
        cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
    }
});

const upload = multer({ storage: storage });

app.post('/upload', upload.single('image'), (req, res) => {
    res.render('blog', { image: req.file.filename });
});

app.get('/', (req, res) => {
    res.render('index');
});

app.listen(3000, () => console.log('Server running on port 3000'));

3. Create Blog Templates
Create an index.ejs file for the upload form:

<form action="/upload" method="POST" enctype="multipart/form-data">
    <input type="file" name="image">
    <button type="submit">Upload</button>
</form>

Create a blog.ejs file to display the uploaded file:

<h2>Uploaded Blog Image</h2>
<img src="/<%= image %>" alt="Blog Image">

4. Run Your Blog
Start the server and access the blog at http://localhost:3000.

Would you like to integrate a database to store blog content dynamically? I can help with that too

🔧 Add, Edit, and Delete Questions Dynamically in Salesforce Using LWC

Sabir Sheikh — Wed, 21 May 2025 14:42:53 +0000

In many audit-related Salesforce applications, users often need to maintain a dynamic list of questions — especially in sectors like manufacturing where compliance and quality assurance require periodic updates. In this blog post, we’ll walk through building a Lightning Web Component (LWC) that allows users to add, edit, and delete questions and store them in a custom field as JSON.

🧩 Use Case
We want to allow auditors to manage a list of questions (add, edit, delete) directly from a record page, and save them in a field (QuestionSet_c) of a custom object (Auditor_Question_c).

📦 Salesforce Schema Setup
Object: Auditor_Question__c

Fields Used:
Name (Standard)
QuestionSet__c (Long Text Area / Rich Text – stores JSON array of questions)

🧠 Key Functionalities

Fetch record data using @wire(getRecord)
Display a list of questions (parsed from JSON)
Add new questions
Edit existing questions
Delete unwanted questions
Update QuestionSet__c field with modified JSON using updateRecord

✅ AuditorQuestionController.cls

public with sharing class AuditorQuestionController {

    @AuraEnabled(cacheable=true)
    public static Auditor_Question__c findRecordByName(String name) {
        // Validate input
        if (String.isBlank(name)) {
            return null;
        }

        // Query the record by Name
        List<Auditor_Question__c> results = [
            SELECT Id, Name, QuestionSet__c
            FROM Auditor_Question__c
            WHERE Name = :name
            LIMIT 1
        ];

        // Return the first result or null if not found
        return results.isEmpty() ? null : results[0];
    }
}

🔍 Notes:
The @AuraEnabled(cacheable=true) annotation makes it usable in LWC wire adapters for better performance (read-only).

with sharing ensures field-level security and record-level access are respected.

You can add fields like QuestionSet__c as required for your use case.

You can also expand this controller with additional methods like:

updateQuestions(String recordId, String questionsJson)
createNewAuditorQuestion(...)

💻 LWC Template (HTML)

<template>
    <lightning-card title="Add New Question New">
        <div class="slds-p-around_medium">
            <p><strong>Record Name:</strong> {recordName}</p>

            <lightning-input
                label="Add New Question"
                value={inputValue}
                onchange={handleInputChange}>
            </lightning-input>

            <lightning-button
                label="Add Question"
                class="slds-m-top_medium"
                onclick={handleAdd}>
            </lightning-button>

            <template if:true={questionArray}>
                <template for:each={questionArray} for:item="q">
                    <div key={q.id} class="slds-box slds-m-top_small">
                        <template if:false={isEdit}>
                            <p>{q.Question}</p>
                        </template>
                        <template if:true={isEdit}>
                            <lightning-input
                                value={q.Question}
                                data-id={q.id}
                                onchange={handleChangeUpdateQuestion}
                                label="Edit Question">
                            </lightning-input>
                        </template>

                        <template if:false={isEdit}>
                            <lightning-button label="Edit" onclick={handleEdit}></lightning-button>
                        </template>
                        <template if:true={isEdit}>
                            <lightning-button label="Update" onclick={handleUpdate}></lightning-button>
                            <lightning-button label="Cancel" onclick={handleEdit}></lightning-button>
                        </template>

                        <template if:false={isEdit}>
                            <lightning-button
                                variant="destructive"
                                label="Delete"
                                data-id={q.id}
                                onclick={handleDelete}>
                            </lightning-button>
                        </template>
                    </div>
                </template>
            </template>
        </div>
    </lightning-card>
</template>

🧠 LWC JavaScript (JS)

import { LightningElement, api, track, wire } from 'lwc';
import { getRecord, updateRecord } from 'lightning/uiRecordApi';
import QUESTION_SET_FIELD from '@salesforce/schema/Auditor_Question__c.QuestionSet__c';
import NAME_FIELD from '@salesforce/schema/Auditor_Question__c.Name';

const FIELDS = [NAME_FIELD, QUESTION_SET_FIELD];

export default class AddMoreQuestionsNew extends LightningElement {
    @api recordId;
    @track recordName = '';
    @track inputValue = '';
    @track questionArray = [];
    @track isEdit = false;

    @wire(getRecord, { recordId: '$recordId', fields: FIELDS })
    wiredRecord({ error, data }) {
        if (data) {
            this.recordName = data.fields.Name.value;
            try {
                const decoded = data.fields.QuestionSet__c.value.replace(/&quot;/g, '"');
                this.questionArray = JSON.parse(decoded);
            } catch (e) {
                console.error("Failed to parse JSON:", e);
            }
        } else if (error) {
            console.error('Error fetching record:', error);
        }
    }

    handleInputChange(event) {
        this.inputValue = event.target.value;
    }

    handleAdd() {
        const trimmed = this.inputValue.trim();
        if (trimmed) {
            const newQuestion = {
                id: Date.now(),
                Question: this.inputValue
            };
            this.questionArray = [...this.questionArray, newQuestion];
            this.inputValue = '';
            this.updateQuestionSet(JSON.stringify(this.questionArray));
        }
    }

    handleEdit() {
        this.isEdit = !this.isEdit;
    }

    handleChangeUpdateQuestion(event) {
        const id = parseInt(event.target.dataset.id, 10);
        const updatedValue = event.target.value;
        this.questionArray = this.questionArray.map(item =>
            item.id === id ? { ...item, Question: updatedValue } : item
        );
    }

    handleUpdate() {
        this.updateQuestionSet(JSON.stringify(this.questionArray));
        this.handleEdit();
    }

    handleDelete(event) {
        const idToDelete = parseInt(event.target.dataset.id, 10);
        this.questionArray = this.questionArray.filter(q => q.id !== idToDelete);
        this.updateQuestionSet(JSON.stringify(this.questionArray));
    }

    updateQuestionSet(questionJsonString) {
        const fields = {
            Id: this.recordId,
            [QUESTION_SET_FIELD.fieldApiName]: questionJsonString
        };

        updateRecord({ fields })
            .then(() => {
                // Success message or toast can be shown here
            })
            .catch(error => {
                console.error('Update error:', error);
                alert('Failed to update: ' + (error.body?.message || error.message));
            });
    }
}

✅ AddMoreQuestionsNew.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>63.0</apiVersion>
      <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

DEV Community: Sabir Sheikh

Accept Payments in Salesforce: A Complete Guide to Stripe Integration

Accept Payments in Salesforce: A Complete Guide to Stripe Integration

Prerequisites

Step 1: Get Your Stripe API Keys

Step 2: Create the Salesforce Data Model

Step 3: Secure the Connection with Named Credentials

Step 4: The Apex Controller (Backend Logic)

Step 5: Configure CSP Trusted Sites

Step 6: The Lightning Web Component (Frontend)

Part A: Create the Static Resource for Stripe.js

Part B: Create the LWC

Part C: Write the Code

Step 7: Deploy and Add to Your Home Page

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

🔗 Salesforce Integration with JavaScript: Get Access Token & Perform CRUD

Building a QR Code Generator in Salesforce Using LWC

1. Prerequisites

2. Download and Upload the QR Code Library

3. Create a New Lightning Web Component

4. Implement the Component Code

5. Deploy and Test the Component

6. Possible Enhancements

🔐 Building JWT Authentication in ASP.NET Core (Step-by-Step)

🧱 Prerequisites

🎯 Project Overview

🛠 Step 1: Configure JWT in Startup.cs

📦 Step 2: Create JWT Controller

📦 LoginModel Class

🧪 Testing the Flow

✅ Final Thoughts

Complete Guide: Building a Google Forms to Salesforce Webhook Integration

Complete Guide: Sending Google Form Data to Salesforce Using Webhooks

How to Send Email Using JSP and JavaMail API

Node JS Upload Multiple Files

Upload File Using Fetch Method

Upload file Node JS

🔧 Add, Edit, and Delete Questions Dynamically in Salesforce Using LWC

🛠 Step 1: Configure JWT in `Startup.cs`