{
    "componentChunkName": "component---src-templates-article-page-template-js",
    "path": "/concepts/off-session-payments-in-transaction-process/",
    "result": {"data":{"markdownRemark":{"frontmatter":{"title":"Automatic off-session payments in transaction process","slug":"off-session-payments-in-transaction-process","updated":"2021-10-14T00:00:00.000Z","category":"concepts-payments","ingress":"With off-session payments you can automatically charge your customers closer to their booking times. This allows for money to be held in Stripe throughout the booking period even when the booking is placed long time in advance.","skills":null},"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In a typical transaction, the customer pays upfront, but the money is\nheld until the transaction completes (e.g. until the booking end date)\nbefore it is paid out to the provider's bank account. Normally, the\nmaximum amount of time the money can be held when using Stripe payments\nis 90 days. Therefore, the maximum amount of time customers can book in\nadvance is limited, if your transaction process follows this payment\npattern."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Flex API has capabilities for\n"},{"type":"element","tagName":"a","properties":{"href":"https://www.sharetribe.com/api-reference/marketplace.html#stripe-customer","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"saving payment card details for future use"}]},{"type":"text","value":".\nIn addition, it is possible to configure your transaction process in\nsuch a way that the customer is charged automatically off-session at a\ncertain point in time (i.e. when they are not present and interacting\nwith your web site or app), provided that they have saved a payment card\nto their account. This allows you to charge customers closer to their\nbooking dates, so that the money can be held in Stripe throughout the\nbooking period."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Another way to use the off-session payment logic might be to create a\npre-order functionality for a product marketplace. In a pre-order\ntransaction flow, the provider could put their future offerings for sale\nand include a delivery date well into the future. Customers could then\npre-order the items, and their card would only be charged once the\nprovider marks the orders as being in progress or shipped. Again, this\nwould allow the pre-order time to be longer than the Stripe limitation\nof 90 days."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"transaction-process-example","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#transaction-process-example","ariaLabel":"transaction process example 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":"Transaction process example"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Suppose your sauna rentals marketplace should allow customers to book\nsaunas up to a year in advance, but the customer is only charged at a\nspecified moment before the booking. The figure below illustrates how a\npart of your transaction process might look like. The\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/example-processes/","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"example-processes Github repository"}]},{"type":"text","value":"\ncontains\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/example-processes/tree/master/automatic-off-session-payment","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"an example transaction process"}]},{"type":"text","value":"\ncorresponding to the flow described."}]},{"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/d2fd2f671347b00d8b4bfa745e2cd783/10f00/tx-delayed-payments.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: 101.88679245283019%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAACTUlEQVQ4y41Ua3OqMBD1//++Xm+tiqK8Q54kG8DOnE5CRYva6YedA2E52cfZXSnrEUx2BOV61A1DWRZQtocfRpCfUDl/s6v/97/3tron1NQjz1ockwra9eioh9Y6YltZcObAWwdp6CXpD8KATHaoWj07tIxBWQI7dah3Bk1iINQfCG9p+xhdeA+pat2B+iFGr8hP9teUr3jvXFUKqiO0pY1ph+ikpdnv3h4iXJIP4wW2cxHn8+65/6+EVyfrB2g7YdlKFEyg4golkygagbzm8fz+n9Uy1fvbGmmQlgyNMHg/pHjb7PG2SbDeHSNujxm2aY5NcoqXhdqvZhJLD1prhEZaNKi5RpFKlLVEzVV8D5EK457XMHRQSgJvHIQkCOEWKY/ghYOoHURL0UItnzVnda4Y9qcCaVYjLwTKnCE9N+AtB3mC6Wyclq4fYGiAcf2EC7tKbcWkieG3qpu0JhiUm8LXLgjdwFAfL13vDnhPUvzbHvB/l2K9PWC9Pcaanko2EWo7CTmYsQRjTMTwkWuL5FyCG4t9UmK9OeJjn+F9d4qN+Dicvy1Dci5QC31rSiBwvodzFCcjLAppfXQKteKZA08d2qODyAmKeyjZP6Y8y8YQpPbgLYvaYkJhHEf0w4jL52e8VKjQNAehn0/KTx1qAjt3qFONPBFoSgXqpzKEiKWiedafjegsm/mwu0WpjI/7MNQwzesocMEfhb8knXU4Hd7d9v08Xj5BPuAldvzVhvlB+NvohcUqtI3aW26kl4S/bQ5hCFndghv3MsUl4Rfkvfc+q92Z9wAAAABJRU5ErkJggg=='); 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/d2fd2f671347b00d8b4bfa745e2cd783/82e29/tx-delayed-payments.webp 159w","/docs/legacy/static/d2fd2f671347b00d8b4bfa745e2cd783/ef33f/tx-delayed-payments.webp 318w","/docs/legacy/static/d2fd2f671347b00d8b4bfa745e2cd783/f1837/tx-delayed-payments.webp 635w","/docs/legacy/static/d2fd2f671347b00d8b4bfa745e2cd783/29549/tx-delayed-payments.webp 953w","/docs/legacy/static/d2fd2f671347b00d8b4bfa745e2cd783/c5420/tx-delayed-payments.webp 1270w","/docs/legacy/static/d2fd2f671347b00d8b4bfa745e2cd783/fd465/tx-delayed-payments.webp 2798w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/d2fd2f671347b00d8b4bfa745e2cd783/8b9b5/tx-delayed-payments.png 159w","/docs/legacy/static/d2fd2f671347b00d8b4bfa745e2cd783/fa108/tx-delayed-payments.png 318w","/docs/legacy/static/d2fd2f671347b00d8b4bfa745e2cd783/53fb6/tx-delayed-payments.png 635w","/docs/legacy/static/d2fd2f671347b00d8b4bfa745e2cd783/5a426/tx-delayed-payments.png 953w","/docs/legacy/static/d2fd2f671347b00d8b4bfa745e2cd783/91155/tx-delayed-payments.png 1270w","/docs/legacy/static/d2fd2f671347b00d8b4bfa745e2cd783/10f00/tx-delayed-payments.png 2798w"],"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/d2fd2f671347b00d8b4bfa745e2cd783/53fb6/tx-delayed-payments.png","alt":"Example transaction process with delayed payment","title":"Example transaction process with delayed payment","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":"In this example, a transaction goes as follows:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The customer picks the desired booking dates and initiates a\ntransaction. The price of the transaction is calculated, but no\npreauthorization or payment is made at this point."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The provider verifies the request and accepts the booking."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"At a later point in time (1 month before the booking start time in\nthis example, and 1 day before the booking start in the\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/example-processes/tree/master/automatic-off-session-payment","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"example process"}]},{"type":"text","value":"),\nan attempt is made to automatically charge the customer's stored\npayment card. If the charge succeeds, the transaction continues\nonwards."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The automatic charge can fail for multiple reasons. If the charge\nfails, the customer (and optionally also the provider) receives an\nemail notification and the customer is asked to visit the marketplace\nweb site in order to pay manually."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"extrainfo","properties":{"title":"How does creating and capturing an off-session payment work?"},"children":[{"type":"text","value":"\nIn the auto-payment transition, the payment intent creation needs to be configured to use the customer's saved payment information, if it exists. When the action is configured like this, it both creates and confirms the payment intent. Therefore, only capturing the payment intent remains necessary.\n"},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"clojure"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-clojure"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-clojure"]},"children":[{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","symbol"]},"children":[{"type":"text","value":":name"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","symbol"]},"children":[{"type":"text","value":":transition/auto-payment"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n   "},{"type":"element","tagName":"span","properties":{"className":["token","symbol"]},"children":[{"type":"text","value":":from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","symbol"]},"children":[{"type":"text","value":":state/pending-payment"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n   "},{"type":"element","tagName":"span","properties":{"className":["token","symbol"]},"children":[{"type":"text","value":":to"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","symbol"]},"children":[{"type":"text","value":":state/paid"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n   "},{"type":"element","tagName":"span","properties":{"className":["token","symbol"]},"children":[{"type":"text","value":":at"}]},{"type":"text","value":"\n   "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","symbol"]},"children":[{"type":"text","value":":fn/plus"}]},{"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","symbol"]},"children":[{"type":"text","value":":fn/timepoint"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","symbol"]},"children":[{"type":"text","value":":time/first-entered-state"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","symbol"]},"children":[{"type":"text","value":":state/pending-payment"}]},{"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","symbol"]},"children":[{"type":"text","value":":fn/period"}]},{"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":"\"PT5M\""}]},{"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":"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","symbol"]},"children":[{"type":"text","value":":actions"}]},{"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","symbol"]},"children":[{"type":"text","value":":name"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","symbol"]},"children":[{"type":"text","value":":action/stripe-create-payment-intent"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n     "},{"type":"element","tagName":"span","properties":{"className":["token","symbol"]},"children":[{"type":"text","value":":config"}]},{"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","symbol"]},"children":[{"type":"text","value":":use-customer-default-payment-method?"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","symbol"]},"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","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","symbol"]},"children":[{"type":"text","value":":name"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","symbol"]},"children":[{"type":"text","value":":action/stripe-capture-payment-intent"}]},{"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":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is important to note that an off-session payment can fail for various\nreasons. For instance, the card could be denied due to insufficient\nfunds, the issuing bank may require additional authentication from the\ncustomer (this can easily occur with European payment cards when\n"},{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/concepts/strong-customer-authentication/"},"children":[{"type":"text","value":"Strong Customer Authentication regulation"}]},{"type":"text","value":"\nkicks in), the payment card might have expired, etc. It is therefore\nalways important to allow for a fall-back payment path in your\ntransaction process. Since only one transition from a state can be\ntriggered automatically, this fall-back payment path must trigger upon a\nuser action, as in the example."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can build upon this example and extend it to make the payment\nprocess more robust. For instance, in case the customer fails to pay for\nthe transaction within certain amount of time, you may wish to allow the\nprovider or marketplace operator to cancel the transaction, or allow the\nprovider to post a review of the customer. In addition, you may consider\ndisallowing customers to remove their stored payment card in your UI\nimplementation, if they have ongoing transactions for which they have\nnot yet been charged."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"considerations-about-implementation-in-ftw-templates","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#considerations-about-implementation-in-ftw-templates","ariaLabel":"considerations about implementation in ftw templates 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":"Considerations about implementation in FTW templates"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you want to implement\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/example-processes/tree/master/automatic-off-session-payment","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"the example process"}]},{"type":"text","value":"\nin your user interface, there are multiple ways to do so. If your user\ninterface is based on one of the FTW templates, here are a few things\nworth considering."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"transitions-and-states","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#transitions-and-states","ariaLabel":"transitions and states 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":"Transitions and states"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/tutorial/create-transaction-process/#update-client-app"},"children":[{"type":"text","value":"Transitions and states"}]},{"type":"text","value":"\nare used in the template as conditions for several behaviors, including\nredirects and displayed content. The\n"},{"type":"element","tagName":"a","properties":{"href":"https://www.sharetribe.com/api-reference/marketplace.html#transaction-resource-format","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"transaction resource"}]},{"type":"text","value":"\ncontains information about the transaction's last transition and its\ntimestamp."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"separating-order-from-payment","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#separating-order-from-payment","ariaLabel":"separating order from 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":"Separating order from payment"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the default transaction process and default FTW flow, the order is\ninitiated and processed on\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/ftw-daily/blob/master/src/containers/CheckoutPage/CheckoutPage.js","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"CheckoutPage.js"}]},{"type":"text","value":"\nin "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"handlePaymentIntent()"}]},{"type":"text","value":", using\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/ftw-daily/blob/master/src/containers/ListingPage/ListingPage.js","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"initial values from ListingPage.js"}]},{"type":"text","value":"\nset in "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"handleSubmit()"}]},{"type":"text","value":" with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"callSetInitialValues()"}]},{"type":"text","value":". Since the\noff-session payment process separates initiating the order (i.e.\ncreating a booking, setting line items in a privileged transition) from\npayment (creating and further processing Stripe payment intent), it is\nimportant to pay attention to the way you want to handle that\nseparation."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"What happens when user clicks 'Request to book' on ListingPage.js?"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Where is the API call made to invoke the initial process transition\nthat creates a booking and sets line items?"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"handling-delayed-manual-payment","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#handling-delayed-manual-payment","ariaLabel":"handling delayed manual 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":"Handling delayed manual payment"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If the automatic payment succeeds, the customer does not need to take\nfurther action on the transaction before the review process. Manual\npayment, on the other hand, does require a new user flow in the FTW\ntemplate.\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/ftw-daily/blob/master/src/containers/CheckoutPage/CheckoutPage.js","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"CheckoutPage.js"}]},{"type":"text","value":"\nis set up to handle payments toward Stripe, so the simplest option is\nthat after an automatic payment has not succeeded and the customer has\nmanually triggered the transition to create a payment intent, they are\nredirected to CheckoutPage.js (cf.\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/ftw-daily/blob/master/src/containers/TransactionPage/TransactionPage.js","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"TransactionPage.js"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"redirectToCheckoutPageWithInitialValues()"}]},{"type":"text","value":") to continue the process."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Pay attention to the following points when designing your user flow:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"What action does the customer take in the UI to initiate manual\npayment?"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Does the provider see whether or not the customer has paid for the\nbooking?"}]},{"type":"text","value":"\n"}]}],"data":{"quirksMode":false}},"headings":[{"value":"Transaction process example","depth":2},{"value":"Considerations about implementation in FTW templates","depth":2},{"value":"Transitions and states","depth":3},{"value":"Separating order from payment","depth":3},{"value":"Handling delayed manual payment","depth":3}]}},"pageContext":{"slug":"off-session-payments-in-transaction-process","category":"concepts-payments"}},
    "staticQueryHashes": ["3794076007","439097193","717698143"]}