Salesforce Stripe Integration Using Payment Intents API

import { LightningElement, track } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';

import createPaymentIntent from '@salesforce/apex/StripePaymentController.createPaymentIntent';
import saveStripeTransaction from '@salesforce/apex/StripePaymentController.saveStripeTransaction';
import getStripePublishableKey from '@salesforce/apex/StripePaymentController.getStripePublishableKey';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

const STRIPE_JS = 'https://js.stripe.com/v3/';

export default class StripePayment extends LightningElement {
    @track amount;
    @track currencyCode = 'usd';
    @track billingName;
    @track billingEmail;

    @track error;
    @track paymentStatus;
    @track isLoading = false;

    stripe;
    card;
    stripeInitialized = false;

    renderedCallback() {
        if (this.stripeInitialized) return;

        // Load Stripe.js and fetch publishable key in parallel
        Promise.all([
            loadScript(this, STRIPE_JS),
            getStripePublishableKey()
        ])
        .then(([_, publishableKey]) => {
            this.stripe = Stripe(publishableKey);
            const elements = this.stripe.elements();
            this.card = elements.create('card', {
                hidePostalCode: true,
                style: {
                    base: {
                        fontSize: '16px',
                        color: '#32325d',
                        '::placeholder': { color: '#aab7c4' }
                    },
                    invalid: { color: '#fa755a', iconColor: '#fa755a' }
                }
            });

    handleInputChange(evt) {
        const { name, value } = evt.target;
        // Keep mapping safe and explicit
        if (name === 'amount') this.amount = value;
        if (name === 'currencyCode') this.currencyCode = value.toLowerCase();
        if (name === 'billingName') this.billingName = value;
        if (name === 'billingEmail') this.billingEmail = value;
    }

    async handlePay() {
        this.error = null;
        this.paymentStatus = null;
        this.isLoading = true;

        // Basic validation
        if (!this.amount || !this.currencyCode || !this.billingName || !this.billingEmail) {
            this.error = 'Please fill all required fields.';
            this.isLoading = false;
            return;
        }

        try {
            // 1) Create PaymentIntent on server
            const response = await createPaymentIntent({
                amount: parseFloat(this.amount),
                currencyCode: this.currencyCode,
                billingName: this.billingName,
                billingEmail: this.billingEmail
            });

           
            if (confirmResult.error) {
                // show Stripe error
                this.error = confirmResult.error.message;
                this.dispatchEvent(new ShowToastEvent({
                    title: 'Payment failed',
                    message: this.error,
                    variant: 'error'
                }));
            } else if (confirmResult.paymentIntent && confirmResult.paymentIntent.status === 'succeeded') {
                const paymentIntentId = confirmResult.paymentIntent.id;
                // 3) Save transaction in Salesforce
                await saveStripeTransaction({
                    amount: this.amount.toString(),
                    currencyCode: this.currencyCode,
                    paymentIntentId: paymentIntentId,
                    billingName: this.billingName,
                    billingEmail: this.billingEmail
                });

                this.paymentStatus = '💰 Payment successful!';
                this.dispatchEvent(new ShowToastEvent({
                    title: 'Success',
                    message: 'Payment completed and saved',
                    variant: 'success'
                }));
            } else {
                this.error = 'Payment did not complete.';
            }
        } catch (err) {
            console.error('Payment error', err);
            this.error = err?.body?.message || err.message || String(err);
            this.dispatchEvent(new ShowToastEvent({
                title: 'Error',
                message: this.error,
                variant: 'error'
            }));
        } finally {
            this.isLoading = false;
        }
    }
}