Story 71.3. “Pay via Apple Pay”-Button on Product Page / Cart

General Info

 For a fast checkout, we want to offer the User the option to checkout via Apple Pay. “Pay via Apple Pay”-Buttons are going to be displayed on individual Product Pages, the Cart and in the Checkout.

User Story

As a website user

I want to order the products online with Apple pay payment method on a product page, the cart or in the checkout. I’m used to clicking on a “Apple Pay” button for an express checkout, as it makes the checkout quick and convenient. I’m using macOS or iOS with Safari.

 

Design / Flowcharts

  1. On the Checkout page

    1. Desktop https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=5524-1994&t=6szvXRxd9SM2HmPY-1
      – When “Apple pay is clicked”, show pop-up: “Agree to t&c…”. Only proceed to Apple pay when user ticks the box (mandatory)

    2. Mobile https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=4808-7220&t=6szvXRxd9SM2HmPY-1
      – When “Apple pay is clicked”, show pop-up: “Agree to t&c…”. Only proceed to Apple pay when user ticks the box (mandatory)

  2. On “Shopping bag” popup

    1. Desktophttps://www.figma.com/file/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?type=design&node-id=1811%3A14452&mode=design&t=cBUfY505Xm3BoCxU-1

      • When “Apple pay is clicked”, show pop-up: “Agree to t&c…”. Only proceed to Apple pay when user ticks the box (mandatory)

    2. Mobilehttps://www.figma.com/file/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?type=design&node-id=1811%3A16166&mode=design&t=cBUfY505Xm3BoCxU-1

      • When “Apple pay is clicked”, show pop-up: “Agree to t&c…”. Only proceed to Apple pay when user ticks the box (mandatory)

  3. On individual product pages

    1. Desktop: https://www.figma.com/file/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?type=design&node-id=1279%3A9621&mode=design&t=cBUfY505Xm3BoCxU-1

    2. Mobile: https://www.figma.com/file/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?type=design&node-id=1278%3A9196&mode=design&t=ZS3fa4NJT8MHi8px-1

 

Acceptance criteria

 

01

Given: product page https://stage.saclab.com/bags/unlimited-product/
AND MacOS + Browser Safari OR iOS + Safari

When: click “Apple Pay“ button AND check displayed checkbox(agree to T&C) from Popup

Then: money is automatically debited from the bank card/order is processed
AND open page “Thank you. Your order has been received.”
AND all contact information is received automatically from Apple user’s account:
– Name
– Email
– Phone
– Address

AND Send eMail to buyer “Invoice xxx we’re waiting on your payment”

AND Send eMail to seller “Your bag was sold”

image-20240419-063026.png

Screenshot 2024-04-23 at 16.23.07.png

02

Given: product page https://stage.saclab.com/bags/unlimited-product/
AND NOT MacOS + Browser Safari OR NOT iOS + Safari

When: don’t see the Apple pay button

Then: can’t finish the order with fast payment with Apple Pay button

 

03

Given: Product(s) in Cart, Cart is open AND MacOS + Browser Safari OR iOS + Safari

When: click “Apple Pay“ button AND check displayed checkbox (agree to T&C) from Popup

Then: money is automatically debited from the bank card/order is processed
AND open page “Thank you. Your order has been received.”
AND all contact information is received automatically from Apple user’s account:

  • Name

  • Email

  • Phone

  • Address

AND Send eMail to buyer “Invoice xxx we’re waiting on your payment”

AND Send eMail to seller “Your bag was sold”

Screenshot 2024-04-23 at 17.17.56.pngScreenshot 2024-04-23 at 17.18.04.png

04

Given: Product(s) in Cart, Cart is open
AND NOT MacOS + Browser Safari OR NOT iOS + Safari

When: don’t see the Apple pay button

Then: can’t finish the order with fast payment with Apple Pay button

Screenshot 2024-04-24 at 17.16.29.png

05

Given: User enters Checkout AND MacOS + Browser Safari OR iOS + Safari

