# 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 Agreement](https://www.paypal.com/us/legalhub/useragreement-full) and [Acceptable Use Policy](https://www.paypal.com/us/legalhub/acceptableuse-full).
## Enabling PayPal™ for your account
{% hint style="info" %}
Please contact your support representative to enable PayPal™ for your account.
{% endhint %}
## 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.
{% hint style="info" %}
To learn more about the JS library, please [see our guide](https://docs.payengine.co/payengine-developer-docs/getting-started-1/5.-frontend-frameworks).
{% endhint %}
{% tabs %}
{% tab title="Client Application (HTML)" %}
```html
PayPal Demo
PayPal
```
{% endtab %}
{% tab title="Server Side (Node)" %}
{% code lineNumbers="true" %}
```javascript
// Credit Card Sale
// Note that this call is not changed and can pass in PayPal Token just like Credit card tokens
exports.charge = async function (req, res) {
try{
const response = await axios.post(PayEngine_Server + "/api/payment/sale",
{
"merchant_id": req.body.merchantID,
"data": {
"transactionAmount": req.body.amount,
"paypalOrderId": req.body.paypalOrderID,
"currencyCode": "USD"
}
},
{
headers: {
'Content-type': 'application/json',
'Accept': 'text/plain',
'Authorization': 'Basic ' + secret_key
}
})
res.json(response.data)
} catch(error){
res.json({error: error.response?.data ?? error})
}
}
```
{% endcode %}
{% endtab %}
{% endtabs %}
### 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.
```javascript
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, // Button 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) => {
// {orderID: '89N0485680608424M'}
console.log('onCancel', paypalData)
},
onError: (err) => {
console.error('onError', err)
}
});
```
#### Sample Responses
{% tabs %}
{% tab title="onApproved" %}
```json
{
"orderID": "9XL082974B8345018",
"payerID": "Z5Y9SWMSUN2CQ",
"paymentID": "9XL082974B8345018",
"billingToken": null,
"facilitatorAccessToken": "A21AALng32RoHbGGCy7Q93g0lANLis17-hKeOQYiTPHu1PJm6C34w5vEQPtIskLSWZhbWFwHp7yR3wF8NJC5PnJtPugN3nnaA",
"paymentSource": "paypal"
}
```
{% endtab %}
{% tab title="onCancel" %}
```json
{
"orderID": "2FS13150Y5657761G"
}
```
{% endtab %}
{% tab title="onError" %}
```typescript
PEPayPalError {
message: "The requested action could not be performed, semantically incorrect, or failed business validation."
}
```
{% endtab %}
{% endtabs %}
### 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.
```javascript
buttonColor: "silver", // Button color: "gold" | "blue" | "silver" | "white" | "black"
buttonShape: "pill", // Button shape: rect, pill, sharp
buttonLabel: "paypal", // Button label: "paypal" | "checkout" | "buynow" | "pay"
```
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.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.payengine.co/developer-docs/processing-payments/paypal.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.