diff --git a/packages/api-client/src/api/index.ts b/packages/api-client/src/api/index.ts
index 88daa794..65422925 100644
--- a/packages/api-client/src/api/index.ts
+++ b/packages/api-client/src/api/index.ts
@@ -10,6 +10,7 @@ export { default as removeCartCoupon } from './removeCartCoupon';
 export { default as getMe } from './getMe';
 export { default as updateAddressDetails } from './updateAddressDetails';
 export { default as getShippingMethods } from './getShippingMethods';
+export { default as getPaymentMethods } from './getPaymentMethods';
 export { default as setShippingMethod } from './setShippingMethod';
 export { default as setPaymentMethod } from './setPaymentMethod';
 export { default as transitionOrderToState } from './transitionOrderToState';
diff --git a/packages/composables/src/getters/cartGetters.ts b/packages/composables/src/getters/cartGetters.ts
index f65cfc13..efcec718 100644
--- a/packages/composables/src/getters/cartGetters.ts
+++ b/packages/composables/src/getters/cartGetters.ts
@@ -14,7 +14,7 @@ interface ExtendedCartGetters extends CartGetters<Order, OrderLine> {
 }
 
 const getItems = (cart: Order): OrderLine[] => {
-  if (!cart.lines) return [];
+  if (!cart?.lines) return [];
 
   return cart?.lines;
 };
diff --git a/packages/theme/components/Checkout/VsfPaymentProvider.vue b/packages/theme/components/Checkout/VsfPaymentProvider.vue
index a12b7048..604d9788 100644
--- a/packages/theme/components/Checkout/VsfPaymentProvider.vue
+++ b/packages/theme/components/Checkout/VsfPaymentProvider.vue
@@ -43,8 +43,9 @@ import {
   SfButton,
   SfRadio
 } from '@storefront-ui/vue';
-import { ref } from '@vue/composition-api';
+import { ref, onMounted } from '@vue/composition-api';
 import { usePaymentProviderMock } from '@/composables/usePaymentProviderMock';
