How to Integrate the Credit Card Form?

The credit card from can be added to your page via the following iframe tag

<iframe src="https://api.raisenow.com/epayment/api/step/select-card/merchant/1234567890"></iframe>

Whereas 1234567890 is the API key of the merchant. You can also set width and height of the iframe and provide some other styling to improve the user experience.

It is also possible to apply own styles to the credt card form. Add the query parameter css_url to the URL. The assigned value of the parameter css_url has to be an absolute URL.

<iframe src="https://api.raisenow.com/epayment/api/step/select-card/merchant/1234567890?css_url=https://mydomain.com/mystyles.css"></iframe>

The css will be fetched by via proxy. That means you don’t have to worry about providing your styles over https.

The donate button can be made hidden by adding the query parameter submit_button_visibility with the value false to the credit card URL

https://api.raisenow.com/epayment/api/step/select-card/merchant/1234567890?submit_button_visibility=false

The credit card form can be initiated via HTTP GET or POST. If you would like to integrate the credit card form in the existing checkout form, GET is the preferred HTTP method.

As mentioned above via Javascript’s postMessage we are able to interact with the credit card form.

Because we are not allowed the handle the credit card data we have to create a token from the credit card fields. This token can be submitted to our API without worrying about exposing sensitive data on the own website.

The following actions can be triggerd

• rnw-creditcardform.create-token

• rnw-creditcardform.validate-form

The following responses can be received

• rnw-creditcardform.token-received

• rnw-creditcardform.data-changed

• rnw-creditcardform.form-not-valid

• rnw-creditcardform.create-token-error

• rnw-creditcardform.form-valid

The message in the postMessage is a json string defined as an object containing a topic string and a data object.

The following example shows the event object for rnw-creditcardform.create-token and how to send the message to the iframe.

event = {
    topic: 'rnw-creditcardform.create-token',
    data: {
        apiKey: '1234567890'
    }
};
document.getElementByTagName('iframe')[0].contentWindow.postMessage(JSON.stringify(event), '*');

Response of the request above can be retrieved as followed:

function receiveMessage(event) {
    if ( ! event.data || typeof event.data != 'string') {
        return;
    }

    var eventData = JSON.parse(event.data);
    var topic = eventData.topic || null;
    var data = eventData.data || {};

    if (topic == null) {
        return;
    }
        
    switch(topic) {
        case "rnw-creditcardform.token-received":
            //Two parameters are available: token and payment method
            console.log(data.paymentMethod);
            console.log(data.token);
            /*
               Add data.paymentMethod as input field 
            payment_method to your form and the token as 
            card_token to your form
            */
            break;
        case  "rnw-creditcardform.data-changed":
            //values of the credit card form have changed.
            console.log(data);
            console.log(data.paymentMethod)
            //if payment method is already defined it will be set
            break;
        case "rnw-creditcardform.form-not-valid":
            console.log("credit card form not valid");
            //data contains an array of input field names which are not valid.
            console.log(data);
            break;
        case "rnw-creditcardform.create-token-error":
            console.log("error while creating the token");
            break;
        case "rnw-creditcardform.form-valid":
            //Credit card form is valid. Go on and submit the form. 
            break;
    }
};
window.addEventListener("message", receiveMessage);

The received event object contains a property data which consists of a json string containing the topicand the corresponding data of the event. In the above example the events are handled within the switch statement. Values available in the event object are defined above.

We recommend to validate the form first and then create the credit card token and last submit your form with parameter payment_method(data.paymentMethod) and card_token (data.token) to our payment API.

Got it? Try it out yourself.