Skip to content
Arc XP

How to add PayPal (Stripe) as a payment provider

PayPal is a digital payments platform that enables users to make online payments. PayPal is available for online marketplaces using Stripe Connect.

Prerequisites

Prepare the following to use PayPal (Stripe):

  1. Add PayPal (Stripe) as a payment provider through the Admin tool.

  2. Take the following steps to enable PayPal (Stripe):

    a. In Stripe developer console, go to Settings.
    b. Click on Payments and then, Payment Methods tab.
    c. In the Wallet section, turn on PayPal.

    Enable wallets

Checkout flow for PayPal (Stripe)

Unlike other payment providers, PayPal requires the user to be redirected to the PayPal page, where they must confirm the payment. The PayPal checkout workflow follows the steps listed in Checkout to purchase a subscription. We explain the code in the checkout flow steps for PayPal (Stripe) according to the regular checkout flow.

Regardless of the payment provider, Steps 1 to 5 of the checkout flow are identical. To learn more about the steps, see How to add Stripe Intents as a payment provider.

The following are the checkout flow steps for PayPal (Stripe):

  1. Authenticate.

  2. Get products and prices.

  3. Add item(s) to cart.

  4. Create order.

  5. Get payment options: To ensure that you managed to enable PayPal (Stripe) payment method, verify that the Sales.getPaymentOptions() SDK method returns the paymentMethodType: 22. Each object that the SDK method returns, includes the following values: paymentMethodType and paymentMethodID.

  6. Initialize payment: The paymentMethodID along with the orderNumber returned in create order are required when calling Sales.initializePayment().

    If successful, Sales.initializePayment() returns the following three parameters.

    • parameter1: The Stripe Client Secret (or Private Api key): Stripe uses it to render <Elements /> and Stripe SDK uses it to confirm the SetupIntent (i.e., stripe.confirmSetup()).
    • parameter2: The Stripe Publishable API Key: Stripe SDK uses it to initialize Stripe on the frontend (i.e., loadStripe(parameter2)).
    • parameter3: The Return URL: Stripe uses it for redirecting after PayPal authorization. For example, stripe.confirmSetup({ ... return_url: "${redirectURL}/...paymentId=${paymentMethodID}"});

    Using the preceding three parameters, you can initialize Stripe and implement the code for the following confirmation flow:

    a. The user is redirected to the external site.
    b. The user agrees to the payment in their PayPal account.
    c. The payment is confirmed on the PayPal side.
    d. The user is redirected to theReturn URL, along with a token, for example: ${returnURL}?token=EC-6UK47484PR908XXXX

        import { loadStripe } from '@stripe/stripe-js';
        import Sales from '@arc-publishing/sdk-sales';
        ...
    

        const orderNumber = Sales.currentOrder.orderNumber;
        const paymentProvider = chosenPaymentOption;
        ...
    

        export const CheckoutPayPalStripeIntentForm = props => {
            ...
            const stripe = useStripe();
            const elements = useElements();
    

            const handleSubmit = async () => {
                const { error } = await stripe.confirmSetup({
                    clientSecret,
                    payment_method: 'paypal',
                    confirmParams: {
                    return_url: `${redirectURL}/#/paypalStripe?paymentId=${paymentMethodID}`
                    }
                });
    

                if (error) {
                    ...
                }
            };
        }
    

        export const PaypalStripeCheckout = () => {
            ...
            const [stripePromise, setStripePromise] = useState(null);
    

            useEffect(() => {
                const initPayment = async () => {
                try {
                    const payment = await Sales.initializePayment(orderNumber, paymentMethodID);
                    setPayment(payment);
    

                    loadStripe(payment.parameter2).then(data => setStripePromise(data));
                } catch (e) {
                    if (e?.message) {
                        ...
                    }
                }
                };
    

                const endPayment = async () => {
                    try {
                        await Sales.finalizePayment(orderNumber, paymentMethodID, token);
                        // To do once Sales.finalizePayment is successful
                        ...
                    } catch (e) {
                        ...
                    }
                };
    

                if (orderNumber && paymentMethodID) {
                    if (!token) {
                        initPayment();
                    }
    

                    if (token) {
                        endPayment();
                    }
                }
            }, [orderNumber, paymentMethodID, token, isPaymentUpdate]);
    

            if (stripePromise) {
                return (
                    <Elements stripe={stripePromise} options={{ clientSecret: payment?.parameter1 }}>
                        <CheckoutPayPalStripeIntentForm
                            ...
                            stripe={stripePromise}
                            orderNumber={orderNumber}
                            clientSecret={payment?.parameter1}
                            paymentMethodID={paymentMethodID}
                        />
                    </Elements>
                );
    

        }
        export default PaypalStripeCheckout;

  7. Finalize payment: Ensure to design your system to store the following in the user’s browser:

    • The reCAPTCHA token: If you enable the feature in the checkout.
    • orderNumber.
      Grab the preceding two values to pass along when calling Sales.finalizePayment().