CheckoutChamp
Submit TicketStatus
  • CheckoutChamp
  • Funnel Builder
    • Onboarding & Activation
      • Go Live Checklist
    • Dashboard Overview (APP)
    • Creating & Editing Funnels/Pages
      • Funnel Visualizer and Page Builder
        • Funnel Visualizer
          • Page Types
          • Connecting Funnel Pages
            • Route An Arrow For New And Repeat Customers
          • Edit Funnel Settings
            • Tracking Pixels
              • Server-side Google Tag Manager
            • Offers and Upsells
            • Collections
            • Coupons
            • Configure Google Analytics
            • Gateways
            • Affiliates
              • Everflow
            • Sales Tax Profiles
            • Add Ons
              • PAAY Add On
              • Route Add On
              • ShipEngine Add On
              • Google Places
              • Fraud Manager Add On
              • Facebook Messenger
              • reCAPTCHA Enterprise
            • SMTP Accounts
            • Fulfillment Houses
            • Ship Profiles
            • Fonts
            • Payments
              • Affirm
              • Afterpay
              • Amazon Pay
              • Apple Pay
                • Legacy Apple Pay Setup (Apple Pay Plugin)
              • Multi-Pay Rebills
              • BitPay
              • Bancontact
              • BLIK
              • Boleto
              • Google Pay
              • iDEAL
              • Klarna
              • P24
              • PayPal Seamless Checkout
                • Fastlane
              • SEPA
              • Sezzle
              • TWINT
            • Social Proof
            • Maintenance
          • URL Customization
          • Page Templates
        • Page Builder
          • Builder Toolbar
            • Device View Changer
            • Popups
          • Style Manager
          • Layer Manager
            • Hiding and Revealing Elements
          • Building Blocks
            • Basic Blocks
              • Rows & Columns
            • Form Blocks
              • Shopping Cart Element
            • Button Blocks
              • Button & Link Actions
            • Product Blocks
            • Carousel / Slider Blocks
            • Icon Blocks
            • Social Media Blocks
            • Testimonial Blocks
            • Extra Blocks
            • My Element Blocks
        • 🆕Page Builder 2.0
          • 📰New Features!
          • Builder Toolbar
            • Device View Changer
            • Popups
          • Settings & Style Manager
          • Layer Manager
            • Hiding and Revealing Elements
          • Building Blocks
            • Basic Blocks
              • Rows & Columns
            • Form Blocks
              • Shopping Cart Element
            • Button Blocks
              • Button & Link Actions
            • Product Blocks
            • Extra Blocks
              • Bullet List
              • Progress Bar
              • Collapsible List / FAQ Section
              • Testimonial Blocks
              • Carousel / Slider Blocks
              • Survey
              • Timer
            • My Element Blocks
          • Page Building Tips
            • Using Shopify information on a Thank You page
            • Placeholders and Input Formats
            • Hide element if box is checked/ Billing address same as Shipping
            • How to set Anchor Links
            • How to convert a button into a link
            • Adding Age Consent
            • Creating a Split Variation
            • Subscribe & Save
            • Tokens
            • Redirect from CheckoutChamp to externally hosted upsell or Thank You page
            • Duplicate Input Indicator
            • Product Quantity Select
            • Make a button appear after a set amount of time
            • Making A New Section Appear After a Timer Expires
            • Timer - Route to next page
            • Use link or button to initiate a pop-up
            • Convert Checkbox and Radio
            • Lazy Loading
            • Element Toolbar
            • Applying custom fields to inputs
            • Shipping Profiles
            • Duplicating Pages & Funnels
            • Bootstrap Integration
            • Customer File Uploads
            • Product Tiles
            • Variant Selection
              • Product Variant Selection
              • Customized Variant Bundles (Single Variant)
              • Product Checkbox
            • Product Table
            • Hover Effects (adding Pseudo-classes)
            • Page Sizes and Image Dimensions
            • Flex Settings
            • Using the Survey Element
            • Custom Classes
            • Creating a Marketing Opt-in Checkbox
            • Common Page Elements
            • Create a Common Menu
            • Currency Selector
            • Acquire and Send Session Data to 3rd Party
            • Language Replacement Mapping
            • "Upgrade" or Replace a Product
            • Pass custom parameter on URL and store onto order
            • Product Drop Down / Select
            • Genders
            • Keep customers on Upsell Page after buying an upsell
            • Dynamic Order Bumps
            • Dynamic Upsells
            • Main Site Color
      • Adding Local HTML Files
      • Domain Configuration
        • Domain Trouble Shooting
        • DNS Troubleshooting Guide
        • Redirecting your Root (Apex) Domain
        • GDPR by Clym
      • Publishing a Funnel
      • Basic SEO
    • Redirect Storefront to CheckoutChamp
      • BigCommerce Plugin
        • BigCommerce Checkout Redirect
        • Recurring Products
      • WooCommerce Plugin
        • WooCommerce Checkout Redirect
      • Magento Plugin
      • Redirect external funnel to CheckoutChamp Checkout
      • Using Google Analytics with Redirect
    • Customer/Membership Portal
      • Customer Portal (Without Plugin)
      • Membership Portal with CustomClub Plugin
      • SSO with External Sites
    • Account Settings
      • Domain Forwarding
    • Analytics Definitions
  • CRM
    • Getting Started in your CRM!
    • CRM Dashboard
    • CRM Account Settings
      • Fraud Protection
      • CRM Subscription Page
      • Enable Automatic Cancel on Refund and Void
      • Staggered Rebills
    • Customer Section
      • Customer Service
        • Customer Service Tutorial
        • Locate a Customer Record
        • Continuity Purchase Profile
        • Refund/Void a Transaction
        • Cancel an Order
        • Cancel or Pause a Subscription
        • Restart a Subscription
        • C/S Fulfillment Actions
        • Resend emails to customers
        • Rerun a Declined New Sale
        • Merge Existing Customers
      • Order Entry
      • Fulfillment
      • Quality Assurance
    • CRM Setup
      • Product Setup
        • Product Creation
        • Product Variations
          • Variant Bundles
      • Campaign Setup
        • Creating a Campaign
        • Campaign Categories
        • Campaign Types
        • Adding a Product to a Campaign
          • Common Offer Setups
            • T-Shirt Club
        • Auto-Responder Setup
          • Autoresponder Date Formats
        • Shipping Profiles
        • Taxes
        • Campaign Coupons
        • Custom Fields
        • Adding C.O.D. to Campaigns
        • Single Transaction Orders
        • Multi-Currency
      • Call Center Setup
        • Adding and Editing Call Centers
        • Adding Call Center Agents
        • Setting Call Center Commissions
        • Batch Update Call Center Source Values
        • Cancellation Reasons, Refund Reasons, and Call Dispositions
      • Affiliate Setup
        • Adding and Editing Affiliates
        • Affiliate Tracking Link/String
        • Affiliate Pixels
          • Testing and Troubleshooting CPA Pixels
          • Testing CPC Pixels
        • Affiliate Commissions
        • Setting up an Affiliate User
        • Batch Update Affiliate Source Values
        • General External Affiliate Software/Network Setup
        • Facebook Pixel Setup (Direct API)
    • Fulfillment Section
      • Add and Editing Fulfillment House
      • Fulfillment Batch Update
      • Fulfillment Summary Report
      • Bundle Fulfillment
      • Fulfillment Statuses
      • Testing Fulfillment through Order Entry
      • Cash on Delivery setup
        • C.O.D. Order Entry Option
      • Upload Returned Orders
      • Edit Fulfillment Items
      • Fulfillment Inventory
      • Shipping Validation
    • Gateway Setup
      • Gateway List
      • Adding a Gateway
        • Testing Your Gateway Through Order Entry
      • Gateway Integrations
        • Adyen
        • Adyen V2
          • Klarna on AdyenV2
          • PayByBank on AdyenV2
          • Afterpay on AdyenV2
        • Affirm
        • Afterpay
        • Airwallex
          • Airwallex - Alternate Payments
        • Amazon Pay API Integration
        • Apple Pay
        • Authorize.net
        • Bank of America
        • BitPay
        • Braintree
        • Cardinity
        • Cardstream
          • Cardstream - Alternate Payments
        • Celerispay
        • Centrobill
        • Checkout.com
          • Checkout.com - Alternate Payments
        • Corefy
        • Easytransac
        • eMerchantPay V3
          • eMerchantPay - Alternate Payments
        • Everyware
        • Fat Zebra
        • FibonatixV2
        • FlexFactor
        • Gala Technology
          • Gala Technology - Alternate Payments
        • Google Pay API
        • HiPay 3DS
        • Innova
        • iyzico
        • Klarna
        • MARKETFLOW
        • Maverick
        • Merchant Warrior
        • MojoPay
        • Mollie
        • Moonlight Payments
        • MuchBetter
        • MyCPO
        • NMI
          • NMI - useCustomerVault Configuration
        • NomuPay
          • NomuPay - Alternate Payments
          • Klarna on NomuPay
        • OpenPath
          • IoniaPay Instant Direct Payments (OpenPath)
        • PagBrasil
        • Pathly
        • Pay.com
        • PAY.ON
        • Payex-GreenMoney
        • PayGate
        • Paynetworx
        • PayPal Commerce Checkout
          • PayPal Commerce Checkout (Direct API)
          • PayPal Commerce Checkout (Legacy)
            • PayPal Seamless Checkout - 2-Click Upsells (without Reference Transactions)
          • PayPal Commerce Checkout (SDK)
        • Paysafe V2
        • Paystrax
        • PayXpert 3DS V2
        • Pixxles
        • Poynt
        • Priority Payments
        • Quaife
        • Quantum
        • QuickPay
        • Radom
        • RocketGate
        • SafeCharge
        • Sezzle
        • Skrill
        • Solid
        • Splitit
        • Square Payments
          • Square Payments V2 (Checkout Champ builder set-up)
        • Stripe
          • Stripe - Alternate Payments
          • Klarna on Stripe
        • SurePay
        • TruCommerce
        • Trust Payments
          • Trust Payments - Alternate Payments
        • TRX
        • UrPay
        • Vantiv
        • WAAVE
        • WEBPAY
        • WhiteLabel (WL) Payments
        • WithReach
        • WorldLine (Bambora)
        • Worldline V2
          • Worldline V2 - Alternate Payments
        • Worldnet
        • Worldpay
      • Advanced Transaction Routing Interface (ATRI)
        • ATRI Algorithms
        • Cascade Profiles
        • ATRI Settings and Notifications
      • Recycle Billing
      • Standard BIN Mapping
      • PrePaid BIN Mapping
      • Decline Message Mapping
      • Dynamic Descriptors
      • RDR
      • Ethoca Refunds
      • Direct API 3DS Instructions
      • dLocal Properties
      • Zero dollar card verification
    • Reports
      • Customer Reports
        • Order Summary
        • Order Details
          • Order Statuses
        • Cancellation Report
        • Retention Report
        • Revenue Summary
        • Customer Details Report
      • Payment Reports
        • Transaction Summary Report
        • Transaction Details Report
        • Account Updater
        • Card Processing
        • Refund Details
        • Chargeback Details
        • Billing Report
        • Projected Billing
        • Sales Tax
      • Gateway Reports
        • Reserve Report
      • Sale Reports
        • Continuity Report
          • Continuity Purchase Statuses
        • Affiliate Report
      • Call Center Reports
        • Customer Service Report
      • Fulfillment Reports
        • Fulfillment Details
      • UTM Filters
      • Key Performance Indicators - KPIs
    • Admin Setup
      • Plugin Setup
      • Create a User
        • Create an Affiliate User
        • Create An API User
        • Leads Agents
      • Import
        • Import Coupons
      • Export Webhook Profiles
        • Postback Export Profiles
        • FTP Export Profile
        • Export Webhook Field Mapping Options
      • Blacklist
      • Event Logs
      • Test Cards
      • Legacy Data Import
        • CheckoutChamp PGP Encryption Procedures
        • Migrating Data From a Processor To Checkout Champ
    • Plugins
      • Accounting
        • QuickBooks Online Plugin
      • Affiliate Systems
        • Everflow Integration
        • Trackfiliates
      • Analytics and Reporting
        • Wicked Reports
      • Authentication
        • PAAY
          • Authenticating with PAAY 3DS on Landers
        • PAAY 3RI
      • Chargeback Management
        • Fraud Deflect
        • Ethoca
        • Midigator
        • Optimal Alerts
        • ChargebackHelp
      • Data Sources
        • Big Commerce
          • BigCommerce Checkout Redirect
        • Smarty
        • ClickBank
        • Facebook Marketplace
        • FFL Scope
        • FluidPay Account Updater
        • Google Shopping
        • Gorgias
        • HubSpot
        • Listrak
        • OpenBorder
        • Paperform
        • Re:amaze
        • Recharge
        • ShipEngine
        • Shopify
          • Use Shopify Products Without Shopify Redirect
          • Octane AI
        • Triple Whale
        • WooCommerce
          • Using WooCommerce Catalog with Checkout Page
        • Zapier
        • Zendesk
        • DataDojo
        • ViralSweep
      • Debt Collection
      • Email Service Providers
        • Email Service Provider Plugins
        • Email Service Provider General Set Up
        • Active Campaign Deep Integration
        • InboxFirst
        • Klaviyo
        • Constant Contact
        • SendLane
        • Infusionsoft/Keap
        • Sendgrid
        • Ontraport
        • TxtFlo
        • Postscript
        • Maropost
        • Mailchimp
        • ConvertKit
        • Attentive
      • Express Consent
        • Expressed Consent
        • Expressed Consent CRM Configuration
        • Expressed Consent Guidelines
      • FlexPay
      • Fraud Services
        • Fraud Manager
        • Kount Enterprise
        • Device Data Collector Pixel (DDC Pixel)
        • IPQS
        • NoFraud
      • Fulfillment Houses
        • General Fulfillment House Setup
        • AliExpress
        • Amware
        • CJ Dropshipping
        • DesktopShipper
        • FTP Fulfillment Option
        • Fulfillment by Amazon
        • mintsoft
        • ShipBob
        • Shiphero
        • ShipStation
        • Save Rack
        • Store Pickup
        • Pharmacy Hub
        • Promise Pharmacy
      • Identity Verification
        • 1account
        • AgeChecker.net
        • ID.me
      • IVR Systems
      • List Management Services
        • Red Crane Media
        • Sociallity
      • Membership Services
        • Circle.so Webhook Guide
        • General Membership Club Plugin Setup
        • CustomClub
        • MemberMouse
        • Kajabi Webhook Guide
      • Phone Switches
        • ViciDial
        • Ytel
        • Five9 Sales Agent Call Pop
      • Rewards
        • LoyaltyLion
        • Stamped
      • RMA Services
      • Sales Call Tracking Services
      • Shipping Services
        • InsureShip
        • Route
      • SMS
        • ClickSend (Data Shuttle)
        • Twilio SMS Setup
        • SendPlex SMS Plugin
      • SMTP Maintenance
        • SMTP Maintenance Setup
        • Sendgrid SMTP Profile
        • Maropost SMTP Profile
        • Gmail SMTP Profile
      • Tax Services
        • Avalara Tax
          • Enabling and Setting Up the Avalara AvaTax Plugin
          • Add Avalara Tax to a Campaign
          • Add Tax Code to Products
          • Add Freight Tax to Shipping
          • Avalara Tax - Order Entry
        • Interpayments
        • TaxJar
          • Add TaxJar to Campaigns
          • Add Tax Code to Products
          • Add Freight Tax Code to Shipping
          • TaxJar Address Verification- Customer Service/ Order Entry
          • TaxJar Support Page
      • Telehealth
        • Beluga EHR
      • Upsell
        • Integrated Upsell Program
    • Frequently Asked Questions (FAQS)
      • General CRM Questions
      • Order Processing Questions
      • Fulfillment Questions
      • Reporting Questions
      • Affiliate Tracking Questions
      • Developer Questions
      • Builder Questions
      • How-to articles
        • Force Bill a Purchase
        • Submit a Support Ticket
    • Click-to-Cancel
  • API Documentation
    • API Documentation
      • Recommended API Flow
      • Performing API Calls
  • Policies
    • EULA
    • Privacy Policy
    • Acceptable Use Policy
    • Billing Policy
    • GDPR
    • A-C&B
