Fastlane for PayPal Complete Payments

1curl -s -X POST https://api-m.sandbox.paypal.com/v1/oauth2/token \
2 -u 'CLIENT_ID:CLIENT_SECRET' \
3 -H 'Content-Type: application/x-www-form-urlencoded' \
4 -d 'grant_type=client_credentials' \
5 -d 'response_type=sdk_token' \
6 -d 'intent=sdk_init' \
7 -d 'domains[]=/merchant.com,/merchant2.com'

1{
2  "access_token" : "eyJraW...",
3  "app_id": "APP-80W2...",
4  "expires_in": 32400,
5  "nonce": "2024-01...",
6  "scope": "...",
7  "token_type": "Bearer"
8}

1<script
2  src="https://www.paypal.com/sdk/js?client-id=<CLIENT-ID>&components=buttons,fastlane"
3  data-sdk-client-token="<SDK_CLIENT_TOKEN>"
4  data-client-metadata-id="<CM_ID>">
5</script>

1// instantiates the Fastlane module
2const fastlane = await window.paypal.Fastlane({
3  // For more details about available options parameters, see the Reference section.
4});
5// sets the SDK to run in sandbox mode
6window.localStorage.setItem("fastlaneEnv", "sandbox");
7// Specifying the locale if necessary
8fastlane.setLocale('en_us');

1const {
2  customerContextId
3} = await identity.lookupCustomerByEmail(document.getElementById("email").value);
4
5var renderFastlaneMemberExperience = false;
6
7if (customerContextId) {
8  // Email is associated with a Fastlane member or a PayPal member,
9  // send customerContextId to trigger the authentication flow.
10  const {
11    authenticationState,
12    profileData
13  } = await identity.triggerAuthenticationFlow(customerContextId);
14
15  if (authenticationState === "succeeded") {
16    // Fastlane member successfully authenticated themselves
17    // profileData contains their profile details
18  
19    renderFastlaneMemberExperience = true;
20
21    const name = profileData.name;
22    const shippingAddress = profileData.shippingAddress;
23    const card = profileData.card;
24  } else {
25    // Member failed or cancelled to authenticate. Treat them as a guest payer
26    renderFastlaneMemberExperience = false;
27  }
28} else {
29  // No profile found with this email address. This is a guest payer
30  renderFastlaneMemberExperience = false;
31}

1if (renderFastlaneMemberExperience) {
2  if (profileData.shippingAddress) {
3    // Render shipping address from the profile
4
5    const changeAddressButton = document.getElementById("your-change-address-button");
6
7    changeAddressButton.addEventListener("click", async () => {
8      const {
9        selectedAddress,
10        selectionChanged
11      } = await profile.showShippingAddressSelector();
12
13      if (selectionChanged) {
14        // selectedAddress contains the new address
15      } else {
16        // Selection modal was dismissed without selection
17      }
18    });
19  } else {
20    // Render your shipping address form
21  }
22} else {
23  // Render your shipping address form
24}

1<!-- Div container for the Payment Component -->
2<div id="payment-container"></div>
3<!-- Submit Button -->
4<button id="submit-button">Submit Order</button>

1<!-- Div container for the Payment Component -->
2<div id="card-container"></div>
3<div id="selected-card">
4  <!-- render selected card here -->
5</div>
6<a href="" id="change-card-link">Change card</a>
7
8<!-- Submit Button -->
9<button id="submit-button">Submit Order</button>

1curl -v -k -X POST https://api-m.sandbox.paypal.com/v2/checkout/orders \
2 -H 'PayPal-Request-Id: UNIQUE_ID' \
3 -H 'Authorization: Bearer PAYPAL_ACCESS_TOKEN' \
4 -H 'Content-Type: application/json' \
5 -H 'PayPal-Client-Metadata-Id: YOUR_CMID' \
6 -d '{
7  "intent": "CAPTURE",
8  "payment_source": {
9    "card": {
10      "single_use_token": "1h371660pr490622k" // Payment token from the client
11    }
12  },
13  "purchase_units": [
14    {
15      "amount": {
16        "currency_code": "USD",
17        "value": "50.00",
18        "breakdown": {
19          "item_total": {
20            "currency_code": "USD",
21            "value": "40.00"
22          },
23          "shipping": {
24            "currency_code": "USD",
25            "value": "10.00"
26          }
27        }
28      },
29      "items": [
30        {
31          "name": "Coffee",
32          "description": "1 pound of coffee beans",
33          "sku": "sku03",
34          "unit_amount": {
35            "currency_code": "USD",
36            "value": "40.00"
37          },
38          "quantity": "1",
39          "category": "PHYSICAL_GOODS",
40          "image_url": "https://example.com/static/images/items/1/coffee_beans.jpg",
41          "url": "https://example.com/items/1/coffee_beans",
42          "upc": {
43            "type": "UPC-A",
44            "code": "987654321015"
45          }
46        }
47      ],
48      "shipping": {
49        "type": "SHIPPING",
50        "name": {
51          "full_name": "Firstname Lastname"
52        },
53        "address": {
54          "address_line_1": "123 Fake St.",
55          "admin_area_2": "Los Angeles",
56          "admin_area_1": "CA", // Must be sent in 2-letter format
57          "postal_code": "90049",
58          "country_code": "US"
59        },
60        "phone_number": {
61          "country_code": "1",
62          "national_number": "5555555555"
63        }
64      }
65    }
66  ]
67}'

