# 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.