vtex-checkout-custom-files

Sample custom files for VTEX Checkout alternative

Simplified Flow

Note: Each step has its own errors that should be handled properly.

Example URL

https://pocvtex.myvtex.com/checkout/cart/add/?sku=2000729&qty=1&seller=1&sc=3

Post-robot

Events:

{
  'setup',
  'showCardErrors',
  'resetCardFormData',
  'updateAddressId',
  'isCardValid',
  'getCardLastDigits'
}

Listeners:

{
  'paymentSystem'
}

Using stored cards

Three steps:

• Get all available cards from paymentData within the orderForm (also from the user profile).
• Use the cardType=saved parameter with the iframe.
• Fill the payment data sent to the iframe with the ID accountId from the desired card.

Interface Samples (VTEX IO Checkout)

Project Reference:
https://github.com/vtex-apps/checkout
https://github.com/vtex-apps/checkout-payment/blob/master/react/Payment.tsx
https://github.com/vtex-apps/checkout-payment/blob/master/react/CreditCard.tsx
https://github.com/vtex-apps/checkout/blob/master/react/PlaceOrder.tsx