Add one-click checkout flow with GUID

Owned by Tu Nguyen
Last updated: Jan 26, 2022
2 min read

 

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)

Adjust Layout (disabled MID):

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.