search

PayPal™

PayPal™ offers a trusted and widely recognized payment experience, enabling customers to pay using their PayPal™ balance, linked bank accounts, or cards stored in their PayPal™ wallet — delivering a fast, secure checkout across websites and apps. PayEngine supports PayPal™ transactions in the US.

Unlike Google Pay™ or Apple Pay™, where transactions are processed through the partner's payment gateway, PayPal™ transactions are handled directly through each merchant's own PayPal™ Business account. Each merchant must be onboarded into PayPal™ to obtain their Business account before they can accept PayPal™ payments. PayEngine facilitates this onboarding process and manages the connection between the merchant's PayPal™ account and your platform.

Note: By integrating PayPal, you agree to PayPal's User Agreementarrow-up-right and Acceptable Use Policyarrow-up-right.

hashtag
Enabling PayPal™ for your account

circle-info

Please contact your support representative to enable PayPal™ for your account.

hashtag
Using PayPal™ in your Web Application

This platform makes it easy to present PayPal™ during the checkout process in your web application. If you're already using the JS library, it's as simple as calling an extra function to present PayPal™ button.

circle-info

To learn more about the JS library, please see our guidearrow-up-right.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>PayPal Demo</title>
    <script src="https://console.payengine.co/js/1.0.0/embed.js?key=<your public key>" async></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.22.0/axios.min.js"
    integrity="sha512-m2ssMAtdCEYGWXQ8hXVG4Q39uKYtbfaJL5QMTbhl2kc6vYyubrKHhr6aLLXW4ITeXSywQLn1AhsAaqrJl8Acfg=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

<body>
  <h4>PayPal</h4>
  <div id="button"></div>
  <script>
    const merchantId = "<Your Merchant ID>";
    const amount = "<Amount you want to charge>";
    
    const submit = (paypalOrderID) => {
      axios
        .post(
          "<Your Back End Application>/api/charge",
          {
            merchantID: merchantId,
            paypalOrderID: paypalOrderID,
            amount: String(amount),
          }
        )
        .then((resp) => {
          //Handle Response from your backend
        })
        .catch((err) => {
          //Handle Error from your backend
        });
    };
    
    window.onload = () => {
      PayEngine.PayPal.configure({
            merchantId: merchantId,
            amount: amount,
            selector: "#button",
            buttonColor: "silver", // Button color: "gold" | "blue" | "silver" | "white" | "black"
            buttonShape: "pill", // Button shape: rect, pill, sharp
            buttonLabel: "paypal", // Button label: "paypal" | "checkout" | "buynow" | "pay"
            buttonHeight: 36, // utton height in pixels (25-55)
            onApprove: (paypalData) => {
              console.log('onApprove', paypalData)
              // submit the paypal order ID to capture via /api/payment/sale
              submit(paypalData.paypalOrderID)
            },
            onCancel: (paypalData) => {
              console.log('onCancel', paypalData)
            },
            onError: (err) => {
              console.error('onError', err)
            }
          });
    };
  </script>
</body>

</html>

hashtag
Presenting the PayPal™ button

As shown in the example above, in your client app you just call PayPal.configure function to present PayPal™ as an option. Please note that you need to have provide the amount before you call this method.

hashtag
Sample Responses

hashtag
Customizing PayPal™ button

You can customize the shape, label and color of your PayPal™ Button by providing buttonColor , buttonShape and buttonLabel attributes in PayPal™ configuration object.

In addition, you can control the sizing of the button by enclosing it in another element (typically a div) with specific width and height attributes.

PreviousGoogle Pay™NextLevel 2 and Level 3 Data

Last updated