Flexible Payment Integrationanchor

Fastlane also offers Flexible Integration as a pattern to accept payments.

What is this integration Flexible Payment Integration allows you to customize the form as per your webpage layout and styling.
When to use this integration
  • * You want to handle billing address on your own.
  • * Payment component UI does not fit your page layout / styling.
You will need to handle the following
  • * Integrate the PaymentComponent
  • * Render the selected card and “Change card”, Fastlane watermark
  • * Conditional logic to determine when to show card fields.
  • * Render form fields to collect billing address and pass it to the transaction.

Fastlane Flexible Payment Integration can help you customize and style the payment page for the look and feel of your website. The merchant can own the experience and customize the rendering of the following:

  1. Shipping address fields and payment method fields for Guest users.

  2. Shipping address and payment method from the Fastlane profile.

Key Features

  1. Customize the behavior and experience of your checkout.

  2. Create your own payment form using your existing styles and layout.

  3. Simple integration with template to help developers.

Integration Requirements for Fastlane Flexible Payment

The integration for each persona varies a little. The following table explains the different scenarios that you will need to implement:

Fastlane members without a card or no card brands you supportGuest payers
Use-case Integration Required
Fastlane members with a stored card
  • * The selected card from the profile object
  • * Fastlane watermark
  • * Change card button that invokes showCardSelector()
  • * The FastlaneCardComponent to accept new card information
  • * A form to capture the payer’s billing address

Flexible Payment Integration Requirements

  • Pass Billing Address and cardholder name in getPaymentToken() Method:

    • When calling the getPaymentToken() method, ensure that the billing address is included in the request.

    • If the cardholderName field is disabled in your checkout process, it must still be sent in the getPaymentToken() request.

    • Example code snippet is shared below.

  1. JavaScript
// if the Card Component is rendered, pass the billing address and get the paymentToken
  
  if (selectedCardForCheckout) {
    paymentToken = selectedCardForCheckout.id;
  } else {
  
    paymentToken = await fastlaneCardComponent.getPaymentToken({
      billingAddress: {
        cardholderName: "John Doe"
        streetAddress: "2211 North 1st St",
        locality: "San Jose",
        region: "CA",
        postalCode: "95131",
        // you can also use the countryCodeAlpha3 or countryCodeNumeric formats
        countryCodeAlpha2: "US"
      }
    });
    
    }

Testing Guest Payersanchor

  • New Email Address:: Provide a new email address not associated with a sandbox Fastlane account.

  • Ensure the opt-in toggle is ON: Go through the checkout process using one of the card numbers available for testing. Be sure that the opt-in toggle is in the “on” state.

  • Any phone number for sandbox: You can enter any valid phone number (No SMS will be sent in Sandbox mode). + Upon completing the transaction, a Fastlane profile will be created to test subsequent transactions as a Fastlane member.

  • When you complete the transaction, a Fastlane profile is created that can be used for testing subsequent transactions as a Fastlane member.

Flexible Integration Use-case Feature Flexible Integration Result
  • * When the buyer enters the email, they are recognized as NOT having a PayPal account or a Fastlane profile.
  • * Shipping address fields are rendered to capture the buyer’s shipping address
  • * The FastlaneCardComponent renders card fields and the consent toggle.
  • * The Buyer completes the order.
  • Consent Toggle OFF (Opts out of Fastlane)
  • * The buyer’s Fastlane profile is not created.
  • * Payment completed successfully.​
  • * Enter email, the buyer is not recognized​ as having a PayPal account or a Fastlane profile.
  • * Shipping address fields are rendered to capture the buyer’s shipping address.
  • * The FastlaneCardComponent should render card fields and the consent toggle.​
  • * Ensure the consent toggle is in the “On” position. ​
  • * Complete the order
  • * Consent Toggle ON (Opts in of Fastlane).
  • * The buyer’s Fastlane profile should be created​.​
  • * The payment should be completed successfully.

Testing Fastlane Membersanchor

Before you test the guest payers, ensure you have follow the below instructions :

  • Create a Fastlane Member profile: Go through the previous step and register a new Fastlane account. Be sure to remember the email address used when you created the account so that you can use it for additional testing.

  • OTP for testing: When the authentication modal appears and you are prompted for a one-time password (OTP) use 111111 to trigger a successful authentication and any other 6-digit number to simulate a failed authentication.

  • Test updating payment method and shipping addresses to existing Fastlane Profiles: Make sure that you test the payer’s ability to update shipping addresses and cards associated with their profile.