1-H "PayPal-Partner-Attribution-ID: BN-CODE" \
2-H "PayPal-Auth-Assertion: AUTH-ASSERTION-TOKEN"

1<!-- Add a div where the watermark will be rendered -->
2<div id="watermark-container"><img src="https://www.paypalobjects.com/fastlane-v1/assets/fastlane-with-tooltip_en_sm_light.0808.svg" /></div>

1<!-- Add a div where the watermark will be rendered -->
2<div id="watermark-container"><img src="https://www.paypalobjects.com/fastlane-v1/assets/fastlane_en_sm_light.0296.svg" /></div>

1<link rel="preload" href="https://www.paypalobjects.com/fastlane-v1/assets/fastlane-with-tooltip_en_sm_light.0808.svg" as="image" type="image/avif" />
2<link rel="preload" href="https://www.paypalobjects.com/fastlane-v1/assets/fastlane_en_sm_light.0296.svg" as="image" type="image/avif" />

1window.localStorage.setItem("axoEnv", "sandbox");

1interface FastlaneOptions {
2  shippingAddressOptions: AddressOptions,
3  cardOptions: CardOptions,
4  styles: StyleOptions
5}
6
7/*
8 * To restrict the use of Fastlane to specific countries or regions, set
9 * allowedLocations to an array containing the countries or regions where Fastlane
10 * should be allowed.
11 *
12 * To allow all regions within a particular country, specify the country's
13 * ISO 3166-1 alpha-2 country code only.
14 *
15 * To allow only specific regions in a country, specify the country's
16 * ISO 3166-1 alpha-2 country code, followed by a colon (":"), followed by the
17 * name of the region.
18 *
19 * Examples:
20 *   - [ "US" ] = Allow all regions within the United States
21 *   - [ "US:CA", "US:AZ" ] = Allow in California and Arizona, but nowhere else
22 *   - [ "US:CA", "US:AZ", "FR" ] = Allow in California, Arizona, and France,
23 *       but nowhere else
24 */
25
26interface AddressOptions {
27  // default: empty array = all locations allowed
28  allowedLocations: [AddressLocationEnum];
29}
30
31Enum AddressLocationEnum {
32  {ISO-country-code}
33  {ISO-country-code}:{ISO-region-code}
34}
35
36interface CardOptions {
37  // default: empty array = all brands allowed
38  allowedBrands: [CardBrandEnum];
39}
40
41Enum CardBrandEnum {
42  VISA
43  MASTERCARD
44  AMEX
45  DINERS
46  DISCOVER
47  JCB
48  CHINA_UNION_PAY
49  MAESTRO
50  ELO
51  MIR
52  HIPER
53  HIPERCARD
54}
55
56type create = (options: FastlaneOptions) => Fastlane;

1interface Fastlane {
2  identity {
3    lookupCustomerByEmail: (email: string) => LookupCustomerResult,
4    triggerAuthenticationFlow: (customerContextId: string, options: AuthenticationFlowOptions) => AuthenticatedCustomerResult
5  }
6
7  profile {
8    showShippingAddressSelector: () => ShowShippingAddressSelectorResult,
9    showCardSelector: () => ShowCardSelectorResult,
10  }
11
12  setLocale: (locale: string) => void,  // options: en_us, es_us, fr_us, zh_us
13
14  FastlaneCardComponent: (options: FastlaneCardComponentOptions) => FastlaneCardComponent,
15  FastlanePaymentComponent: (options: FastlanePaymentComponentOptions) => FastlanePaymentComponent,
16  FastlaneWatermarkComponent: (options: FastlaneWatermarkOptions) => FastlaneWatermarkComponent
17}

