---
schema_version: "1"
id: a656e1da64cf50e9e070be5dd76f08afb9e63f05a701ab3ae31e4775354ac49e
title: Client-Side Payment Processing Flow
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/commerce-cloud/salesforce-commerce/guides/d2c-commerce/b2b-b2c-comm-checkout-payment-clientside-setup.md
canonical_url: https://developer.salesforce.com/docs/commerce/salesforce-commerce/guide/b2b-b2c-comm-checkout-payment-clientside-setup.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 2e30a7b6ab81e3df9d9f0da9f962029be9f9ce6b5ec2026ee02cf2017bf5b0a9
products:
  - B2B Commerce Developer Guide
  - Salesforce APIs
---
# Client-Side Payment Processing Flow

With client-side payment processing, you create a checkout UI component that interacts directly with a payment provider. You also implement a payment adapter that independently validates transactions.

Create your store and configure checkout before you set up your payment system.

**note:** Among the benefits of the client-side integration model is PCI compliance and security. Isolating the handling of sensitive payment data in a cross-domain UI component owned by the payment provider means much of the PCI burden is on the provider.

Similar to a server side integration, a client side integration requires creating a PaymentGatewayAdapter but with these differences:

- The adapter implements a PostAuth request to validate the transaction. The PostAuth request type ensures that the provided payment authorization token is valid. The client calls the Checkout Payment API with the requestType PostAuth, which in turn invokes the adapter with a commercepayments.PostAuthorizationRequest. That request provides the adapter with the amount, currency code, and payment token.  The adapter can then use this data to validate the transaction and provide a response..
- A custom Checkout UI component (which may wrap or adapt a payment provider component).
- A server-side call to fetch keys or configurations required to load the Checkout UI component. You use a standard Salesforce Apex Controller to bootstrap the client component.

A payment provider client typically manages the authorization and tokenization functions. In that case, the [Commerce Payment Connect APIs](https://developer.salesforce.com/docs/atlas.en-us.chatterapi.meta/chatterapi/connect_resources_payments.htm) required for client-side implementation are:

- Capture
- ReferencedRefund
- AuthorizationReversal
- PostAuth

The diagram depicts a high level view of a typical client-side integration.

![Diagram of Client-side payment flow.](https://developer.salesforce.com/media/d2c-commerce/clientside_payment_flow.png)When a shopper clicks Place Order:

1.  a. The Client Payment Controller initiates a payment transaction with the Payment Apex Controller and 1. b. The Payment Apex Controller initiates a transaction with the Payment Gateway.

2.  The Client posts an authenticated and tokenized transaction to the Payment Gateway This is the client-to-gateway transaction that gives client side payments its name. Typically this is done with payment provider-built UI components.

3.  a. The UI client component calls the Checkout payment API with a requestType of PostAuth to validate the transaction and 3. b. The Apex Payment Adapter processes the PostAuth request, fetching the transaction details - including currency code, amount and account ID - from the gateway for verification. (See [ConnectApi.PostAuthorizeRequest](https://developer.salesforce.com/docs/atlas.en-us.apexref.meta/apexref/apex_connectapi_input_post_auth.htm). ) The Apex implementation then returns the gateway auth code, gateway result code, Salesforce result code and the amount. If the payment is asynchronous and can’t be fully confirmed at 3. b, see [Create a Custom Payment Component](https://developer.salesforce.com/docs/commerce/salesforce-commerce/guide/b2b-b2c-comm-integrate-payment-lwc.md).

4.  In an asynchronous implementation, the Payment Gateway issues a web hook notification to affirm the transaction.

To implement client-side payment processing, see

- [Create a Custom Payment Component](https://developer.salesforce.com/docs/commerce/salesforce-commerce/guide/b2b-b2c-comm-integrate-payment-lwc.md)
- [Customize a Checkout Component](https://developer.salesforce.com/docs/commerce/salesforce-commerce/guide/b2b-b2c-comm-create-checkout-component.md)
- [Payment Gateway Adapters](https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/apexcode/apex_commercepayments_adapter_intro.htm)
- [Connect a Payment Gateway to Store Checkout](https://developer.salesforce.com/docs/commerce/salesforce-commerce/guide/b2b-b2c-comm-checkout-connect-gateway.md)

**See Also**

- [_Apex Reference Guide_: Payment Gateway Adapters](https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/apexcode/apex_commercepayments_adapter_intro.htm)