# Draft AXO on PPCP Integration Pattern Options

**HTML**
SDK token and Client Metadata ID are **required** to instantiate the SDK.

<script
	src="paypal.com/sdk/js?client-id=<CLIENT-ID>&components=buttons,connect"
	data-user-id-token="..." data-client-metadata-id="<CMID>"
>

**Instantiation**

const connect = await paypal.Connect({
	// Other options TBD
});

connect.setLocale('en_us');

const {
	identity,
	profile,
	ConnectCardComponent
} = connect;

**Lookup user**

const { customerContextId } = await identity.lookupCustomerByEmail(event.target.value);
if (customerContextId) {
	// Email is associated with a Connect profile or a PayPal member
} else {
	// No profile found for this email address. This is a guest user
}

**Gary Flow**

const fields = {
	phoneNumber: {
		prefill: "1234567890"
	}
};
const connectCardComponent = await ConnectCardComponent({fields}).render('#payment-container');
// event listener when the customer clicks to place the order 
submitButton.addEventListener('click', async ()=> {
	const { nonce } = await connectCardComponent.tokenize({
		billingAddress: {
			streetAddress: "2211 North 1st St",
			locality: "San Jose",
			region: "CA",
			postalCode: "95131",
			countryCodeNumeric: 840,
			countryCodeAlpha2: "US",
			countryCodeAlpha3: "USA"
		}
	});
	fetch('merchant.com/api/complete-order', {
		data: JSON.stringify({ nonce, cartData }),
		method: 'POST'
	})
	// Send the card info (and nonce) and previously captured device data to server to complete checkout
})

***One-Shot Checkout via Orders API***

curl -v -k -X POST 'https://msmaster.qa.paypal.com:18824/v2/checkout/orders' \
 -H 'PayPal-Request-Id: 7b92603e-77ed-4896-8e78-5dea2050476a' \
 -H 'Authorization: Bearer 6V7rbVwmlM1gFZKW_8QtzWXqpcwQ6T5vhEGYNJDAAdn3paCgRpdeMdVYmWzgbKSsECednupJ3Zx5Xd-g' \
 -H 'Content-Type: application/json' \
 -d '{
    "intent": "CAPTURE",
    "purchase_units": [
        {
            "reference_id": "d9f80740-38f0-11e8-b467-0ed5f89f718b",
            "amount": {
                "currency_code": "USD",
                "value": "100.00"
            }
        }
    ],
    "payment_source": {
        "card": {
            "vault_id": "{PASS NONCE HERE}"
        }
    }
}'

***Ryan Flow***

const { authenticationState, profileData } = await identity.triggerAuthenticationFlow(customerContextId);

if (authenticationState === 'succeeded') {
	const name = profileData.name;
	const address = profileData.address;
	const card = profileData.card;
} else {
	// authentication failed or canceled by the customer
}

submitButton.addEventListener('click', () => {
	// Submit the card.nonce & cart info to the server to complete checkout
	// call orders API with nonce as `vault_id`
})