Set up iFrame

what you will learn ✅ how to set up an iframe to integrate with p2c as a cross river merchant partner, suppose you prefer not to hold the {{personally identifiable information}} (pii) of your customers this could include, for example, customer debit card numbers and security details iframes offer a solution to pii problem the cross river iframe gives you a simple interface to capture debit card details you can easily add an iframe to your website your customer's card details pass through directly to cross river they are not stored on your servers this tutorial assumes you have a knowledge of apis and how they work refer to the structure for more details the tutorial uses these api endpoints api description generate an iframe otc signup card add an iframe into your site before you begin make sure you have quickstart contacted the integration team mailto\ integrations support\@crossriver com to register the domains where you'll be embedding the iframe card payments to receive the webhooks available for p2c these webhooks report relevant events back to your system in real time this keeps you up to date on each transaction the tutorial uses this webhook webhook description cardauthorized reports when a card authorization attempt is completed shows you the status of the card no webhook received were you able to sign up for a card but didn’t get a webhook? the webhook function call might not be returning a 200 (“success”) message to cross river set up your iframe authenticate into the cross river system this returns a token to you use the token to call post api/iframeconfiguration/buildsignupcardurl the endpoint will return a response containing a unique url that url is valid for 5 minutes pass the url into the src attribute of the iframe attributes for building the iframe attribute description requestid string the guid that enables the application to link request with response customerreferencenumber string a 4 digit code, assigned by the merchant, to identify the cardholder domain string the name of a valid top level internet domain where consumers will use the iframe for example, myfintech com this domain must appear in the cross river allowlist successcontinuenavigationpoint string the landing page you are directed to if the sign up was successful failurecontinuenavigationpoint string the landing page you are directed if the sign up wasn't succeessful firstname string cardholder's first name lastname string cardholder's last name address1 string primary location details of cardholder for instance, street name, house or building number, and po box maximum 255 characters address2 string secondary location details of cardholder for instance, number of apartment or floor maximum 255 characters city string city full name state string 2 letter code of the cardholder's state countrycode string 2 letter country code (2 letters) zipcode string zip code email string a valid cardholder email address, for example, me\@mailprovider com phonenumber string phone number, no dashes required showoptionalfields boolean true if optional fields will appear in the iframe, otherwise false sample request { "requestid" "89clha9s 27ci 90ck 7jcs 8lksic02cjag", "customerreferencenumber" "string", "domain" "string", "successcontinuenavigationpoint" "string", "failurecontinuenavigationpoint" "string", "firstname" "joseph", "lastname" "roll", "address1" "123 main street", "address2" "string", "city" "venice", "state" "ca", "countrycode" "string", "zipcode" "66666", "email" "{email}", "phonenumber" "string", "showoptionalfields" true } response attributes result string result of whether or not the source url was added to our server success or fail issuccessful boolean true if a unique url was built successfully, otherwise false sample response { "version" "1 0 0 0", "result" "success", "issuccessfull" true }