Powered by GitBook
LogoLogo

CheckoutChamp Links

  • Website Builder
  • CRM
  • Status
  • Need more help?

Refer a Friend

  • Referral Program

No account yet?

  • Schedule Sales Demo
On this page
  1. CRM
  2. Gateway Setup
  3. Gateway Integrations
  4. PayPal Commerce Checkout

PayPal Commerce Checkout (SDK)

PreviousPayPal Seamless Checkout - 2-Click Upsells (without Reference Transactions)NextPaysafe V2

Last updated 4 months ago

a

If using Checkout Champ hosted pages then follow

You may implement PayPal’s SDK to take advantage of Venmo and Pay Later payment options through PayPal. Other payment options are coming soon.

Full PayPal documentation on this approach is here:

PayPal SDK:

SDK Performance Optimization:

  1. The PayPal SDK supports PayPal, Venmo, and Pay Later only

  2. The PayPal option cannot be disabled (you cannot offer Venmo or Pay Later without a PayPal button on your page).

  3. The PayPal SDK is supported only when referenceTransactions is disabled OR referenceTransactions and vaultEnabled are both enabled.

  4. You cannot choose different payment types for checkout and upsells. For example, if a checkout is done on Venmo then the upsell must also be on Venmo.

  5. Rebills are supported on Venmo when referenceTransactions and vaultEnabled are both enabled. Rebills are never supported on Pay Later.


