The next step is to create a parent component to host our CreditCardForm component.  Here is what we need to do:

1. Inject our CreditCardForm component with the Stripe API code. This is done using the injectStripe()method.
2. Provide our Stripe API key to our component. This is done using the StripeProvider React component, which is provided by Stripe.
3. Host the CreditCardForm component inside our parent component. This is done using the Elements component.

This will make much more sense when we see the code:

export default function CreditCardInformation(props){
    if (!props.show) {
        return <div/>;
    }
   //inject our CreditCardForm component with stripe code in order to be able to make use of the createToken() method
    const CCFormWithStripe = injectStripe(CreditCardForm);
    return (
        <div>
            {/*stripe provider*/}
            <StripeProvider apiKey="pk_test_LwL4RUtinpP3PXzYirX2jNfR">
                <Elements>
                    {/*embed our credit card form*/}
                    <CCFormWithStripe operation={props.operation} />
                </Elements>
            </StripeProvider>
        </div>
    );
}

The preceding code should exist in our CreditCards.js file, which also contained our CreditCardForm component code. We also passed the operation as a prop, which we then later used when we submitted the credit card request to our backend. Also notice export default at the beginning of our CreditCardInformation component definition. This is because we will be importing and using this component in other files. 

Now that we've followed all the steps to write a credit card form that can integrate with Stripe, it's time to go back to our buy modal window to embed the credit card form in it. Our buy modal window existed in the modalwindows.js file. As a reminder, here is the code that we covered earlier for the buy modal window:

export function BuyModalWindow(props) {
    return (
        <Modal id="buy" tabIndex="-1" role="dialog" isOpen={props.showModal} toggle={props.toggle}>
            <div role="document">
                    <ModalHeader toggle={props.toggle} className="bg-success text-white">
                        Buy Item
                    </ModalHeader>
                    <ModalBody>
                            {/*Credit card form*/}
                    </ModalBody>
                </div>
                      
        </Modal>
    );
} 

First we need to import the CreditCardInformation component to our modalwindows.js. So, we need to add this line to the file:

import CreditCardInformation from './CreditCards';

All that we need to do now is to embed our CreditCardInformation component in the modal body:

export function BuyModalWindow(props) {
    return (
        <Modal id="buy" tabIndex="-1" role="dialog" isOpen={props.showModal} toggle={props.toggle}>
            <div role="document">
                    <ModalHeader toggle={props.toggle} className="bg-success text-white">
                        Buy Item
                    </ModalHeader>
                    <ModalBody>
                      <CreditCardInformation show={true} operation="Charge" toggle={props.toggle} />
                    </ModalBody>
                </div>
                      
        </Modal>
    );
} 

And with that, we are done with the Buy modal window. Now let's move to the Sign in window.