Vue 3

<script setup lang="ts">
import { WajubProvider } from '@wajub/vue';
</script>

<template>
  <WajubProvider>
    <slot />
  </WajubProvider>
</template>

<script setup lang="ts">
import { useWajubOptional } from '@wajub/vue';

const props = defineProps<{ sessionId: string }>();
const runtime = useWajubOptional();

function upgrade() {
  runtime.value?.wajub.open({ sessionId: props.sessionId, onSuccess: onUpgraded });
}
</script>

<template>
  <button :disabled="!runtime" @click="upgrade">Upgrade plan</button>
</template>

<script setup lang="ts">
import { CheckoutEmbed } from '@wajub/vue';

defineProps<{ sessionId: string }>();
</script>

<template>
  <CheckoutEmbed
    :session-id="sessionId"
    layout="tabs"
    :min-height="480"
    @success="navigateTo('/order/complete')"
    @error="(error) => console.error(error.code, error.message)"
  />
</template>

<script setup lang="ts">
import { shallowRef } from 'vue';
import type { ComponentInstance } from '@wajub/js';
import { AddressComponent, PaymentComponent, useConfirmPayment } from '@wajub/vue';

const props = defineProps<{ sessionId: string }>();
const { confirm, isConfirming } = useConfirmPayment(() => props.sessionId);
// shallowRef: the instance is the SDK's own object, never make it reactive.
const field = shallowRef<ComponentInstance | null>(null);

function pay() {
  if (field.value) confirm(field.value);
}
</script>

<template>
  <AddressComponent :session-id="sessionId" address-mode="shipping" />
  <PaymentComponent
    :session-id="sessionId"
    collect-address="shipping"
    collect-name
    @instance="(instance) => (field = instance)"
  />
  <button :disabled="isConfirming || !field" @click="pay">
    {{ isConfirming ? 'Processing…' : 'Pay now' }}
  </button>
</template>

<script setup lang="ts">
import { computed, ref, shallowRef } from 'vue';
import {
  CardComponent,
  MobileMoneyComponent,
  useConfirmPayment,
  type ComponentInstance,
  type ComponentStateChangeEvent,
} from '@wajub/vue';

const props = defineProps<{
  sessionId: string; // the prepared payment's authorization_token, from your server
  hostedUrl: string; // its authorization_url, for the fallback
}>();

// The payment is under way, or waits on the payer: nothing on the page may change.
const RUNNING = [
  'PROCESSING', 'VERIFYING', 'PENDING', 'OTP_REQUIRED', 'PIN_REQUIRED', 'PHONE_REQUIRED',
  'BIRTHDAY_REQUIRED', 'ADDRESS_REQUIRED', '3DS_REQUIRED', 'USSD_REQUIRED', 'APPROVAL_REQUIRED',
];

const method = ref<'mobileMoney' | 'card'>('mobileMoney');
const component = shallowRef<ComponentInstance | null>(null);
const complete = ref(false);
const step = ref('INITIATED');
const fallback = ref(false);
const { confirm, isConfirming } = useConfirmPayment(() => props.sessionId);
const locked = computed(() => isConfirming.value || RUNNING.includes(step.value));

// Your server checks the cart, places the order and activates the payment.
async function placeOrder() {
  const response = await fetch('/checkout/place-order', { method: 'POST' });
  return response.ok; // false: nothing is charged
}

function onInstance(instance: ComponentInstance | null) {
  component.value = instance;
  complete.value = false;
}

function onStateChange(event: ComponentStateChangeEvent) {
  step.value = event.state;
}

function onLoadError(error: { code?: unknown }) {
  if (error.code === 'ready_timeout') fallback.value = true;
}

async function pay() {
  if (fallback.value) {
    // A prepared payment is charged only once activated: place the order first.
    if (await placeOrder()) window.location.assign(props.hostedUrl);
    return;
  }
  if (!component.value) return;
  try {
    await confirm(component.value);
    window.location.assign('/thanks');
  } catch {
    // The form shows the reason, and the payer can try again in it.
  }
}
</script>

<template>
  <fieldset :disabled="locked">
    <label><input v-model="method" type="radio" value="mobileMoney" /> Mobile Money</label>
    <label><input v-model="method" type="radio" value="card" /> Card</label>
  </fieldset>

  <!-- loader="skeleton" is the default: the box keeps its height while the form loads. -->
  <p v-if="fallback">You will finish on Wajub's secure payment page.</p>
  <component
    :is="method === 'card' ? CardComponent : MobileMoneyComponent"
    v-else
    :session-id="sessionId"
    variant="fields"
    :appearance="{ inherit: true }"
    :ready-timeout="10000"
    :fields="method === 'card'
      ? { customer: 'external' }
      : { customer: 'external', country: 'CM', operator: 'detect' }"
    :on-before-submit="placeOrder"
    @instance="onInstance"
    @change="(event) => (complete = Boolean(event.complete))"
    @state-change="onStateChange"
    @load-error="onLoadError"
  />

  <p v-if="step === 'APPROVAL_REQUIRED'" role="status">Approve the payment on your phone.</p>
  <button type="button" :disabled="locked || (!fallback && !complete)" @click="pay">Pay</button>
</template>

import { Wajub } from '@wajub/node';

const wajub = new Wajub({ secretKey: process.env.WAJUB_API_KEY! });

export default defineEventHandler(async (event) => {
  const { cartId } = await readBody(event);

  const payment = await wajub.payments.create(
    {
      amount: 25000,
      currency: 'XAF',
      description: `Cart ${cartId}`,
      customer: { email: 'buyer@example.com' },
      callback: `${process.env.NUXT_PUBLIC_APP_URL}/order/return`,
      metadata: { cart_id: cartId },
    },
    { idempotencyKey: `cart-${cartId}` },
  );

  return { sessionId: payment.authorization_token };
});