{
    "componentChunkName": "component---src-templates-article-page-template-js",
    "path": "/how-to/save-payment-card/",
    "result": {"data":{"markdownRemark":{"frontmatter":{"title":"How saving a payment card works in FTW","slug":"save-payment-card","updated":"2020-08-11T00:00:00.000Z","category":"how-to-payments","ingress":"An overview of how the Flex Template for Web functionality for storing payment cards works.","skills":null},"htmlAst":{"type":"root","children":[{"type":"element","tagName":"h2","properties":{"id":"introduction","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#introduction","ariaLabel":"introduction permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Introduction"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When a customer first comes to the marketplace and books a listing,\nthere are several form fields the user needs to fill: expiration month,\ncard verification code (CVC), card holder's name and possibly other\nbilling details. To improve user experience for returning customers,\nit's good to have an option to save payment card details for future\nbookings. If there is an existing payment card available, the user can\njust click the \"Send request\" button to complete checkout page."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"From that point forward, the typical case is that customer pays upfront\n(aka makes an\n"},{"type":"element","tagName":"a","properties":{"href":"https://stripe.com/docs/payments/cards/reusing-cards#charging-on-session","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"on-session"}]},{"type":"text","value":"\npayment). In practice, a preauthorization is created: the money is\nreserved, but not yet moved to Stripe. When a provider accepts the\nrequest, the preauthorization is captured (i.e. the payment is charged\nfrom the card and money moved to Stripe and held on the connected\naccount of the provider until payout). The actual payout happens when\nthe transaction completes."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Payment card needs also be saved for off-session payments if those are\nin use. They are automatic one-time payments that happen when the user\nis not interacting with your application. You can read more about\noff-session payments from a separate\n"},{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/concepts/off-session-payments-in-transaction-process/"},"children":[{"type":"text","value":"article"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note: saving payment card was added to FTW in version v3.3.0."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"saving-card-details","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#saving-card-details","ariaLabel":"saving card details permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Saving card details"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"There are 2 ways to save payment card details:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"saving cards details without making an initial payment"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"saving cards details after a payment"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The former of those can be done in payment methods page (profile menu ->\naccount settings -> payment methods), but you can also save payment card\ndetails on the checkout page when making a one-time payment."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note: currently, it is only possible to save one card, which becomes\nthe default payment method. I.e. if there is already one payment card\nsaved, your only option is to replace the card with a new one."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"saving-cards-without-making-an-initial-payment","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#saving-cards-without-making-an-initial-payment","ariaLabel":"saving cards without making an initial payment permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Saving cards without making an initial payment"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If the user has no existing default payment card, "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"PaymentMethodsPage"}]},{"type":"text","value":"\ncomponent will show just a form to save payment card details:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 635px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/d0bd1f1740550d34b4d147099d901c38/53fb6/payment-methods-page.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 63.52201257861635%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsTAAALEwEAmpwYAAABjElEQVQ4y62SSW/CMBCF/RPhwHZC4j+3SHBA7Ak0JGSx4/VVM9Sm6qJeaunTeGzn2fMmYjAY4CeGw+E3aH00GmEymWA8HmM6nTLz+RyLxQKz2Qxiv99jt9sxNCcOhwOOx2OKkZifTqdElmWo6xpt26IoCgj88xB936PruoTWGiEEVFWF8/nMt0boNdfrlXHO8TnvPceIaJoGeZ7jcrnwQWMM33S/3/H68oLNZsNst1ssl0us12usVisWpBGFAIqAoPrJi9vtxhvW2nSrdQ7G2F/LCx/EOSmKWBoZTi+MYlJ2KIsryuIC2daANwhWIzjCwFsNozpYLeFMn14ryrJkMfKHOk1ekZfWGKiuQS9b5jlveB5z1dbQqnsKkmdSSlBzlFIcyR/nPAyV/2G88z5Fl/KQYhKkj/ngp0gbFKnjsUl/jUdjAEFN+AptklD8YZNoeBj/7Ox3UfEo70kUJBuyPENZlTDWPEoPnn6OpE15JL3wV0Elkb3lqNo7TLDonYb2Bo1qcWsqXqc8rkfBd2fVzczl7lfmAAAAAElFTkSuQmCC'); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/d0bd1f1740550d34b4d147099d901c38/82e29/payment-methods-page.webp 159w","/docs/legacy/static/d0bd1f1740550d34b4d147099d901c38/ef33f/payment-methods-page.webp 318w","/docs/legacy/static/d0bd1f1740550d34b4d147099d901c38/f1837/payment-methods-page.webp 635w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/d0bd1f1740550d34b4d147099d901c38/8b9b5/payment-methods-page.png 159w","/docs/legacy/static/d0bd1f1740550d34b4d147099d901c38/fa108/payment-methods-page.png 318w","/docs/legacy/static/d0bd1f1740550d34b4d147099d901c38/53fb6/payment-methods-page.png 635w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/d0bd1f1740550d34b4d147099d901c38/53fb6/payment-methods-page.png","alt":"Payment methods page","title":"Payment methods page without default payment method.","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If there is a default payment methods saved, user will see a dropdown\ninstead, where the current default method is selected. There are two\noptions the user can do: replace the current payment card (it's an\noption inside the dropdown) or delete the current payment card."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 635px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/527d965601799dde6c39f9ea7561f532/53fb6/payment-methods-page-saved-card.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 42.138364779874216%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA7klEQVQoz61Qy65FQBCc//8ohAUrybksWFkQQbDwGK+hT6pvWpxzt7eTSk1Ld3UVZVkWfcO2bXIc52YBetd1yfM8ZiAIAoqiiOI4Jt/3SdE/l9q2jZZloXVdGeiNMaS1pmEYmOd5ZqCfponfmBGc58nAW2GhaRpGXdcsiOr7nsIwpCRJKE1TyrKMXj8vjoYedV3X7UzeCtfKsqSu6/jCcRzMKLn6dCKLYEDcyTeFCBAE2ra9l4w5SeuF42FGokqCp6AYYMFxHKkoCqqqivI856j4DRjc9/3D8TOe4E9kLOE6RIQh8jv0ufwt8hQXh28oE2RZ8YqccQAAAABJRU5ErkJggg=='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/527d965601799dde6c39f9ea7561f532/82e29/payment-methods-page-saved-card.webp 159w","/docs/legacy/static/527d965601799dde6c39f9ea7561f532/ef33f/payment-methods-page-saved-card.webp 318w","/docs/legacy/static/527d965601799dde6c39f9ea7561f532/f1837/payment-methods-page-saved-card.webp 635w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/527d965601799dde6c39f9ea7561f532/8b9b5/payment-methods-page-saved-card.png 159w","/docs/legacy/static/527d965601799dde6c39f9ea7561f532/fa108/payment-methods-page-saved-card.png 318w","/docs/legacy/static/527d965601799dde6c39f9ea7561f532/53fb6/payment-methods-page-saved-card.png 635w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/527d965601799dde6c39f9ea7561f532/53fb6/payment-methods-page-saved-card.png","alt":"Payment methods page saved card","title":"Payment methods page with default payment method.","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Under the hood, saving a new payment method needs to complete following\nsteps:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Create Stripe\n"},{"type":"element","tagName":"a","properties":{"href":"https://www.sharetribe.com/api-reference/marketplace.html#stripe-setup-intents","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"Setup Intent"}]},{"type":"text","value":"\nthrough Flex API to obtain the client secret."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Call "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"stripe.handleCardSetup"}]},{"type":"text","value":" with the client secret\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"stripe.handleCardSetup"}]},{"type":"text","value":" will handle user actions like 3D Secure\nauthentication"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Save payment method:\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Create a new Stripe Customer if needed and attach the new payment\nmethod to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"stripeCustomer"}]},{"type":"text","value":" entity."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"There's no replace or update option for "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"defaultPaymentMethod"}]},{"type":"text","value":"\nentity. To replace a payment card, one needs to remove previous card\nfirst and then add a new payment method."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"saving-cards-after-a-payment","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#saving-cards-after-a-payment","ariaLabel":"saving cards after a payment permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Saving cards after a payment"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If the user doesn't have a default payment card saved, or if she is\nmaking a one-time payment with a different payment card, there's an\noption (checkbox) to save the new payment card as the default payment\nmethod."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 635px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/06f6b8cd31d2ff8bde5ef4cf12b6f1b1/53fb6/one-time-payment.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 82.38993710691824%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsTAAALEwEAmpwYAAACoElEQVQ4y4VUW2sTQRTenyGYB31WvCBFH7y8VFGCbZEIFaQGbBFBvFRRoX1RKoIlSI1EpPTJvgj+BFGxNtBCQi7GRqFSSijdzWV39pLs7CWfnIkT02px4GNmd875zjnfnBklCALshLDdBjcZWKMBputwbRt+EMD3/X+CfBT54Xled5YQRu022r/xv9ElDMNQONB6u0FvBvV6HZubKjStKqBqGlQxV6GqKlzXhdJsNpHL5bCysoJyuYxCoYB8Pi9mMpDle5xjYHQcu05exJ7oKHafG0UkOobImTgi/XHsPX0F+W8/oHDOUSwWkclksLGxAcdxYJomLMvaog1JcGtmHv0PX2Lo6RsMPnuL6JN5xKbf4cLkLM6PJ1BarUAhw0qlgvX1dRiGIUqVEsiSg6BDmky9xu37E5icSmAmNYsXyVdIPU9i7X0CH+cm8HN17c+hEAlhp9OjwGMjlzB46ige34zjTnwYd0diSNy4jM/Jq5h7MIzvpVKHkDEmSiTNfD8QkNrJYK1WC4mpR5i6dx3XYmdxou8Ijh0+hIGBIfTtP4DjB/ehVCx0StZ1HY1GAyZjwplK5K4rAtB+J0MfenUTX7PLWFxIY3E5i/RSBulsCV+WsvjwaUFwKL7nwTF1WEZdoGnqsFkd3DHhtyz4niuamUhpaNU6DIOh6dgIw2BLm5HuChlS65ARlU6gtW3b4r/MUGrpODZMkwkJerWXNoKQynNsW7QMGVKpNBN6CcnRdbnY7+jt/9UV4lCoF7nLu87bIbMjR8qc2ouCSRmoKgpA+4KQTpggjXa6/OQgZSE5yJ5GrVYTa0FIWWmaBk3VRPSw97XpyVASSl3loH90s7qvjSA0alCNKphrweQ2GLc7s2uh6bW2lC1fnm7QMOwS06H8AvTslnfLx0cHAAAAAElFTkSuQmCC'); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/06f6b8cd31d2ff8bde5ef4cf12b6f1b1/82e29/one-time-payment.webp 159w","/docs/legacy/static/06f6b8cd31d2ff8bde5ef4cf12b6f1b1/ef33f/one-time-payment.webp 318w","/docs/legacy/static/06f6b8cd31d2ff8bde5ef4cf12b6f1b1/f1837/one-time-payment.webp 635w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/06f6b8cd31d2ff8bde5ef4cf12b6f1b1/8b9b5/one-time-payment.png 159w","/docs/legacy/static/06f6b8cd31d2ff8bde5ef4cf12b6f1b1/fa108/one-time-payment.png 318w","/docs/legacy/static/06f6b8cd31d2ff8bde5ef4cf12b6f1b1/53fb6/one-time-payment.png 635w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/06f6b8cd31d2ff8bde5ef4cf12b6f1b1/53fb6/one-time-payment.png","alt":"One-time payment and saving card details for future use","title":"One-time payment and saving card details for future use","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If the default payment method exists, user needs to select one-time\npayment first and then she is able to replace the default card."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 430px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/792019b6e2d230d884ebe78647356deb/b8a92/pay-with-new-one-time-card.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 67.29559748427673%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsTAAALEwEAmpwYAAABQ0lEQVQ4y5VT2W6DMBD0//9gpOShJBDEJZARNocJE82m27okTdWVRraX9ewx2Hjv0TQN+r5HXdcYxxG32w3ruv4bIQSYZVkwDIPAOYdpmjDP81swJob6SWpYYQgPdjqYQANe7TUuBr8pufHOwY8TmtZKu+fzGcfjEVmWoaoqHA4H8fF8Op3kUmwcD7tjMt43PDADMxNxRVpVXKnGxSApOxVCikEHbds2wTvTmBg0EhLGWvtFyFl+JBWc82jbVtTnSvXZMltntUVRCDQBjYISD8I/qtKLFECr4v5XQlHqc0acg/4a3HNlK/TFBPsRPRH6+ZtIhYh/WK1oT/RE2FuLaZ3RrYPMsqxbLCEgz3MkSYKyLGV2aZoKeH4lyo8KX5k+v/0zVAH3xrEIYdd1uF6vkv1yuQi4p6q67qHVMpZn3qfqfCl3Hc3zAQfErUYAAAAASUVORK5CYII='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/792019b6e2d230d884ebe78647356deb/82e29/pay-with-new-one-time-card.webp 159w","/docs/legacy/static/792019b6e2d230d884ebe78647356deb/ef33f/pay-with-new-one-time-card.webp 318w","/docs/legacy/static/792019b6e2d230d884ebe78647356deb/1afa8/pay-with-new-one-time-card.webp 430w"],"sizes":"(max-width: 430px) 100vw, 430px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/792019b6e2d230d884ebe78647356deb/8b9b5/pay-with-new-one-time-card.png 159w","/docs/legacy/static/792019b6e2d230d884ebe78647356deb/fa108/pay-with-new-one-time-card.png 318w","/docs/legacy/static/792019b6e2d230d884ebe78647356deb/b8a92/pay-with-new-one-time-card.png 430w"],"sizes":"(max-width: 430px) 100vw, 430px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/792019b6e2d230d884ebe78647356deb/b8a92/pay-with-new-one-time-card.png","alt":"Pay with one-time payment card","title":"Pay with one-time payment card","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Under the hood, there are few changes made to the Payment Intents\ncheckout flow:"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"We need to know if the user has already saved a default payment\nmethod:\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Fetch "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"currentUser"}]},{"type":"text","value":" entity with\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"stripeCustomer.defaultPaymentMethod"}]},{"type":"text","value":" relationship"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Show correct form fields:\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If there's a default payment method saved: show SavedCardDetails\ncomponent. That component allows you to also select one-time payment\ninstead (and optionally replace the current default payment method\nwith this new payment card). If there's no default payment method\nsaved, one-time payment form is shown on its own."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"One-time payment needs card details, card holder's name etc. and\noptional permission to save card details for future bookings."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"In "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"request-payment"}]},{"type":"text","value":" transition, a new parameter needs to be passed if\ncard details are saved at the same time: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"setupPaymentMethodForSaving"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"stripe.confirmCardPayment"}]},{"type":"text","value":" call, "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"confirm-payment"}]},{"type":"text","value":" transition and the\ncall to send initial message are handled as before"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Save the payment method if user has given permission to do that:\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Create a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"stripeCustomer"}]},{"type":"text","value":" entity for the current user if needed."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Attach the created payment method to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"stripeCustomer"}]},{"type":"text","value":" entity."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note: Even if the call to save payment method fails, one-time payment\nitself has succeeded. Therefore, it is better to forward user to\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"TransactionPage"}]},{"type":"text","value":" anyway."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"getting-permission-to-save-a-card","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#getting-permission-to-save-a-card","ariaLabel":"getting permission to save a card permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Getting permission to save a card"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Once you set up your payment flow to properly save a card with the\nPayment Intents or Setup Intents API, Stripe will mark any subsequent\noff-session payment as a merchant-initiated transaction to reduce the\nneed to authenticate. Merchant-initiated transactions require an\nagreement (also known as a “mandate”) between you and your customer.\nRead more about needed permissions from\n"},{"type":"element","tagName":"a","properties":{"href":"https://stripe.com/docs/payments/cards/reusing-cards#mandates","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"Stripe's documentation"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"charging-saved-cards","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#charging-saved-cards","ariaLabel":"charging saved cards permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Charging Saved Cards"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If the user has a default payment method and she chooses to use it to\nbook a listing, there are couple of changes needed:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The id of Stripe's payment method needs to be sent to Flex API as\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"paymentMethod"}]},{"type":"text","value":", when requesting payment."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"stripe.confirmCardPayment"}]},{"type":"text","value":": Stripe Elements (card) is not needed if\nthe default payment method is used."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"saving-payment-card-with-paymentintents-payment-flow","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#saving-payment-card-with-paymentintents-payment-flow","ariaLabel":"saving payment card with paymentintents payment flow permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Saving Payment Card with PaymentIntents payment flow"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here's the description of complete call sequence on CheckoutPage."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Note: PaymentIntents flow needs transaction process change as\ndescribed in doc:"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/how-to/enable-payment-intents/"},"children":[{"type":"text","value":"Enable Payment Intents if you are using an old version of FTW"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"initial-data-for-checkout","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#initial-data-for-checkout","ariaLabel":"initial data for checkout permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Initial data for Checkout:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Check if the user has already saved a default payment method. Fetch\ncurrentUser entity with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"stripeCustomer.defaultPaymentMethod"}]},{"type":"text","value":"\nrelationship. In FTW, we call a thunk function:\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/flex-template-web/blob/master/src/containers/CheckoutPage/CheckoutPage.duck.js#L302","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"fetchCurrentUser"}]},{"type":"text","value":" in CheckoutPage.duck.js"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Behind the scenes, this is essentially the following call:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"sdk"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"currentUser"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"show"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"include"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'stripeCustomer.defaultPaymentMethod'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"stripepaymentform-changes---show-correct-form-fields","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#stripepaymentform-changes---show-correct-form-fields","ariaLabel":"stripepaymentform changes   show correct form fields permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"StripePaymentForm changes - show correct form fields:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If there's a default payment method saved: show SavedCardDetails\ncomponent. That component allows you to also select one-time payment\ninstead (and optionally replace the current default payment method with\nthis new payment card). If there's no default payment method saved,\none-time payment form is shown on its own. One-time payment needs card\ndetails, card holder's name etc. and optional permission to save card\ndetails for future bookings."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"submit-stripepaymentform","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#submit-stripepaymentform","ariaLabel":"submit stripepaymentform permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Submit StripePaymentForm"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"After submitting "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"StripePaymentForm"}]},{"type":"text","value":", there are up to 5 calls in\nsequence (to Flex and Stripe APIs):"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h6","properties":{"id":"step-1","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#step-1","ariaLabel":"step 1 permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Step 1."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"sdk"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"transactions\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"initiate"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" processAlias"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"transition"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'transition/request-payment'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"..."}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"What happens behind the scene:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"API creates PaymentIntent against Stripe API and returns\nstripePaymentIntentClientSecret inside transaction's protectedData."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Booking is created at this step - so, availability management will\nblock dates for conflicting bookings."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Automatic expiration happens in 15 minutes, if process is not\ntransitioned to 'transition/confirm-payment' before that."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"After this call, created transaction is saved to session storage in\nFTW (or existing enquiry tx is updated)."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"When you intend to save card details"}]},{"type":"text","value":", a new parameter needs to be\npassed if card details are saved at the same time:\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"setupPaymentMethodForSaving"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"sdk"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"transactions"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"initiate"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  processAlias"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"transition"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'transition/request-payment'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"params"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    listingId"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    bookingStart"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    bookingEnd"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"setupPaymentMethodForSaving"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"true"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"When you are using previously saved payment card"}]},{"type":"text","value":", the id of Stripe's\npayment method needs to be sent to Flex API as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"paymentMethod"}]},{"type":"text","value":", when\nrequesting payment."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"sdk"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"transactions"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"initiate"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  processAlias"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"transition"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'transition/request-payment'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"params"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    listingId"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    bookingStart"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    bookingEnd"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"paymentMethod"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" stripePaymentMethodId"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note: params might be different in different transaction process\ngraphs."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Check\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/flex-template-web/blob/master/src/containers/CheckoutPage/CheckoutPage.duck.js#L171","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"initiateOrder"}]},{"type":"text","value":" thunk function"}]},{"type":"text","value":"\nand related\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/flex-template-web/blob/master/src/containers/CheckoutPage/CheckoutPage.js#L373","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"orderParams"}]}]},{"type":"text","value":"\nfrom FTW."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h6","properties":{"id":"step-2","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#step-2","ariaLabel":"step 2 permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Step 2."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"stripe"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"confirmCardPayment"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n  stripePaymentIntentClientSecret"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  paymentParams\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"paymentParams"}]},{"type":"text","value":" should include card element and billing details. See\n"},{"type":"element","tagName":"a","properties":{"href":"https://stripe.com/docs/js/payment_intents/confirm_card_payment","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"stripe.confirmCardPayment documentation"}]},{"type":"text","value":".."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note: paymentParams are not needed when using previously saved payment\ncard. FTW handles this in\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/flex-template-web/blob/master/src/ducks/stripe.duck.js#L657","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"confirmCardPayment"}]},{"type":"text","value":" thunk function"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Stripe's frontent script checks if PaymentIntent needs extra actions\nfrom customer. Some payments might need Strong Customer Authentication\n(SCA). In practice, Stripe's script creates a popup (iframe) to card\nissuers site, where 3D secure v2 authentication flow can be completed."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h6","properties":{"id":"step-3","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#step-3","ariaLabel":"step 3 permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Step 3."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"sdk"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"transactions"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"transition"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"id"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" transactionId"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"transition"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'transition/confirm-payment'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  params"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Inform Marketplace API, that PaymentIntent is ready to be captured after\npossible SCA authentication has been requested from user. FTW does that\nin\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/flex-template-web/blob/master/src/containers/CheckoutPage/CheckoutPage.duck.js#L206","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"confirmPayment"}]},{"type":"text","value":" thunk call"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h6","properties":{"id":"step-4","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#step-4","ariaLabel":"step 4 permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Step 4."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"sdk"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"messages"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"send"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"transactionId"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" orderId"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"content"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" message "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"FTW sends an initial message to transaction if customer has added a\nmessage."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h6","properties":{"id":"step-5","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#step-5","ariaLabel":"step 5 permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Step 5."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As a final step, we need to save the payment method, if customer has\nselected the \"Save for later use\" checkbox. So, this is relevant if user\nhas selected onetime payment - instead of making a charge from the\npreviously saved credit card."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"On FTW, we call\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/flex-template-web/blob/master/src/ducks/paymentMethods.duck.js#L200","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"savePaymentMethod function"}]},{"type":"text","value":"\nthat creates stripe customer and adds updates default payment method."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"There are 3 different scenarios, which require different calls to Flex\nAPI:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"1. No StripeCustomer entity connected to Flex API:"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"sdk"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"stripeCustomer"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"create"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" stripePaymentMethodId "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"expand"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"true"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"include"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'defaultPaymentMethod'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"FTW:\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/flex-template-web/blob/master/src/ducks/paymentMethods.duck.js#L136","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"dispatch(createStripeCustomer(stripePaymentMethodId))"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"2. Current user has already defaultPaymentMethod - 2 calls:"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" sdk"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"stripeCustomer"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"deletePaymentMethod"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"expand"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" sdk"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"stripeCustomer"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addPaymentMethod"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" stripePaymentMethodId "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"expand"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"FTW:\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/flex-template-web/blob/master/src/ducks/paymentMethods.duck.js#L181","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"dispatch(updatePaymentMethod(stripePaymentMethodId))"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"3. Current user has StripeCustomer entity connected, but no\ndefaultPaymentMethod:"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" sdk"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"stripeCustomer"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addPaymentMethod"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" stripePaymentMethodId "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","literal-property","property"]},"children":[{"type":"text","value":"expand"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"FTW:\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/flex-template-web/blob/master/src/ducks/paymentMethods.duck.js#L151","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"dispatch(addPaymentMethod(stripePaymentMethodId))"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"After these steps, customer is redirected to inbox and the ball is\nthrown to Provider to accept or decline the booking."}]}],"data":{"quirksMode":false}},"headings":[{"value":"Introduction","depth":2},{"value":"Saving card details","depth":2},{"value":"Saving cards without making an initial payment","depth":3},{"value":"Saving cards after a payment","depth":3},{"value":"Getting permission to save a card","depth":3},{"value":"Charging Saved Cards","depth":2},{"value":"Saving Payment Card with PaymentIntents payment flow","depth":2},{"value":"Initial data for Checkout:","depth":3},{"value":"StripePaymentForm changes - show correct form fields:","depth":3},{"value":"Submit StripePaymentForm","depth":3},{"value":"Step 1.","depth":6},{"value":"Step 2.","depth":6},{"value":"Step 3.","depth":6},{"value":"Step 4.","depth":6},{"value":"Step 5.","depth":6}]}},"pageContext":{"slug":"save-payment-card","category":"how-to-payments"}},
    "staticQueryHashes": ["3794076007","439097193","717698143"]}