Checkout Page

The Checkout page contains the PayPal SDK. Call the Import Click API when the page loads to obtain a session.

  • Be sure to include pageType=checkoutPage and sessionId

If this is the first page of the funnel -

Send requestUri (include affiliate tracking string for reporting) instead of sessionId.

The response from this call will contain a sessionId which should be sent on all subsequent API calls for this session.

Step 2: PayPal SDK

Add this required script to the checkout page

<script src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID&merchant-id=MERCHANT_ID&currency=CURRENCY&enable-funding =ENABLED_FUNDINGS&disable-funding=DISABLE_FUNDING data-partner-attribution-id=PARTNER_ID"></script>

Mandatory Parameters:

  • CLIENT_ID:

    • Live: AWGTxJ1AlWxI4ZyxZ8J-Mrc_gkVkPR-CFBcT4UnlYUFvEulP6ItFrm_DnLhpZ7dlB94KhqFGd3t7dMQs

    • Sandbox: AdATBZ6vUtyH5FQ3weG-63lWwkNioUYJ0b07KEdVwrw0z_DkctGqnz2Q7O-59Dh5nLAOo0LsQOw5GTqY

  • MERCHANT_ID: Your PayPal gateway "merchantId"

  • CURRENCY: Campaign Currency code (such as USD)

  • ENABLED_FUNDINGS: venmo, paylater. Only venmo and paylater are supported. You can remove venmo or paylater if you do not want to offer both types. For upsell pages this should include only the type chosen at checkout.

  • DISABLE_FUNDING: Not all PayPal payment sources are supported. You may need to explicitly disable some options. This should be a comma-separated list of: card bancontact blik eps giropay ideal mercadopago mybank p24 sepa sofort credit (do not include this if paylater is enabled) venmo (do not include this if venmo is enabled) paylater (do not include this if paylater is enabled)

  • PARTNER_ID:

    • Live: 77XY5SSCLTNTY

    • Sandbox: T2PHJAU4MDP4J

