Skip to content

Instantly share code, notes, and snippets.

@muZk

muZk/OrderForm.jsx Secret

Created Oct 1, 2020
Embed
What would you like to do?
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