Raylife Payment Method & Processing

• Type: Story
• Status: Closed
• Priority: Minor
• Resolution: Completed
• Affects Version/s: None
• Fix Version/s: Master
• Component/s: Raylife, Solutions
• Labels:
  • CoE_Approved
• Epic Link: Raylife - D2C Commerce Integration (Binding Application)

User Story

As a user that wants to purchase the BOP quote from Raylife, I want to successfully pay for it online so that I can officially have insurance.  

Acceptance Criteria:

Given that I’m an insurance shopper trying to buy BOP insurance from Raylife, when I complete uploading all my documents for my quote, then I should be able to enter payment information and pay for my new policy.

Select Payment Method Section:

• When the “Upload Documents” section has collapsed and contains a green checkmark to signify its completion, the “Select a Payment Method” section should expand

 

• Section Title: “3. Select Payment Method”
• Section Subtitles:
  • “Payment Method”
  • “Billing Options”

Payment Method Section:

• Default view
  • By default, no payment method should be selected
• Since we are integrating with Commerce, we will use the following OOTB payment methods that are available in Commerce:
  • Authorize.net
  • PayPal
• Selecting a Payment Method is required

Authorize.net

• For MVP, we will not build out the Authorize.net flow.  Please just add this option to the UI and it can be selectable.

PayPal

• When the user selects PayPal, a message will be displayed to the user under the "Pay Now" button:
  
  • Message:  "You will be redirected to PayPal to complete payment"
• Please see this document for Commerce / PayPal integration information & our sandbox test account for PayPal for setup.  
  • Here's also an example of the seamless user experience for PayPal and Commerce

Test: 

Ensure that forwarding to PayPal is tested even when the user DOES NOT have an existing account and needs to create a PayPal account 

Billing Options Section:

• Default view
  • By default, Pay in Full will be selected
• Selecting a billing option is required.
• Pay in Full option:
  • Title:  "Pay in full - <dollar amount>
    • Dollar amount should be dynamic and come from the API
  • Secondary text:  "Save <dollar amount>"
    • Dollar amount should be dynamic and come from the API
• 2 Payments option:
  • Title:  "2 payments of <dollar amount>"
    • Dollar amount should be dynamic and come from the API
  • Secondary text:  "1 additional payment of <dollar amount>"
    • Dollar amount should be dynamic and come from the API
• Terms & Conditions:
  • By default, this section will be un-checked
  • Text:  "I have read and agree to the Raylife Terms and Conditions"
    • Raylife Terms and Conditions will be a dummy link
  • Checking the box is required

"Pay Now" CTA:

• The "Pay Now" button will only be enabled when all required fields are met
• If user selected "Authorize.net" as their payment method and clicks on "Pay Now", the user will not be navigated anywhere for MVP.
• If the user selected "PayPal" as their payment method and clicks on "Pay Now", the user will be navigated to the PayPal screens to process their payment.
  • When PayPal payment has been successfully processed, the user should be redirected to the final confirmation page for the D2C flow
  • See this link for info on redirection from PayPal.
  • Please Note:  For MVP, we will always assume that payment will be successfully processed.  Post-MVP, we will look into options where users do not pay or payment is not successful.

Mobile Responsiveness:

• All pages must be mobile-friendly
• NOTE: ACTUAL MOBILE-RESPONSIVE DESIGNS AS SHOWN IN THE MOCKUP WILL BE COVERED UNDER A SEPARATE EPIC (LPS-134804).  WE JUST NEED TO MAKE SURE THAT THE STORY CAN BE VIEWED AS PASSABLE ON A MOBILE DEVICE

UX Design:

https://www.figma.com/file/Qmm3nunuK0mRoNTX2JI6qy/raylife-website-2.4?node-id=107%3A10520 

Examples of what the PayPal screens could look like (this is outside of Liferay)

https://www.figma.com/file/Qmm3nunuK0mRoNTX2JI6qy/raylife-website-2.4?node-id=1928%3A222730

https://www.figma.com/file/Qmm3nunuK0mRoNTX2JI6qy/raylife-website-2.4?node-id=1928%3A223062 

 

Questions for the team

1. Is there any way to bypass the PayPal login screen with the Commerce/PayPal integration?  No, paypal integration required identified payment. 
2. Does it make sense to do a redirect or to have PayPal be in a modal?  We will work with redirect because that's how its done for the current implementation.