Paypal HowTo: PayPal Commerce Platform for Business

PayPal Commerce Platform is a full-stack payment processing solution that helps you accept and make payments globally.

Accept payments

Accept payments from customers all over the world. Give your customers flexibility to pay the way they want, including:
• PayPal exclusives, like PayPal, Venmo, and PayPal Credit.
• Debit or credit cards, like Visa, Mastercard, and American Express.
• Alternative payment methods, like iDEAL, Sofort, and more.

Make payments

Make payments to multiple recipients at once. Send payouts in different currencies than your PayPal balance.

Accept payments

Accept and process PayPal, cards, and alternative payment methods in a single, modern integration. Store customer and payment information to reduce friction at checkout.

Online payments

Set up online payments quickly with Checkout. Offer PayPal and other popular payment methods, and customize your debit and credit card payment fields.

Show payment options that millions of consumers know and trust.

Payment methods

Add payment methods to your checkout experience that your customers want, including:

  • PayPal, Venmo, and PayPal Credit
  • Debit and credit cards
  • Alternative payment methods

Checkout

  • Standard
    • Add a basic integration with our JavaScript SDK, which includes the PayPal button, out-of-the-box card processing, and alternative payment methods.
    • PCI Compliance
  • Advanced
    • Replaces basic debit and credit cards from the standard integration with a payment form for debit and credit cards that you can build with the right level of customization for your needs.

Global reach

Accept payments in multiple countries and currencies.

Invoicing

Get started with our Invoicing API to send custom invoices. Use your customer’s email or phone number to request payments for goods or services.

Subscriptions

Help your customers make recurring payments with our Subscriptions API.

Checkout

There are two ways to integrate online payments using the PayPal JavaScript SDK. The JavaScript SDK displays relevant, PayPal-supported payment methods on your page.

Standard Advanced
Benefits Quick, basic, easy Advanced capabilities and customization
Transaction types One-time sale One-time sale, authorize and capture, voids, and refunds
Integration type Client-side and server-side  Client-side and server-side
Payment methods  PayPal
Venmo
PayPal Credit
Alternative payment methods
Basic card processing
PayPal
Venmo
PayPal Credit
Alternative payment methods
Advanced card processing
Card form fields  PayPal user experience  Custom user experience
Vetting and underwriting  Not required  Required
Seller protection   For PayPal and basic card transactions   For PayPal transactions only
Risk management  Handled by PayPal  Customizable fraud tools with Simility

Set up standard payments

Set up online payments quickly with Checkout and show payment options that millions of consumers know and trust.

Set up advanced credit and debit card payments

If you’re looking for a custom checkout solution, set up online payments that include your business branding for the credit and debit card fields.

Set up standard payments

Set up standard payment options on your checkout page so your buyers can pay with debit and credit cards, PayPal, PayPal Credit, Venmo, and alternative payment methods.

Not a developer? Use a pre-built solution to build your checkout experience.

Know before you code

  • This integration sets up online payment options using the PayPal JavaScript SDK. If you are looking for a customized way to present credit and debit card fields, see our Set up advanced credit and debit card payments integration.
  • Complete the steps in Get started to get the following sandbox account information from the Developer Dashboard:
    • Your client ID
    • Your personal and business sandbox accounts
  • Use your client ID when adding payment options to your website. Use your sandbox accounts when testing the checkout options.
  • (UK merchants) Credit is a regulated activity in the UK. Before integrating a PayPal Credit button, you must be authorized to act as a credit broker and have a credit agreement with PayPal. For more information, contact business customer support through paypal.com or by calling 0800 358 7929.

Step 1: Add payment buttons

To accept payments on your website, add the PayPal JavaScript SDK code to your checkout page. You can also add payment buttons to a single page application.

Sample JavaScript SDK code

This sample code adds payment buttons to your website that capture the payment immediately. If you plan to make API calls from your server, see the server-side instructions that follow this sample code.

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <!-- Ensures optimal rendering on mobile devices. -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <!-- Optimal Internet Explorer compatibility -->
    </head>

    <body>
        <script src="https://www.paypal.com/sdk/js?client-id=CLIENT-ID">
            // Replace YOUR_SB_CLIENT_ID with your sandbox client ID
        </script>

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

        <!-- Add the checkout buttons, set up the order and approve the order -->
        <script>
            paypal
                .Buttons({
                    createOrder: function (data, actions) {
                        return actions.order.create({
                            purchase_units: [
                                {
                                    amount: {
                                        value: "0.01",
                                    },
                                },
                            ],
                        });
                    },
                    onApprove: function (data, actions) {
                        return actions.order.capture().then(function (details) {
                            alert(
                                "Transaction completed by " +
                                    details.payer.name.given_name
                            );
                        });
                    },
                })
                .render("#paypal-button-container"); // Display payment options on your web page
        </script>
    </body>
</html>

Add and modify the code

  • Copy the sample JavaScript SDK code and paste it into the code of your checkout page. This sample code is optimized for JavaScript performance. To learn more about this and other optimization considerations, see JavaScript SDK performance optimization.
  • In the SDK code, replace YOUR_SB_CLIENT_ID with your client ID.
  • Explicitly pass parameters to override the default values the PayPal JavaScript SDK uses. Review the JavaScript SDK reference to learn about these default values. Example: currency defaults to USD.
  • Create JavaScript or server-side code to pass purchase variables, like amount: value, to the JavaScript SDK code. Your implementation varies based on the other systems and integrations you’re using to manage inventory and order details. Refer to the Orders REST API to learn more about the values you can pass as you build your code.
  • (Optional) Handle creating and capturing an order on your server. You might need to make API calls directly from your server, rather than using the client-side functions that the JavaScript provides. Remove createOrder and captureOrder from the JavaScript and create server-side API calls.
  • Refresh your webpage to see the payment buttons.Payment buttons display on your website. You can now test purchases.

