Simplified Payments: Salesforce Integration with Stripe using Lightning Web Components and Node.js

In the world of e-commerce and online businesses, having a streamlined payment processing system is crucial. Salesforce, being a powerful platform, can be integrated with external payment gateways like Stripe to handle secure and simplified payment transactions. In this comprehensive guide, we’ll walk through the step-by-step process of integrating Salesforce with Stripe for simplified payments using a Node.js endpoint for making the API callouts, including real-world scenarios and best practices.

Prerequisites

Before we begin, ensure you have the following prerequisites in place:

1. A Salesforce Developer Account or Sandbox for testing purposes.
2. A Stripe Account to obtain the necessary API keys.
3. Node.js installed on your development machine for creating the endpoint.

Step 1: Setting Up Stripe Integration

1. Log in to your Stripe account and navigate to the Dashboard.
2. Retrieve your API keys (Publishable Key and Secret Key) from the Developers section.
3. In Salesforce, navigate to “Setup” and search for “Remote Site Settings.”
4. Add the Stripe API URL (https://api.stripe.com) to the Remote Site Settings to enable communication with Stripe’s servers.

Step 2: Creating a Lightning Web Component (LWC) for Payment Form

In this real-world scenario, let’s create a payment form that allows customers to make a one-time payment for a subscription service. We’ll use a Lightning Web Component (LWC) to handle the payment processing.

1. Create a new LWC named “PaymentForm” to handle payment details.

<!-- paymentForm.html -->
<template>
  <div>
    <lightning-input type="number" label="Amount" value={amount} onchange={handleAmountChange}></lightning-input>
    <lightning-input type="text" label="Card Number" value={cardNumber} onchange={handleCardNumberChange}></lightning-input>
    <lightning-input type="text" label="Expiry Date (MM/YY)" value={expiryDate} onchange={handleExpiryDateChange}></lightning-input>
    <lightning-input type="text" label="CVC" value={cvc} onchange={handleCvcChange}></lightning-input>
    <lightning-button label="Pay" onclick={handlePayment}></lightning-button>
  </div>
</template>

// paymentForm.js
import { LightningElement, track } from 'lwc';
import makePayment from '@salesforce/apex/PaymentController.makePayment';

export default class PaymentForm extends LightningElement {
  @track amount;
  @track cardNumber;
  @track expiryDate;
  @track cvc;

  handleAmountChange(event) {
    this.amount = event.target.value;
  }

  handleCardNumberChange(event) {
    this.cardNumber = event.target.value;
  }

  handleExpiryDateChange(event) {
    this.expiryDate = event.target.value;
  }

  handleCvcChange(event) {
    this.cvc = event.target.value;
  }

  handlePayment() {
    // Call Apex method to process the payment with the Node.js endpoint
    makePayment({ 
      amount: this.amount, 
      cardNumber: this.cardNumber, 
      expiryDate: this.expiryDate, 
      cvc: this.cvc 
    })
      .then((result) => {
        // Handle the payment success or failure
        if (result === 'success') {
          // Payment successful - perform necessary actions (e.g., update records, send email)
          this.showToast('Success', 'Payment successful', 'success');
        } else {
          // Payment failed - display error message to the user
          this.showToast('Error', 'Payment failed', 'error');
        }
      })
      .catch((error) => {
        // Handle error
        this.showToast('Error', 'An error occurred', 'error');
      });
  }

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

Step 3: Creating an Apex Controller for Payment Processing

1. Create an Apex class named “PaymentController” to handle payment processing.

public with sharing class PaymentController {
  @AuraEnabled
  public static String makePayment(String amount, String cardNumber, String expiryDate, String cvc) {
    try {
      // Make a callout to the Node.js endpoint for processing the payment
      String endpointUrl = 'https://your-nodejs-endpoint-url.com/payment'; // Replace with your actual endpoint URL
      String payload = 'amount=' + amount + '&cardNumber=' + cardNumber + '&expiryDate=' + expiryDate + '&cvc=' + cvc;
      
      HttpRequest req = new HttpRequest();
      req.setEndpoint(endpointUrl);
      req.setMethod('POST');
      req.setHeader('Content-Type', 'application/x-www-form-urlencoded');
      req.setBody(payload);

      Http http = new Http();
      HttpResponse res = http.send(req);

      if (res.getStatusCode() == 200) {
        // Payment successful - perform necessary actions (e.g., update records, send email)
        return 'success';
      } else {
        // Payment failed - display error message to the user
        return 'failure';
      }
    } catch (Exception e) {
      // Handle any errors and return 'failure' on failure
      return 'failure';
    }
  }
}

Step 4: Creating a Node.js Endpoint with Stripe

1. Create a new Node.js project and install the required packages.

npm init -y
npm install express body-parser stripe --save

2. Create an index.js file and set up an Express server with a route for payment processing.

// index.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 3000; // Change to your desired port number
const stripe = require('stripe')('sk_test_your_stripe_secret_key'); // Replace with your actual Stripe secret key

app.use(bodyParser.urlencoded({ extended: true }));

app.post('/payment', async (req, res) => {
  try {
    // Retrieve payment details from the request body
    const amount =

 req.body.amount;
    const cardNumber = req.body.cardNumber;
    const expiryDate = req.body.expiryDate;
    const cvc = req.body.cvc;

    // Process the payment using Stripe
    const paymentIntent = await stripe.paymentIntents.create({
      amount: amount * 100,
      currency: 'usd',
      payment_method_data: {
        type: 'card',
        card: {
          number: cardNumber,
          exp_month: expiryDate.split('/')[0],
          exp_year: expiryDate.split('/')[1],
          cvc: cvc,
        },
      },
    });

    // Return 'success' if the payment was successful
    if (paymentIntent.status === 'succeeded') {
      res.send('success');
    } else {
      res.send('failure');
    }
  } catch (error) {
    // Handle any errors and return 'failure' on failure
    console.error(error);
    res.send('failure');
  }
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

3. Start the Node.js server.

node index.js

Conclusion

By following this step-by-step guide, you have successfully integrated Salesforce with Stripe to handle simplified payments. The Lightning Web Component (LWC) interacts with the Node.js endpoint with Stripe integration for payment processing. The Node.js endpoint securely communicates with Stripe, allowing businesses to provide a smooth and secure payment experience to their customers.