Flexible Payment Integration
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 will need to handle the following |
|
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:
-
Shipping address fields and payment method fields for Guest users.
-
Shipping address and payment method from the Fastlane profile.
Key Features
-
Customize the behavior and experience of your checkout.
-
Create your own payment form using your existing styles and layout.
-
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:
Use-case | Integration Required |
---|---|
Fastlane members with a stored card |
|
|
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.
-
- 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 Payers
-
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 |
---|---|---|
|
|
|
|
|
|
Testing Fastlane Members
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 |
---|---|---|
| Happy Path |
|
| OTP Failed or Cancelled |
|
| New Address |
|
| New Card |
|
| Change Address |
|
| Change Card |
|
| No Card or Card of unsupported brand |
|
| No Address or Address in Unsupported Region |
|
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