Conditional Parameter:

  • If QA is enabled in the campaign then include intent=authorize

Step 3: PayPal button

Add a button to the body tag with an "id" attribute (example: id: paypal-button-container)

<div id="paypal-button-container"></div>

Step 4: Handle PayPal button functions

Functions required for the PayPal buttons are:

    1. It is important that you bind the Import Order call to the PayPal checkout button.

      • Be sure to include the sessionId and orderId from the previous steps, if known

    2. There are PayPal specific requirements that need to be passed to Import Order:

      1. paySource = 'PAYPAL'

      2. paypalBillerId is the value assigned to your PayPal Commerce gateway, found on your gateway list.

      3. prepaidType = PAYPAL_VENMO or PAYPAL_PAYLATER (if PayPal button is clicked then do not send this parameter)

  1. createOrder (Create a PayPal order using the parameters received from the “onClick” function)

  2. onCancel (PayPal users canceled the payment or closed the payment screen)

  3. onError (Error from PayPal)

Step 5: Upsell Pages

It is not necessary to render the PayPal SDK on upsell pages when checkout is done with PayPal or Venmo AND referenceTransactions is enabled AND vaultEnabled is enabled. In this situation the upsell will be processed with a one-click flow.

For all other situations the previous steps can be repeated on each upsell page. In these situations the PayPal SDK does not support a one-click upsell.

