OrderForm.jsx
import React, { useEffect, useState } from 'react'; | |
import PropTypes from 'prop-types'; | |
import { useDispatch } from 'react-redux'; | |
import get from 'lodash/get'; | |
import { createOrderRequest } from '../store/ducks/orders'; | |
import { camelCaseKeys } from '../helpers/transform-object-keys'; | |
import { getRoute } from '../helpers/routes'; | |
const FORM_ID = 'payment-form'; | |
export default function OrderForm({ productId, productType, albumId }) { | |
const [order, setOrder] = useState(); | |
const preferenceId = get(order, 'externalId'); | |
const dispatch = useDispatch(); | |
useEffect(() => { | |
dispatch(createOrderRequest({ productId, productType, albumId })).then( | |
response => { | |
if (!response.error) { | |
setOrder(camelCaseKeys(response.payload)); | |
} | |
} | |
); | |
}, [productId, productType, albumId, dispatch]); | |
useEffect(() => { | |
if (preferenceId) { | |
const script = document.createElement('script'); | |
script.type = 'text/javascript'; | |
script.src = | |
'https://www.mercadopago.cl/integrations/v1/web-payment-checkout.js'; | |
script.setAttribute('data-preference-id', preferenceId); | |
const form = document.getElementById(FORM_ID); | |
form.appendChild(script); | |
} | |
}, [preferenceId]); | |
return ( | |
<form | |
id={FORM_ID} | |
method="GET" | |
action={getRoute('order', { id: get(order, 'id') })} | |
/> | |
); | |
} | |
OrderForm.propTypes = { | |
productType: PropTypes.string.isRequired, | |
productId: PropTypes.number.isRequired, | |
albumId: PropTypes.number.isRequired | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment