# 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

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

<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

// 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'));