Step 2: Test purchases with the PayPal button

Test a PayPal purchase in the sandbox to see the checkout user experience and also how money moves from the buyer’s account to your account. You’ll test all the buttons in your integration before you go live.

Test a purchase as a buyer

  1. On your checkout page, select the PayPal button.
  2. Log in using your personal sandbox account login information.
  3. In the checkout page, notice the purchase amount. USD is the default currency.
    Tip: You can customize the PayPal JavaScript SDK by adding a different currency code to the PayPal JavaScript SDK. See the currency codes.
  4. Complete a purchase with the PayPal balance
  5. Select OK to close the message.

Confirm that the money left the buyer account

  1. Log in to https://sandbox.paypal.com using your personal sandbox account login information that you used to complete the purchase. Your personal sandbox account is the buyer account.
  2. In Recent Activity, confirm that the money has left the buyer’s account.
  3. Log out of the account.

Confirm that the money moved to the merchant account

  1. Log in to https://sandbox.paypal.com using your business sandbox account login information.
  2. In Recent Activity, confirm that the money, minus any fees, are received by the merchant’s account.
  3. Log out of the account.

Next steps

Set up server-side code to ensure cart completion when a customer uses an alternative payment method. Alternative payment methods include bank accounts, wallets, and local payment methods.

 

Standalone payment buttons

By default, the payment buttons automatically render all eligible buttons in a single location on your page.

If your use-case permits, you can render individual, standalone payment buttons for each supported payment method. For example, render the PayPal, Venmo, PayPal Credit, and alternative payment method buttons on different parts of the checkout page, alongside different radio buttons, or on entirely different pages.

Even with standalone payment buttons, your integrations take advantage of the smart eligibility logic the PayPal JavaScript SDK provides, meaning only the appropriate buttons for the current buyer automatically display.

Note: (UK merchants) Credit is a regulated activity in the UK. Before integrating a PayPal Credit button, you must be authorized to act as a credit broker and have a credit agreement with PayPal. For more information, contact business customer support through paypal.com or by calling 0800 358 7929.

 

Step 1. Update the JavaScript SDK tag

Update the JavaScript SDK tag on your page to specify the buttons and funding-eligibility components:

<script src="https://www.paypal.com/sdk/js?client-id=CLIENTID&components=buttons,funding-eligibility"></script>

Step 2. Render all eligible buttons

Render each of the buttons. You can also render a set of buttons or add the standalone button to an integration that uses radio buttons.

<script>
    // Loop over each funding source/payment method
    paypal.getFundingSources().forEach(function (fundingSource) {
        // Initialize the buttons
        var button = paypal.Buttons({
            fundingSource: fundingSource,
        });

        // Check if the button is eligible
        if (button.isEligible()) {
            // Render the standalone button for that funding source
            button.render("#paypal-button-container");
        }
    });
</script>

Note: New funding sources are automatically added to paypal.getFundingEligibility() as support becomes available for them in the JavaScript SDK.

Render a set of buttons

If you need a subset of the available buttons, render them using the following code:

var FUNDING_SOURCES = [
    paypal.FUNDING.PAYPAL,
    paypal.FUNDING.VENMO,
    paypal.FUNDING.CREDIT,
    paypal.FUNDING.CARD,
];

// Loop over each funding source/payment method
FUNDING_SOURCES.forEach(function (fundingSource) {
    // Initialize the buttons
    var button = paypal.Buttons({
        fundingSource: fundingSource,
    });

    // Check if the button is eligible
    if (button.isEligible()) {
        // Render the standalone button for that funding source
        button.render("#paypal-button-container");
    }
});

Tip: We recommend that you render all eligible buttons to ensure buyers have the best possible choice of payment method when making a purchase.

Radio buttons

If your integration uses radio buttons, use the paypal.Marks component in standalone mode to display the relevant mark for each payment method you offer to buyers.

First, update the PayPal script tag to your page, and specify buttons, funding-eligibility and marks components:

<!-- Add the JavaScript SDK with buttons, funding eligibility, and marks -->
<script src="https://www.paypal.com/sdk/js?client-id=sb&components=buttons,funding-eligibility,marks"></script>

Then, render the Marks component:

// Loop over each funding source/payment method
paypal.getFundingSources().forEach(function (fundingSource) {
    // Initialize the marks
    var mark = paypal.Marks({
        fundingSource: fundingSource,
    });

    // Check if the mark is eligible
    if (mark.isEligible()) {
        // Render the standalone mark for that funding source
        mark.render("#paypal-mark-container");
    }
});

Step 3. Complete your integration
Return to the set up standard payments guide to create and capture the order.

Funding sources
Here is a list of buttons you can render:

Funding source Description
paypal.FUNDING.PAYPAL PayPal
paypal.FUNDING.CARD Credit or debit cards
paypal.FUNDING.CREDIT PayPal Credit
paypal.FUNDING.VENMO Venmo
paypal.FUNDING.SEPA SEPA-Lastschrift
paypal.FUNDING.BANCONTACT Bancontact
paypal.FUNDING.BLIK BLIK
paypal.FUNDING.EPS eps
paypal.FUNDING.GIROPAY giropay
paypal.FUNDING.IDEAL iDEAL
paypal.FUNDING.MYBANK MyBank
paypal.FUNDING.P24 Przelewy24
paypal.FUNDING.SOFORT Sofort

.