Checkout page example:

<!DOCTYPE html>
<html>
    <head>
        <title>PayPal SDk Integration</title>
        <script src="https://www.paypal.com/sdk/js?client-id=<CLIENT_ID>&merchant-id=<MERCHANT_ID>&currency=<CURRENCY>&enable-funding=<ENABLED_FUNDINGS>&disable-funding=card" data-partner-attribution-id="<PARTNER_ID>"></script> 
    </head>
    <body>
    
        <div id="paypal-button-container"></div>
        
        <script>
            var paypalSdkParams = null;
            var paypalPrePaidType = null;
            paypal.Buttons({
                style: {
                    layout: 'vertical',
                    label:  'paypal'
                },
                onClick: function(data, actions) {
                    try {
                        var fundingSource = data && data.fundingSource && data.fundingSource.toUpperCase(); 
                        if (["VENMO", "PAYLATER"].includes(fundingSource)) {
                            paypalPrePaidType = "PAYPAL_" + fundingSource;
                        }
                        // Call the import order API with the required parameters and additional pass "paypalSdk=1" and "prepaidType=paypalPrePaidType" in the request.
                        if (res && res.result === "SUCCESS" && res.message && res.message.paypalSdkParams) {
                            paypalSdkParams = res.message.paypalSdkParams;
                            return actions.resolve();
                        } else {
                            return actions.reject();
                        }
                    } catch(err) {
                        // Handle error 
                    }
                },
                createOrder: function(data, actions) {
                    try {
                        const orderId = paypalSdkParams && paypalSdkParams.id;
                        if (!orderId) throw new Error("Insufficient data to process PayPal checkout.");
                        return orderId;
                    } catch(err) {
                        // Handle error for missing order id
                    }
                },
                onApprove: function(data, actions) {
                    try {
                        // Call confirm PayPal API with the required parameters and additional pass following parameters
                        // 1. token: data.orderID
                        // 2. payerId: data.payerID
                        // 3. paypalSdk: 1
                        // 4. prepaidType: paypalPrePaidType;
                        // Note the prepaidType passed to import order API must match with the prepaid type passed on to confirm PayPal API. 
                    } catch (err) {
                        throw new Error("Error: Unable to confirm order.");
                    }
                },
                onCancel: function (data) {
                    // Payment cancelled by the customer. 
                },
                onError: function (err) {
                    // Error from PayaPal. 
                }
            }).render('#paypal-button-container');
        </script>
    </body>
