# Fastlane

{% embed url="<https://www.paypal.com/us/fastlane>" %}

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FNdjTVXNe6Rx4CgokC2OJ%2Ffastlane-checkout.png?alt=media&#x26;token=d4b79008-fb55-4f6a-8729-548396cbcd0e" alt=""><figcaption></figcaption></figure>

## PayPal Commerce Setup

Go to funnel Settings > Merchant Accounts > choose the PayPal Commerce account.  Enable **referenceTransactions**.  Verify that **vaultEnabled** is enabled.  These 2 options are required for Fastlane.

{% hint style="info" %}
Fastlane is available for US customers only.
{% endhint %}

{% hint style="warning" %}
Reference transactions must also be enabled on your PayPal account.  Please confirm with PayPal if this is unknown.
{% endhint %}

## Funnel Setup

Go to any funnel.  Settings > Payments > PayPal.  Choose the PayPal Commerce gateway and enable Fastlane.  Fastlane is compatible with the other PayPal setup options.  Save.

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FgULFQ9bdNW7NHe4nERT5%2Fimage.png?alt=media&#x26;token=e8a0191c-4e4e-4049-9933-1a23a61bb0fc" alt="" width="375"><figcaption></figcaption></figure>

## Checkout Page Setup

There are 2 options for checkout page design.  Explore carefully to choose the best option for you.

Fastlane requires customization of the checkout page.  Choose one of our Fastlane checkout page templates to obtain these customizations automatically.  Make the modifications manually on all other checkout pages.  If Fastlane is not working as expected then first verify each of these requirements is in place on the page.

### Option 1:  PayPal is the only card checkout on the page

PayPal can process direct credit cards in addition to venmo, pay later, and standard PayPal.  If you use the PayPal gateway for direct credit card payments then you can save your customers an extra click with Fastlane.  The Email Address input will be open for Fastlane on page load.

{% hint style="warning" %}
This option is compatible with other payment providers, such as Apple Pay, that do not require address entry on the page. Any provider that requires address entry on the page is not compatible with this option. Consider Option 2 below.
{% endhint %}

1. Place the Email Address input near the top of the page.  This should come before address and phone.
2. Drag a Box element onto the page below Email Address.  Set id=**cc-fastlane-watermark**.  This element is used to show the Fastlane messaging.
3.

```
<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FjP1hHI0fKp4rYH7rN3IU%2Fimage.png?alt=media&#x26;token=4c6b7a55-2bd4-488e-8c2b-bea5fc5e1fd0" alt="" width="375"><figcaption></figcaption></figure>
```

4. Drag a standard button onto the page.  Give it class **cc-fastlane-profile**.  This button should be near Email Address.  This button is used to trigger email lookup at Fastlane.
5.

```
<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2Fpu01UK9ArFe4PM7UbZ2u%2Fimage.png?alt=media&#x26;token=c91f20c6-14ee-4b9a-a13b-ceeb7509dc23" alt="" width="375"><figcaption></figcaption></figure>
```

6. Find the shipping address inputs on the page.  Find the parent element to those inputs.  Drag a Box element onto the page just above the parent element (not inside the parent element).  Give the box class **cc-fastlane-shipping**.
7.

```
<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2Fq1curH3QuB6VnF35MAA9%2Fimage.png?alt=media&#x26;token=a3f9a546-3c7f-4929-8859-cf3227645687" alt="" width="375"><figcaption></figcaption></figure>
```

8. Add class **cc-fastlane-member-hide** to the parent element of shipping inputs, billing inputs, and any billShipSame checkbox.  This is likely to be multiple elements.  Add the class to each.
9.

```
<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FXgx99rAUYMjD0ZnbTM1m%2Fimage.png?alt=media&#x26;token=4aa3a384-b6f5-42bb-a764-831ac2488a5a" alt="" width="375"><figcaption></figcaption></figure>
```

