{"type":"doc","content":[{"type":"layoutSection","marks":[{"type":"breakout","attrs":{"mode":"wide"}}],"content":[{"type":"layoutColumn","attrs":{"width":66.66},"content":[{"type":"paragraph","content":[{"text":"To process ","type":"text"},{"text":"Credit Card","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/IN/pages/177340442"}}]},{"text":" requests, three files must be included in the header section of your payment page. When the submit button is clicked, the three script files automatically trigger a Blink API to tokenize the hosted card fields and generate a ","type":"text"},{"text":"payment token","type":"text","marks":[{"type":"strong"}]},{"text":". This generated ","type":"text"},{"text":"payment token","type":"text","marks":[{"type":"strong"}]},{"text":" is automatically inserted into the payment form, then the whole form with the payment token is submitted. ","type":"text"}]},{"type":"paragraph","content":[{"text":"In a PHP implementation, your payment page may look like this:","type":"text"}]},{"type":"codeBlock","content":[{"text":"\n ...\n \n \n \n ...\n\n\n\n \n","type":"text"}]}]},{"type":"layoutColumn","attrs":{"width":33.33},"content":[{"type":"paragraph","content":[{"text":"JQuery","type":"text","marks":[{"type":"link","attrs":{"href":"#jquery"}}]},{"type":"hardBreak"},{"text":"Hostedfields.js","type":"text","marks":[{"type":"link","attrs":{"href":"#hostedfields-js"}}]},{"type":"hardBreak"},{"text":"Custom JS","type":"text","marks":[{"type":"link","attrs":{"href":"#custom-js"}}]}]}]}]},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"anchor","parameters":{"macroParams":{"":{"value":"jquery"}},"macroMetadata":{"macroId":{"value":"8d4818f87de6a1bce0c1d322a1d3d289"},"schemaVersion":{"value":"1"},"title":"Anchor"}},"localId":"478e167a-b31a-4631-89f3-0f1e41a4c358"}},{"type":"hardBreak"},{"text":"JQuery","type":"text"}]},{"type":"layoutSection","content":[{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"paragraph","content":[{"text":"The hosted fields requires JQuery. The gateway supports versions 1.8 to 3.6. In this example version 3.6.3 is used:","type":"text"}]}]},{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"codeBlock","content":[{"text":"","type":"text"}]}]}]},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"anchor","parameters":{"macroParams":{"":{"value":"hostedfields-js"}},"macroMetadata":{"macroId":{"value":"01f7957bedb63573ab25cc73e6282f91"},"schemaVersion":{"value":"1"},"title":"Anchor"}},"localId":"8fd94790-fe6b-4afb-a1b3-0cabc1d2c79d"}},{"type":"hardBreak"},{"text":"Hostedfields.js","type":"text"}]},{"type":"layoutSection","content":[{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"paragraph","content":[{"text":"To initialise hosted fields instance, include this JavaScript in your payment page. This script file should always be loaded directly from the Blink Gateway. ","type":"text"}]}]},{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"codeBlock","content":[{"text":"","type":"text"}]}]}]},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"anchor","parameters":{"macroParams":{"":{"value":"custom-js"}},"macroMetadata":{"macroId":{"value":"5cf9832c950439f4eb7f1fd6b62c903a"},"schemaVersion":{"value":"1"},"title":"Anchor"}},"localId":"ea819624-c19e-42e9-baea-127ca005950b"}},{"type":"hardBreak"},{"text":"Custom JS","type":"text"}]},{"type":"layoutSection","content":[{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"paragraph","content":[{"text":"The custom.js script is required to automatically setup the hosted form, by automatically appending the ","type":"text"},{"text":"paymentToken","type":"text","marks":[{"type":"code"}]},{"text":" value to the payment form on form submission.","type":"text"}]},{"type":"paragraph","content":[{"text":"Note:","type":"text","marks":[{"type":"strong"}]},{"text":" an ","type":"text"},{"text":"id","type":"text","marks":[{"type":"code"}]},{"text":" value is required in the ","type":"text"},{"text":"form","type":"text","marks":[{"type":"code"}]},{"text":" element on your payment page by the custom.js and hostedfields.js.","type":"text"}]}]},{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"codeBlock","content":[{"text":"","type":"text"}]}]}]},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Form Element","type":"text"}]},{"type":"layoutSection","content":[{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"paragraph","content":[{"text":"This is a simple form element. The action attribute points to the location of the code on your server that will execute when then form is submitted.","type":"text"}]},{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"id","type":"text","marks":[{"type":"code"}]},{"text":" value is required in the ","type":"text"},{"text":"form","type":"text","marks":[{"type":"code"}]},{"text":".","type":"text"}]}]},{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"codeBlock","content":[{"text":"","type":"text"}]}]}]},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"CSRF Token","type":"text"}]},{"type":"paragraph"},{"type":"layoutSection","content":[{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"paragraph","content":[{"text":"Cross-site request forgeries token, used in PHP to prevent execution on behalf of an authenticated user. ","type":"text"}]}]},{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"codeBlock","content":[{"text":"@csrf","type":"text"}]}]}]},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Elements","type":"text"}]},{"type":"layoutSection","content":[{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"paragraph","content":[{"text":"These are the elements that were fetched from the ","type":"text"},{"text":"Intents","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/IN/pages/173375502"}}]},{"text":" resource.","type":"text"}]}]},{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"codeBlock","content":[{"text":"{!! $element !!}","type":"text"}]}]}]},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Merchant Data Element","type":"text"}]},{"type":"layoutSection","content":[{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"paragraph","content":[{"text":"This is an optional element, which is hidden. It can be used to send important order or customer details that should be linked to the transaction. The value should be json string with double quotes delimited by backslashes.","type":"text"}]}]},{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"codeBlock","content":[{"text":"","type":"text"}]}]}]},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Submit","type":"text"}]},{"type":"layoutSection","content":[{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"paragraph","content":[{"text":"This is a standard submit button. ","type":"text"}]}]},{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"codeBlock","content":[{"text":"","type":"text"}]}]}]},{"type":"rule"},{"type":"paragraph"}],"version":1}

Browser not supported