</html>

Upsell page example:

<!DOCTYPE html>
<html>
    <head>
        <title>PayPal SDk Integration</title>
        <!-- Note: On the upsell page, only enable funding sources, which were used to complete transactions on the checkout page. Set other funding sources to disable-funding parameter. -->
        <!-- The checkout page funding source can be retrieved from prepaidType in the Import Order response -->
        <script src="https://www.paypal.com/sdk/js?client-id=<CLIENT_ID>&merchant-id=<MERCHANT_ID>&currency=<CURRENCY>&enable-funding=<ENABLED_FUNDINGS>&disable-funding=card" data-partner-attribution-id="<PARTNER_ID>"></script> 
    </head>
    <body>
    
        <div id="paypal-button-container"></div>
        
        <script>
            var paypalSdkParams = null;
            var paypalPrePaidType = null;
            paypal.Buttons({
                style: {
                    layout: 'vertical',
                    label:  'paypal'
                },
                onClick: function(data, actions) {
                    try {
                        var fundingSource = data && data.fundingSource && data.fundingSource.toUpperCase(); 
                        if (["VENMO", "PAYLATER"].includes(fundingSource)) {
                            paypalPrePaidType = "PAYPAL_" + fundingSource;
                        }
                        // On upsell page match checkout page prepaid type with funding source clicked on upsell page. If not reject payment process.
                        var orderData = sessionStorage.getItem("orderData") ? JSON.parse(sessionStorage.getItem("orderData")) : null
                        var orderPrepaidType = orderData && orderData.prepaidType;
                        if (orderPrepaidType !== paypalPrePaidType) {
                            return actions.reject();
                        }
                        // Call the import upsale API with the required parameters and additional pass "paypalSdk=1" in the request.
                        if (res && res.result === "SUCCESS" && res.message && res.message.paypalSdkParams) {
                            paypalSdkParams = res.message.paypalSdkParams;
                            return actions.resolve();
                        } else {
                            return actions.reject();
                        }
                    } catch(err) {
                        // Handle error 
                    }
                },
                createOrder: function(data, actions) {
                    try {
                        const orderId = paypalSdkParams && paypalSdkParams.id;
                        if (!orderId) throw new Error("Insufficient data to process PayPal checkout.");
                        return orderId;
                    } catch(err) {
                        // Handle error for missing order id
                    }
                },
                onApprove: function(data, actions) {
                    try {
                        // Note: Similar to the onclick method, re-check the checkout page prepaid type with the funding source after approval on the upsell page. If the funding source does match, do not call the confirm PayPal API and throw custom error as done in catch block.
                        // Call confirm PayPal API with the required parameters and additional pass following parameters
                        // 1. token: data.orderID
                        // 2. payerId: data.payerID
                        // 3. paypalSdk: 1
                        // 4. prepaidType: paypalPrePaidType; 
                    } catch (err) {
                        throw new Error("Error: Unable to confirm order.");
                    }
                },
                onCancel: function (data) {
                    // Payment cancelled by the customer. 
                },
                onError: function (err) {
                    // Error from PayaPal. 
                }
            }).render('#paypal-button-container');
        </script>
    </body>
</html>

Single Transaction

If you are not implementing Venmo or Pay Later then do not use the SDK. Follow instead.

Pay Later is not compatible with the campaign option

Step 1:

See this link for full details:

onClick (Call the to retrieve the create order parameters. It must include paypalSdk = 1 with other required parameters)

onApprove (PayPal approved the order. To process the order in CheckoutChamp and complete it in PayPal pass the “orderID” and “payerID” to . It must include paypalSdk = 1)

See this link for more details:

The works with the PayPal SDK when referenceTransactions and vaultEnabled are both enabled. Single Transaction works only for PayPal and Venmo payment types.

these instructions
Single Transaction
Import Click
JavaScript SDK script configuration
Import Order API
Confirm PayPal API
JavaScript SDK reference
Single Transaction feature
this guide
https://developer.paypal.com/sdk/js/reference/
https://developer.paypal.com/sdk/js/performance/