10. Remove any card inputs from the page (cardNumber, expiry month, and cardSecurityCode)
11. Drag a Box element onto the page where the card inputs previously existed.  Set id=**cc-fastlane-payment**.
12.

```
<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2Fi3Egy4n4EdqsieiX21zk%2Fimage.png?alt=media&#x26;token=a1bd22a7-bc66-4ecc-97d9-32978ea0a388" alt="" width="375"><figcaption></figcaption></figure>
```

13. Find the Checkout button on the page.  Add class **cc-fastlane-submit** to the button.
14.

```
<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FWiGaGAd9ao2V6bogHcGZ%2Fimage.png?alt=media&#x26;token=fab0379d-e512-4366-8aee-9cffc5a6d451" alt="" width="375"><figcaption></figcaption></figure>
```

15. Save
16. Exit the page builder
17. Publish the funnel

### Option 2:  Allow card checkouts on non-PayPal gateways

If you choose to process direct credit card payments with non-PayPal gateways then Fastlane becomes a checkout option for the consumer.  This is similar to Klarna, Apple Pay, Google Pay, etc.  This option involves an extra button click for the consumer to choose Fastlane.

{% hint style="warning" %}
This option is compatible with all other payment providers
{% endhint %}

{% hint style="warning" %}
This option is compatible with Stripe Link.  Add the proper classes as defined in Option 2 of [Link instructions](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/link-by-stripe).  Some elements will have both Fastlane and Link classes.
{% endhint %}

1. Place a Fastlane button on the checkout page.  Go to Blocks > Buttons > drag Fastlane to the page.
2. Place the Email Address input near the top of the page.  This should come before address and phone.
3. Drag a Box element onto the page below Email Address.  Set id=**cc-fastlane-watermark**.  This element is used to show the Fastlane messaging.
4.

```
<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FOyqSHlItuSHeBuvxxx1J%2Fimage.png?alt=media&#x26;token=0b6bfa98-7226-4492-a1d4-c3a465388d47" alt="" width="375"><figcaption></figcaption></figure>
```

5. Drag a standard button onto the page.  Add class **cc-fastlane-profile** to the button.  This button should be near Email Address.  This button is used to trigger profile lookup at Fastlane once email is entered on the page.
6.

```
<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FKd1qQOmVnspQRNXfz2FL%2Fimage.png?alt=media&#x26;token=d49607dd-83b0-4842-b0f9-acfabc7dc9cc" alt="" width="375"><figcaption></figcaption></figure>
```

7. Drag a second standard button onto the page.  Add class **cc-fastlane-cancel** to the button.  This button should be near Email Address and the button in step 4.  This button is used to cancel Fastlane checkout.
8. Find the shipping address inputs on the page.  Find the parent element to those inputs.  Drag a Box element onto the page just above the parent element (not inside the parent element).  Add class **cc-fastlane-shipping** to the box.
9. Add class **cc-fastlane-member-hide** to the parent of shipping inputs, billing inputs, and any billShipSame checkbox.  This may be multiple elements.  Add the class to each.
10. Clone (duplicate) the credit card payment option element
11. Set radio value to "PAYPAL\_FASTLANE" for the cloned element
12. Add class **cc-fastlane-show** to the cloned element
13. Remove any card inputs from the cloned element (cardNumber, expiry month, and cardSecurityCode)
14. Drag a Box element inside the cloned element where the card inputs previously existed.  Set id=**cc-fastlane-payment**.
15.

```
<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FcGRsRGZFpxgkGhWAlln3%2Fimage.png?alt=media&#x26;token=7411be95-a518-4fd6-bb6f-16d6d3d25284" alt="" width="375"><figcaption></figcaption></figure>
```

16. Save
17. Exit the page builder
18. On the arrow leaving the checkout page, choose the button suffixed with "-PAYPAL\_FASTLANE" to route the Fastlane checkout.
19. Publish the funnel