When: Apple Pay Button is clicked AND

Then:

money is automatically debited from the bank card/order is processed
AND open page “Thank you. Your order has been received.”
AND all contact information is received automatically from Apple user’s account:

  • Name

  • Email

  • Phone

  • Address

AND Send eMail to buyer “Invoice xxx we’re waiting on your payment”

AND Send eMail to seller “Your bag was sold”

Screenshot 2024-08-12 at 15.28.38.png

Screenshot 2024-08-12 at 15.28.51.png

06

Given: User enters Checkout
AND NOT MacOS + Browser Safari OR NOT iOS + Safari

When: don’t see the block “Express Checkout including Apple pay button

Then: can’t finish the order with fast payment with Apple Pay button

Screenshot 2024-08-12 at 15.26.36.png

07

Given: User gets Apple Pay Button displayed

When: User clicks “Apple Pay” on Product Page OR Cart OR Checkout AND User is located in US

Then: checkbox (agree to T&C) AND ceckbox“no returns possible” is displayed has to be checked

Then: money is automatically debited from the bank card/order is processed
AND open page “Thank you. Your order has been received.”
AND all contact information is received automatically from Apple user’s account:

  • Name

  • Email

  • Phone

  • Address

AND Send eMail to buyer “Invoice xxx we’re waiting on your payment”

AND Send eMail to seller “Your bag was sold”

Screenshot 2024-04-24 at 17.11.56.png

08

Given: User clicks “Pay with Apple Pay”-Button on PP or Cart
When: Product is “exotic leather” AND User set “Ship to” of Apple Pay to outside EU and tries to Pay via Apple Pay
Then: Cancel the Apple Pay Payment Process AND display iOs Apple Pay Error Message AND let the user change the Shipping Address within EU.

Error Message:
EN: We cannot deliver exotic bags to an address outside of the EU.
EN: Unable to ship outside the EU
DE: Leider können wir Modelle aus Exotenleder nicht an eine Adresse außerhalb der EU liefern.
DE: Versand außerhalb der EU nicht möglich
FR: Malheureusement, nous ne pouvons pas livrer les sacs en cuirs exotiques aux adresses situées en dehors de l’Union européenne.
FR: Impossible d’expédier hors de l’UE

Screenshot 2024-09-02 at 17.37.17.png

image-20240904-152531.png

09

Given: User sees Price in € AND clicks “Pay with Apple Pay”-Button on PP or Cart
When: User set “Ship to” in Apple Pay Payment Process to USA
Then: Cancel the Apple Pay Payment Process AND reload the same page but as US version

Given: A Customer sees $amount on PP/cart/checkout
When: The user tries checking out via Apple Pay
Then: User can only checkout when "shipping to" is set to a USA
When: The user tries checking out with “Shipping to” outside of USA
Then User gets an error message "USD payments ship only to the US."
And let the user change the shipping address

EN: USD payments ship only to the US.
DE: USD-Zahlungen werden nur in die USA versendet.
FR: Les paiements en USD sont expédiés uniquement aux USA.
(allow us to change that text somewhere in WP)

Screenshot 2024-09-02 at 17.34.56.png

10

Given: User sees Price in $ AND clicks “Pay with Apple Pay”-Button on PP or Cart
When: User set “Ship to” in Apple Pay Payment Process outside of USA
Then: Cancel the Apple Pay Payment Process AND reload the same page but as EN € version
Given: A Customer sees € aumount on PP/Cart/Checkout
When: The user tries checking out via Apple Pay and the “Shipping to” Address is set to outside the US
Then: User can checkout (as long as it still respects the exotic leather limitation)
When: The user tries checking out with “Shipping to” an US Address
Then: User gets error message “€ payments can’t ship to the US.”
And let the user change the shipping address

EN: € payments can’t ship to the US.
DE: € Zahlungen können nicht in die USA versendet werden.
FR: Les paiements en € ne sont pas expédiés aux USA.

(allow us to change that text somewhere in WP)

 

Comments

Leave a Reply