Card Capture

Add the sdk to the page

<script type="javascript" src="./node_modules/@wpay/frames-sdk/dist/framesSDK.js" />

Add a script tag to the page, initialise the SDK and log into the payment platform.

<script>
    const sdk = new FRAMES.FramesSDK({
        apiKey: 'YOUR_API_KEY', 
        authToken: 'YOUR_AUTH_TOKEN' // Format: Bearer token_value, 
        apiBase: "TEST_API_HOST_LOCATION", 
        logLevel: FRAMES.LogLevel.DEBUG
    });
</script>

Start a new card capture action

The action will handle all interactions with your elements, including their creation, validation and submission.

let action = sdk.createFramesControl(FRAMES.ActionTypes.CaptureCard);
action.start();

This will initialise a new card capture action. This call will need to be repeated between subsequent card captures.

Add the credit card capture frames to the page.

The SDK attaches new elements to div placeholders within your page using the element id.

Add an element to your page.

<div id="cardElement"></div>

After adding your placeholder you can now create your frames element. When creating an element pass in the type of the element you would like to create and the id of the dom element that you would like to attach it to.

action.createFramesControl('CardGroup', 'cardElement');

Loading the page should now display the credit card capture element, displaying card, expiry date and CVV.

Submitting the page

Once the user has entered their credit card details, you are going to want to save the details. To do this, add a Submit button to the page, calling the submit function on the action. This will run the card validation, submitting the form if succcessful.

<button onClick="async function() { await action.submit()}">Submit</button>

Once successfully submitted an action needs to be completed. Do so by calling complete.

let captureResult = await action.complete();

If you would like to clear the element(s), you can also call the clear function on the action.

<button onClick="async function() { await action.clear()}">Clear</button>