Flexible Integration Use-case Feature Flexible Integration Result
  • * When the buyer enters the email, they are recognized as having a Fastlane profile.
  • * OTP flow will be triggered to authenticate the buyer.
  • * Buyer’s address and funding instrument are pre-populated after successful OTP entry. ​
Happy Path
  • * Complete the order.
  • * The payment should be completed successfully.
  • * Enter email, the buyer is recognized​ as having a Fastlane profile.
  • * OTP flow will be triggered to authenticate the buyer.
  • * Cancel the OTP by clicking the “x” or entering an incorrect code. ​
  • * The FastlaneCardComponent should render the card fields with no consent toggle.
OTP Failed or Cancelled
  • * Complete the order.
  • * The payment should be completed successfully.
  • * Enter email, the buyer is recognized as having a Fastlane profile.
  • * OTP flow will be triggered to authenticate the buyer.
  • * After successful OTP entry, Buyer’s shipping address and funding instrument are rendered based on the returned profile object.
  • * Click the change address to invoke address selector UI via showAddressSelector().
  • * Select "Add new address" and enter a new address in the address selector UI.
New Address
  • * Complete the order.
  • * New address will be added to the buyer’s Fastlane profile.
  • * Enter email, the buyer is recognized as having a Fastlane profile.
  • * OTP flow will be triggered to authenticate the buyer.
  • * After successful OTP entry, Buyer’s shipping address and funding instrument are rendered based on the returned profile object.
  • * Click the change address to invoke address selector UI via showCardSelector().
  • * Select "Add new card" and enter a new card in the card selector UI.
New Card
  • * Complete the order.
  • * New card will be added to the buyer’s Fastlane profile.
  • * Enter email, the buyer is recognized​ as having a Fastlane profile.​
  • * OTP flow will be triggered to authenticate the buyer.
  • * After successful OTP entry, Buyer’s shipping address and funding instrument are rendered based on the returned profile object.
  • * Click the change address to invoke address selector UI​ via showAddressSelector().
  • * Select another address from the list.
Change Address
  • * Complete the order.
  • * The payment should be completed successfully​.
  • * Enter email, the buyer is recognized as having a Fastlane profile.
  • * OTP flow will be triggered to authenticate the buyer.
  • * After successful OTP entry, Buyer’s shipping address and funding instrument are rendered based on the returned profile object.
  • * Click the change link to invoke the card selector UI​ via showCardSelector().
  • * Select another card from the list.
Change Card
  • * Complete the order.
  • * The payment should be completed successfully​.
  • * Enter email, the buyer is recognized​ as having a Fastlane profile..
  • * OTP flow will be triggered to authenticate the buyer.
  • * After successful OTP entry, no card information is present on the returned profile object. Shipping address information should be rendered based on the returned profile object.
  • *FastlaneCardComponent should be rendered to collect new card information. No consent toggle should be shown.
No Card or Card of unsupported brand
  • * Complete the order.
  • * The payment should be completed successfully​.
  • * New card should be added to the buyer’s Fastlane profile.
  • * Enter email, the buyer is recognized as having a Fastlane profile.
  • * OTP flow will be triggered to authenticate the buyer.
  • * After successful OTP entry, no shipping address information is present on the returned profile object. Card information should be rendered based on the returned profile object.
  • * Address collection form should be rendered.
  • * Enter a new address.
No Address or Address in Unsupported Region
  • * Complete the order.
  • * The payment should be completed successfully​.
  • * New shipping address should be added to the buyer’s Fastlane profile.

Display Fastlane Watermark:

  • When displaying the card from payer's Fastlane profile, you must inform them about it by displaying the Fastlane watermark (without the info icon) below card. For details on how to render the watermark, refer to the [Rendering the Fastlane Watermark section][def].

Loading Card Assets:

  • When opting to integrate using the flexible pattern, you need to render the card brand logo for the selected card so that the payer. We strongly recommend that you use the assets shared here so that payers get a consistent experience with Fastlane.

Flexible Integration Template:

  • A template of a Flexible integration is shared in the integration template in advanced options