1interface LookupCustomerResult {
2  customerContextId: string
3}

1interface FastlaneWatermarkOptions {
2  includeAdditionalInfo: boolean
3}
4
5interface FastlaneWatermark {
6  render: (container) => null
7}

1interface AuthenticatedCustomerResult {
2  authenticationState: 'succeeded'|'failed'|'canceled'|'not_found';
3  profileData: ProfileData;
4}
5
6interface ProfileData {
7  name: Name;
8  shippingAddress: Shipping;
9  card: PaymentToken;
10}
11
12interface Name = {
13  firstName: string;
14  lastName: string;
15  fullName: string;
16};
17
18interface Phone = {
19  nationalNumber: string;
20  countryCode: string;
21};
22
23interface Address = {
24  addressLine1: string,
25  addressLine2: string,
26  adminArea1: string,
27  adminArea2: string;
28  postalCode: string,
29  countryCode: string
30  phone: Phone;
31};
32
33interface Shipping = {
34  name: Name;
35  phone: Phone;
36  address: Address;
37  companyName: string;
38}
39
40interface BillingAddress = Address;
41
42interface PaymentToken {
43  id: string; // This is the paymentToken
44  paymentSource: PaymentSource;
45}
46
47interface PaymentSource {
48  card: CardPaymentSource;
49}
50
51interface CardPaymentSource {
52  brand: string;
53  expiry: string; // "YYYY-MM"
54  lastDigits: string; // "1111"
55  name: string;
56  billingAddress: Address;
57}

1interface ShowShippingAddressSelectorResult {
2  selectionChanged: boolean;
3  selectedAddress: Address;
4}
5
6interface ShowCardSelectorResult {
7  selectionChanged: boolean;
8  selectedCard: PaymentToken;
9}

1const fastlaneCardComponent = await fastlane.FastlaneCardComponent({...});
2await fastlaneCardComponent.render("#card-container")

1type FastlaneCardComponent = (options: FastlaneCardComponentOptions) => FastlaneCardComponent;
2
3interface FastlaneCardComponent {
4  render: (container) => FastlaneCardComponent;
5  getPaymentToken: async (options: PaymentTokenOptions) => PaymentToken;
6}
7
8interface FastlaneCardComponentOptions {
9  styles: StyleOptions;
10  fields: {Field};
11}
12
13interface Field {
14  placeholder: string;
15  prefill: string;
16}
17
18interface PaymentTokenOptions {
19  billingAddress: Address;
20}

1const fastlanePaymentComponent = await fastlane.FastlaneEmailComponent({ ... });
2
3fastlanePaymentComponent.render("#payment-container");

1type FastlanePaymentComponent = (options: FastlanePaymentComponentOptions) => FastlanePaymentComponent;
2
3interface FastlanePaymentComponent {
4  render: (container) => FastlanePaymentComponent;
5  getPaymentToken: async () => PaymentToken;
6  setShippingAddress: (shippingAddress: Address) => void;
7}
8
9interface FastlanePaymentComponentOptions {
10  styles: StyleOptions;  
11  fields: {Field};
12  shippingAddress: Address;
13}
14
15interface Field {
16  placeholder: string;
17  prefill: string;
18}

1const styles: {};
2const fields: {
3    number: {
4      placeholder: "Enter your card number",
5    },
6    phoneNumber: {
7      prefill: "555-555-5555"
8    },
9    cardholderName: {
10      prefill: "John Doe",
11      enabled: true
12    }
13  }
14}
15
16const fastlaneCardComponent = fastlane.FastlaneCardComponent({
17  styles,
18  fields
19});
20
21fastlaneCardComponent.render(elem);
22
23const fastlanePaymentComponent = fastlane.FastlanePaymentComponent({
24  styles,
25  fields
26});/n
27fastlanePaymentComponent.render(elem);/n

1interface StyleOptions {
2  root: {
3    backgroundColor: string // default: #ffffff,
4    errorColor: string, // default: #C40B0B
5    fontFamily: string, // default: "PayPal Open"
6    textColorBase: string, // default: #222222
7    fontSizeBase: string, // default: 16px
8    padding: string, // default: 4 px
9    primaryColor: string // default #?
10  },
11  input: {
12    backgroundColor: string, // default #ffffff
13    borderRadius: string, // default: 0.25rem
14    borderColor: string, // default: #DCDCDC
15    borderWidth: string, // default: 1px
16    textColorBase: string, // default #222222
17    focusBorderColor: string, // default: #0021A3
18  },