PayPal Native Checkout SDK for iOS and Android

Photo by Mr. Mikla on Shutterstock

In a previous post, Greg Jopa discussed how react-paypal-js provides a simple way to incorporate PayPal into your React application. With ecommerce continuing to shift towards mobile devices, this allows a faster, more streamlined experience for users.

In this blog, we’ll dive deeper into mobile. We’ll focus on how to use our Native Checkout SDK for iOS and Android to produce that same streamlined experience in native apps.

Image from PayPal Developer

Why We Don’t Recommend WebViews

Now, some developers might see this post and think, “no thanks, we can do all that in a WebView.” A WebView, which is composed primarily of JavaScript, HTML, and CSS, can be an effective tool. It allows apps to display web content without opening up a web browser and you might use it when your app’s content changes frequently.

However, for the checkout experience, PayPal best practices discourage the use of WebViews. This is to ensure the applications you develop are secure and optimized for the best possible user experience.

WebViews typically require customers to log in every time they go to checkout because cookies don’t persist in a WebView. When a customer has to continuously login, it adds friction to the checkout process and can result in a customer loss. WebViews also don’t allow customers to see a URL bar to verify that the login is legitimate. Since security is a major concern for mobile shoppers, this can result in the customer abandoning the checkout process.

Benefits of the Native Checkout SDK

Fortunately, the Native Checkout SDK is easy to integrate and well documented for both iOS and Android integrations. We’ll walk you through some of the benefits of the Native Checkout SDK and also how to build a sample integration for iOS.

Benefits of the Native Checkout SDK include:

• In-context mobile experience
• Allowing users to skip the login more often than Web Checkout
• Faster, more streamlined experience, for mobile users

Photo by Pankaj Patel on Unsplash

Sample Integration

Before we dive into the code, please follow the steps in our developer documentation to ensure you have your account credentials and the correct permissions enabled on your Sandbox account.

Step 1 — Install the SDK

The SDK is available on popular package managers, including:

• CocoaPods
• Carthage
• Swift Package Manager
• GitHub

Step 2 — Configure the SDK

Create an instance of CheckoutConfig, and pass it to the top level Checkout type of the SDK.

func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: AppDelegateLaunchOpts?
  ) -> Bool {

    let config = CheckoutConfig(
      clientID: "YOUR_CLIENT_ID",
      returnUrl: "YOUR_RETURN_URL",
      environment: .sandbox
    )
    Checkout.set(config: config)

    return true
  }

Now your SDK is configured and your app is ready to add payment buttons.

Step 3 — Payment Buttons

To render payment buttons on your app, add the the following code to your checkout page:

override func viewDidLoad() {
    super.viewDidLoad()

    let paymentButton = PayPalButton()
    
    view.addSubview(paymentButton)

    NSLayoutConstraint.activate(
      [
        paymentButton.centerYAnchor.constraint(equalTo: view.centerYAnchor),
        paymentButton.centerXAnchor.constraint(equalTo: view.centerXAnchor)
      ]
    )
  }

Step 4 — Create and Capture an Order

There are two options to complete your integration:

1. Client-side integration

• The simplest integration. Client-side integrations don’t require you to create your own backend infrastructure.

2. Server-side integration

• This allows more control over your integration but does require you to have your own backend infrastructure.

We’ll keep our example simple and use the client-side integration. You can access more information on the server-side integration here.

This sample code creates an order of a single item for $10.00 USD. When the buyer selects Pay Now on a payment sheet, the OnApprove callback invokes and the funds are ready for immediate capture.

import PayPalCheckout

  class ViewController: UIViewController {

    override func viewDidLoad() {
      super.viewDidLoad()

      let paymentButton = PayPalButton()
      view.addSubview(paymentButton)

      NSLayoutConstraint.activate(
        [
          paymentButton.centerYAnchor.constraint(equalTo: view.centerYAnchor),
          paymentButton.centerXAnchor.constraint(equalTo: view.centerXAnchor)
        ]
      )

      configurePayPalCheckout()
    }

    func configurePayPalCheckout() {
      Checkout.setCreateOrderCallback { createOrderAction in
        let amount = PurchaseUnit.Amount(currencyCode: .usd, value: "10.00")
        let purchaseUnit = PurchaseUnit(amount: amount)
        let order = OrderRequest(intent: .capture, purchaseUnits: [purchaseUnit])
        createOrderAction.create(order: order)
      }

      Checkout.setOnApproveCallback { approval in
        approval.actions.capture { (response, error) in
          print("Order successfully captured: \(response?.data)")
        }
      }
    }
  }

Congratulations — now you can test purchases!

This is a simple integration of the Native Checkout SDK, but you can also implement additional callbacks such as onCancel and onError, customize buttons, and programmatically start the SDK. Visit our Developer Documentation at the links above for all those details.

Photo by Pavan Trikutam on Unsplash

Contact us

For feature requests or if you are experiencing an issue, reach out to us on GitHub or at PayPal Technical Support.

And, if you enjoyed this post, make sure to follow along with the PayPal Technology Blog to catch future updates.