@onramper/moonpay-adapter

Usage

It works like a fetch mock:

import processMoonpayStep, { moonpayUrlRegex } from '@onramper/moonpay-adapter'

const method = step.type === 'file' ? 'PUT' : 'POST'
const body = step.type === 'file' ? data as File : JSON.stringify(data)

const nextStepType = step.url.split('/')[5]
let nextStep: FetchResponse;
if (isMoonpayStep(step.url) && nextStepType !== "iframe") {
    nextStep = await processMoonpayStep(step.url, { method, headers, body });
} else {
    nextStep = await fetch(step.url, { method, headers, body })
}
return processResponse(nextStep)

Note

Due to Moonpay's cookie policy all operations must be performed from the same origin, meaning that the sandbox that handles credit card payments requires a special workaround that doesn't fit our API response model. Namely, the response from the sandbox must be further processed by client-side code before the next step is provided, so the following code is needed:

import { finishCCTransaction, baseCreditCardSandboxUrl } from '@onramper/moonpay-adapter'

const receiveMessage = async (event: MessageEvent) => {
  if (event.origin !== baseCreditCardSandboxUrl)
    return;
  if (event.data.type) {
    replaceScreen(event.data)
  } else if (event.data.transactionId) {
    const returnedNextStep = await finishCCTransaction(event.data.transactionId, event.data.ccTokenId);
    replaceScreen(returnedNextStep)
  } else {
    setError('Unknown error. Please, contact [e-mail] and provide the following info: ' + nextStep.url)
  }
}
window.addEventListener("message", receiveMessage);