Add one-click checkout flow with GUID

Important note: please add class ‘ctr_cta_button' for the widget’s CTA Button if it had not yet

Setup

Step 1: Drag widget Get User Info (With GUID)

Step 2: Drag widget Button One Click CreditCard

Step 3: Move section CreditCard form into wrap box (Payment GUID Wrap) and stay above wrap box (Address GUID Wrap)

Step 4: Move section Shipping & Billing form and CreditCard button into wrap box (Address GUID Wrap)

Open

Adjust Layout (disabled MID):

Open

Step 1: Duplicate wrap box ‘Wrap Button Checkout’ and remove class ‘wrap-button-checkout’ then move to the end of Credit Card form section.

Step 2: Moving text ‘All charges to yours ending in {last4Digits}’ to the top of Credit Card form section.

Step 3: Add class ‘expand-element’ which will be shown in case disabled MID (in step1 and step2) and add class 'address-guid-wrap' which will be hide case disabled MID

Classes:

• ‘payment-guid-wrap’: showing when switching ('click here' button) to checkout with creditcard or in case disabled MID

• ‘address-guid-wrap’: the same as with ‘payment-guid-wrap’ but it will hide in case disabled MID

• ‘expand-element’:

  • showing in case disabled MID at first load and hiding when switching ('click here' button) to checkout with creditcard.