+import { useVSFContext } from '@vue-storefront/core';
 
 export default {
   name: 'VsfPaymentProvider',
@@ -53,22 +54,24 @@ export default {
     SfButton,
     SfRadio
   },
-  setup () {
+  setup (_, { emit }) {
     const { status } = usePaymentProviderMock();
     const selectedPaymentMethod = ref({});
-    const paymentMethods = ref([
-      {
-        id: 'mocked-id',
-        name: 'Cash on delivery',
-        description: ''
-      }
-    ]);
+    const { $vendure } = useVSFContext();
+    const paymentMethods = ref([]);
 
-    const selectPaymentMethod = paymentMethod => {
+    const selectPaymentMethod = async (paymentMethod) => {
       selectedPaymentMethod.value = paymentMethod;
+      emit('paymentMethodSelected', paymentMethod);
       status.value = true;
     };
 
+    onMounted(async () => {
+      const response = await $vendure.api.getPaymentMethods();
+
+      paymentMethods.value = response?.data?.eligiblePaymentMethods;
+    });
+
     return {
       paymentMethods,
       selectedPaymentMethod,
diff --git a/packages/theme/pages/Checkout/Payment.vue b/packages/theme/pages/Checkout/Payment.vue
index 4dd9816a..b45dbd20 100644
--- a/packages/theme/pages/Checkout/Payment.vue
+++ b/packages/theme/pages/Checkout/Payment.vue
@@ -63,7 +63,7 @@
           class="sf-property--full-width sf-property--large summary__property-total"
         />
 
-        <VsfPaymentProvider @status="isPaymentReady = true"/>
+        <VsfPaymentProvider @paymentMethodSelected="updatePaymentMethod"/>
 
         <SfCheckbox v-e2e="'terms'" v-model="terms" name="terms" class="summary__terms">
           <template #label>
@@ -83,7 +83,7 @@
           </SfButton>
           <SfButton
             v-e2e="'make-an-order'"
-            :disabled="loading || !isPaymentReady || !terms"
+            :disabled="!paymentMethod || !terms"
             class="summary__action-button"
             @click="processOrder"
           >
@@ -111,7 +111,8 @@ import {
 } from '@storefront-ui/vue';
 import { onSSR } from '@vue-storefront/core';
 import { ref, computed } from '@vue/composition-api';
-import { useMakeOrder, useCart, cartGetters, orderGetters } from '@vue-storefront/vendure';
+import { useMakeOrder, useCart, cartGetters } from '@vue-storefront/vendure';
+import { useVSFContext } from '@vue-storefront/core';
 
 export default {
   name: 'ReviewOrder',
@@ -131,31 +132,45 @@ export default {
   },
   setup(props, context) {
     const { cart, load, setCart } = useCart();
-    const { order, make, loading } = useMakeOrder();
+    const { $vendure } = useVSFContext();
+    const { loading } = useMakeOrder();
 
-    const isPaymentReady = ref(false);
     const terms = ref(false);
+    const paymentMethod = ref(null);
 
     onSSR(async () => {
       await load();
     });
 
+    const updatePaymentMethod = method => {
+      paymentMethod.value = method;
+    }
+
     const processOrder = async () => {
-      await make();
-      const thankYouPath = { name: 'thank-you', query: { order: orderGetters.getId(order.value) }};
+      const response = await $vendure.api.setPaymentMethod({
+        method: paymentMethod?.value?.code,
+        metadata: {
+          // Here goes metadata from the payment provider. For security reasons it should be handled on the server!
+        }
+      })
+
+      const orderId = response?.data?.addPaymentToOrder?.id;
+
+      const thankYouPath = { name: 'thank-you', query: { order: orderId }};
       context.root.$router.push(context.root.localePath(thankYouPath));
       setCart(null);
     };
 
     return {
-      isPaymentReady,
       terms,
       loading,
       products: computed(() => cartGetters.getItems(cart.value)),
       totals: computed(() => cartGetters.getTotals(cart.value)),
       tableHeaders: ['Description', 'Quantity', 'Amount'],
       cartGetters,
-      processOrder
+      processOrder,
+      updatePaymentMethod,
+      paymentMethod
     };
   }
 };
diff --git a/packages/theme/pages/Checkout/Shipping.vue b/packages/theme/pages/Checkout/Shipping.vue
index f5062134..d390d19a 100644
--- a/packages/theme/pages/Checkout/Shipping.vue
+++ b/packages/theme/pages/Checkout/Shipping.vue
@@ -263,7 +263,6 @@ export default {
 
     const displayBillingButton = async () => {
       shouldDisplayButton.value = true;
-      emit('shippingMethodSelected');
     };
 
     onSSR(async () => {
diff --git a/packages/theme/pages/Checkout/ThankYou.vue b/packages/theme/pages/Checkout/ThankYou.vue
new file mode 100644
index 00000000..aa2fb94e
--- /dev/null
+++ b/packages/theme/pages/Checkout/ThankYou.vue
@@ -0,0 +1,262 @@
+<template>
+  <div id="thank-you">
+    <SfCallToAction
+      v-e2e="'thank-you-banner'"
+      class="banner"
+      title="Thank you for your order!"
+      :image="{
+        mobile: '/thankyou/bannerM.png',
+        desktop: '/thankyou/bannerD.png',
+      }"
+    >
+      <template #description>
+        <div class="banner__order-number">
+          <span>{{ $t('Order No.') }}</span>
+          <strong>{{ order.number }}</strong>
+        </div>
+      </template>
+    </SfCallToAction>
+    <section class="section">
+      <div class="order">
+        <SfHeading
+          title="Your Purchase"
+          class="order__heading heading sf-heading--left"
+          :level="3"
+        />
+        <p class="order__paragraph paragraph">
+          {{ $t('Successful placed order') }}
+        </p>
+        <div class="order__contact">
+          <SfHeading
+            :level="6"
+            class="heading sf-heading--left sf-heading--no-underline"
+            title="Primary contacts for any questions"
+          />
+          <div class="contact">
+            <p class="contact__name">{{ address.name }}</p>
+            <p class="contact__street">{{ address.street }}</p>
+            <p class="contact__city">{{ address.city }}</p>
+            <p class="contact__email">{{ address.email }}</p>
+          </div>
+        </div>
+        <SfButton class="order__notifications-button button-size"
+          >{{ $t('Allow order notifications') }}</SfButton
+        >
+      </div>
+      <div class="additional-info">
+        <div>
+          <SfHeading
+            title="Your Account"
+            class="heading sf-heading--left"
+            :level="3"
+          />
+          <p class="paragraph">
+            {{ $t('Info after order') }}
+          </p>
+        </div>
+        <div>
+          <SfHeading
+            title="What can we improve"
+            class="heading sf-heading--left"
+            :level="3"
+          />
+          <p class="paragraph">
+            {{ $t('Feedback') }}
+          </p>
+          <SfButton
+            class="feedback-button color-secondary sf-button--full-width button-size"
+            >{{ $t('Send my feedback') }}</SfButton
+          >
+        </div>
+      </div>
+    </section>
+    <SfButton link="/" class="sf-button back-button color-secondary button-size">{{ $t('Back to homepage') }}</SfButton>
+  </div>
+</template>
+
+<script>
+import { SfHeading, SfButton, SfCallToAction } from '@storefront-ui/vue';
+export default {
+  components: {
+    SfHeading,
+    SfButton,
+    SfCallToAction
+  },
+  name: 'ThankYou',
+  setup(props, context) {
+    return {
+      address: {
+        name: 'Company Headquarter',
+        street: 'St. Main 17, 53-534',
+        city: 'Wroclaw, Poland',
+        email: 'demo@vuestorefront.io'
+      },
+      order: {
+        number: `#${context.root.$route.query.order}`
+      }
+    };
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+#thank-you {
+  box-sizing: border-box;
+  @include for-desktop {
+    max-width: 1240px;
+    padding: 0;
+    margin: 0 auto;
+  }
+}
+.heading {
+  --heading-padding: var(--spacer-base) 0;
+  @include for-desktop {
+    --heading-padding: var(--spacer-sm) 0 var(--spacer-xs) 0;
+  }
+}
+.paragraph {
+  margin: 0;
+  color: var(--c-link);
+  font: var(--font-weight--normal) var(--font-size--base) / 1.6
+    var(--font-family--primary);
+  @include for-desktop {
+    font-weight: var(--font-weight--light);
+    font-size: var(--font-size--sm);
+    margin-bottom: var(--spacer-lg);
+  }
+}
+.banner {
+  --call-to-action-color: var(--c-text);
+  --call-to-action-title-font-size: var(--h2-font-size);
+  --call-to-action-title-font-weight: var(--font-weight--semibold);
+  --call-to-action-text-container-width: 50%;
+  @include for-desktop {
+    margin: 0 0 var(--spacer-2xl) 0;
+  }
+  &__order-number {
+    display: flex;
+    flex-direction: column;
+    font: var(--font-weight--light) var(--font-size--sm) / 1.4
+      var(--font-family--primary);
+    @include for-desktop {
+      flex-direction: row;
+      font-size: var(--font-size--normal);
+    }
+  }
+}
+.section {
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  @include for-desktop {
+    flex-direction: row;
+    padding: 0;
+    background: var(--c-light);
+  }
+}
+.order {
+  background: var(--c-light);
+  padding-bottom: var(--spacer-sm);
+  @include for-desktop {
+    width: 100%;
+    padding: var(--spacer-xl) var(--spacer-xl) var(--spacer-2xl)
+      var(--spacer-2xl);
+  }
+  &__heading {
+    --heading-title-font-weight: var(--font-weight--bold);
+    @include for-desktop {
+      --heading-title-color: var(--c-link);
+      --heading-title-font-weight: var(--font-weight--swemibold);
+    }
+  }
+  &__heading,
+  &__paragraph,
+  &__contact {
+    @include for-mobile {
+      margin: 0;
+      padding-left: var(--spacer-sm);
+      padding-right: var(--spacer-sm);
+    }
+  }
+  &__contact {
+    padding-bottom: var(--spacer-base);
+    --heading-title-font-size: var(--font-size--lg);
+    --heading-title-font-weight: var(--font-weight--medium);
+    @include for-desktop {
+      --heading-title-font-size: var(--font-size--base);
+      --heading-title-font-weight: var(--font-weight--normal);
+      padding: 0 var(--spacer-sm);
+      border: 2px solid var(--c-white);
+      border-width: 2px 0 2px 0;
+    }
+  }
+  &__notifications-button {
+    --button-width: calc(100% - var(--spacer-lg));
+    margin: 0 auto;
+    @include for-desktop {
+      margin: var(--spacer-xl) 0 0 0;
+    }
+  }
+}
+.contact {
+  color: var(--c-dark-variant);
+  font: var(--font-weight--light) var(--font-size--base) / 1.6
+    var(--font-family--secondary);
+  @include for-desktop {
+    font-weight: var(--font-weight--normal);
+    font-size: var(--font-size--sm);
+  }
+  &__name,
+  &__street,
+  &__city {
+    margin: 0;
+  }
+  &__email {
+    margin: var(--spacer-sm) 0 0 0;
+    @include for-desktop {
+      margin-bottom: var(--spacer-sm);
+    }
+  }
+  &__name,
+  &__street,
+  &__city,
+  &__email {
+    font-size: var(--font-size--sm);
+  }
+}
+.additional-info {
+  --heading-title-font-weight: var(--font-weight--bold);
+  padding: 0 var(--spacer-sm);
+  @include for-desktop {
+    --heading-title-color: var(--c-link);
+    --heading-title-font-weight: var(--font-weight--semibold);
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: var(--spacer-xl) var(--spacer-xl) var(--spacer-2xl)
+      var(--spacer-2xl);
+  }
+}
+.feedback-button {
+  margin: var(--spacer-xl) 0 var(--spacer-sm) 0;
+  @include for-desktop {
+    margin: var(--spacer-base) 0 0 0;
+  }
+}
+.back-button {
+  --button-width: calc(100% - var(--spacer-lg));
+  margin: 0 auto var(--spacer-sm) auto;
+  @include for-desktop {
+    margin: var(--spacer-xl) auto;
+    &:hover {
+      color: var(--c-white);
+    }
+  }
+}
+.button-size {
+  @include for-desktop {
+    --button-width: 25rem;
+  }
+}
+</style>