---
# System prepended metadata

title: NextGen Checkout PayPal Button Component

---

# NextGen Checkout PayPal Button Component
Next Gen Checkout wants a component based integration strategy to fullfil the mission of composing a merchants checkout.  This document describes the possible integration approaches  for rendering and interacting with a PayPal Button using a component based approach

## Properties
Properties are how you pass information into components.  
| Property | Description | Type | Required
| -------- | -------- | -------- | -------- |
| client     | Client initialized with an access token   | String     | Yes
| commit     | Set commit flag     | Boolean     | No
| intent     | Set intent    | Boolean     | No
| color     | Set color of button    | String     | No


## Interfaces
Interfaces are defined contracts of properties and events
```typescript
interface PaymentApprovedEvent {
    orderId: string;
    braintreeNonce: string;
    shippingAddress: Address;
    billingAddress: Address;
}

interface PaymentCancelledEvent {
    orderId: string;
}

interface ButtonClickEvent {
    button: HTMLElement
}
```

# Integration
The following section will defined what the integration looks like for both native HTML/JS and React using a Callback approach.

Callbacks are one way to get information out of components.  This section defines some callbacks
| Name | Description | Argument |
| -------- | -------- | -------- |
| onPaymentApproved    | Fired when user approves payment     | PaymentApprovedEvent     |
| onPaymentCancelled  | Fired user cancels payment     | PaymentCancelledEvent     |
| onClick  | Fired user clicks button     | ButtonClickEvent     |

## Native HTML/JS
```htmlembedded=
<script src="https://unpkg.com/paypal-button@2.1.29/lib/index.js"></script>
<script src="https://unpkg.com/braintree-client@2.1.29/lib/index.js"></script>

<!-- Initialize Component and static properties -->
<paypal-button 
    color = "blue"
    intent = "authorize"
    commit = "true"
    orderId = ""
/>

<script>
    // Functions to execute API calls
    function async onPaymentApprove(event: PaymentApprovedEvent) {
        // Go to merchants server and process payment with order id
        await processPayment(event.orderId);
    }
    
    function async onPaymentCancelled(event: PaymentCancelledEvent) {
        alert('You cancelled the payment!');
    }
    
    function async createOrder(event: ButtonClickEvent) {
        // Go to merchants server and get PYPL Order Id
        const orderId = await createPayPalOrder();
        return orderId;
    }
    
    // Initialize Core Components
    const authorization = await getClientToken();
    const client = new Client({
        authorization
    });
    
    // Set Component Dynamic Properties
    const element  = document.querySelector('paypal-button')
    element.client = client;
    element.onPaymentApprove = onPaymentApprove;
    element.onPaymentCancelled = onPaymentCancelled;
    element.createOrder = createOrder;

</script>
```

## React
```javascript=
// https://dev.to/marcushellberg/exploring-reacts-newly-added-web-component-support-19i7
import React from 'react';
import ReactDOM from 'react-dom';
import Client from '@paypal/client';
import "@paypal/paypal-button";


// Functions to execute API calls
function async onPaymentApprove(event: PaymentApprovedEvent) {
    // Go to merchants server and process payment with order id
    await processPayment(event.orderId);
}

function async onPaymentCancelled(event: PaymentCancelledEvent) {
    alert('You cancelled the payment!');
}

function async createOrder(event: ButtonClickEvent) {
    // Go to merchants server and get PYPL Order Id
    const orderId = await createPayPalOrder();
    return orderId;
}

function App() {
    
    // Initialize Core Components
    const authorization = await getClientToken();
    const client = new Client({
        authorization
    });

    return (
        <paypal-button 
            client={client}
            color = "blue",
            commit = "false"
            createOrder = {createOrder}
            onPaymentApprove = {onPaymentApprove}
            onPaymentCancelled = {onPaymentCancelled}
        />
    );
};

ReactDOM.render(<App />, document.getElementById('root'));
```

