Salesforce Serverless PayPal Integration in 2024

Integrating payments into your Salesforce solution typically involves setting up both a client-side environment configured with a payment SDK and a server-side component equipped with a backend payment SDK. This dual setup is essential for processing payments. Exploring a typical payment flow, such as that for a PayPal Braintree Drop-In integration, highlights this process:

Client SDKs are tasked with gathering details of the payment method, such as credit card information or PayPal accounts.
Server SDKs handle the communication between your server and the Braintree gateway, managing payment requests and processing.

What is a Nonce?

In the context of Braintree, a nonce is a secure, one-time-use reference to payment information. It represents the payment method details and is generated by Braintree's client-side SDK.

The nonce is used to securely transmit payment information from the client to your server without exposing sensitive details like credit card numbers.

What are the Payment Methods?

Credit and Debit Cards: Braintree supports major credit and debit cards, including Visa, Mastercard, American Express, Discover, JCB, and Diners Club.
PayPal: As a PayPal service, Braintree seamlessly integrates PayPal payments, offering a familiar checkout experience for users.
Apple Pay: Braintree supports Apple Pay, enabling secure and fast payments on iOS devices and Safari.
Google Pay: Google Pay integration is available, allowing users to make payments using their Google account.
Other Local Payment Methods: Depending on the region, Braintree supports various local payment methods.

Don't forget to check out: All You Need to Know About No Code Salesforce and PayPal Integration

Connecting Payment Methods to Drop-in UI

The Drop-in UI is Braintree's pre-built, ready-to-go payment UI, offering a quick way to start accepting payments.

However, you would need to set up a node.js server hosted in Heroku, and integrate your Salesforce client with node.js backend.

Connecting Payment Methods to Hosted Fields

This is a similar approach, hosted fields are SDK components that replace individual fields in your checkout form, such as those for card number, expiration date, and CVV.

Collected payment data must be sent to a secure node.js server hosted in Heroku to capture the payment.

PayPal JavaScript SDK Alternative

To avoid creating a separate backend server, you can use PayPal JavaScript SDK for checkout experience, and use Salesforce only to display payment options and save completed payment transaction.

You can use the JavaScript SDK to render payment buttons, and credit and debit card form fields (hosted-fields).

Drop-in UI vs Hosted Fields

Integrating Braintree's Drop-in UI and Hosted Fields into Salesforce offers distinct advantages and challenges. Here’s a pros and cons approach that incorporates your remarks and reflects on broader considerations:

Drop-in UI

Pros:

Quickly embeds a comprehensive payment UI into Salesforce applications, reducing development time.
Provides a seamless and intuitive payment experience with minimal effort.
Ensures security and compliance without complex measures on the merchant's side.
Supports various payment methods.

Cons:

Limited options for customization and branding.
Dependence on Braintree’s UI design choices, potentially leading to a generic checkout experience.
Managing third-party scripts and ensuring they align with Salesforce’s security model.

Hosted Fields

Pros:

Offers the ability to create a custom, branded payment form.
Developers have greater control over the checkout experience.
Handles sensitive payment information securely.

Cons:

Requires more development work, including custom validation, styling, and error handling.
Achieving the desired look and feel can be time-consuming.
Embedding Hosted Fields can be challenging within Salesforce’s security context (LockerService in LWC).

Check out another amazing blog by Vimera here:

Payment Integration Demo

When working with LWC in Salesforce and integrating with external libraries like Braintree's Drop-in UI, one common issue is accessing DOM elements directly. This is because LWC operates in a Shadow DOM for encapsulation and security, which restricts direct DOM access and manipulation.

If you use Braintree Drop-in with Light DOM enabled, you will receive the following error. Either html element and selector doesn’t currently work as it should, so the Braintree SDK should be used with Shadow DOM-enabled component.

To continue reading, please visit our website.

This article is prepared by our Salesforce Developer Konstantin Sitkin.