Inline reference
This reference is here to help you find those hard-to-find bits of information all in one place to make your life easy.
Configuration options
Here's a complete list of Inline configuration options.
| Parameter | Description |
|---|---|
amountInCents integer | Amount you would like to charge the customer as part of this payment. This is a required field for creating a charge and the amount can not be increased once a token is created. |
currency string | An ISO 4217 currency code. We currently only support ZAR. |
options.description string | The description of the payment you’re creating. This will be shown to your customer on their card or bank statement when possible. |
options.metadata json | A map of key value pairs that allow you to store extra data related to this payment. We will save the data alongside the payment. Whenever you fetch the payment with our API, we’ll also include the metadata. You can use up to approximately 1kB. |
customer.email string | The email address of the end customer that you are billing. |
customer.phone string | The phone number of the end customer you are billing. |
customer.namestring | The name of the card holder you are billing. |
showErrors boolean | If you would like us to show error messages for you so that you do not have to handle this yourself. Defaults to false |
showErrors boolean | If you would like Inline to show error messages for you so that you do not have to handle this yourself. Defaults to false |
showSubmitButton boolean | If you would like Inline to create a submit button for you that will submit the form. When you do this you will have to listen for the card_tokenized event. Defaults to false |
submitButtonText string | If you have chosen to let Inline create a submit button on your behalf this method tells inline what text you want to put into the submit button. Defaults to "Pay" |
Events
Once you have created an instance of the Inline SDK you can listen for a number of events on the SDK by invoking inline.on(eventName, callback), eg:
inline.on('ready', function (event) {
// Code to handle the event goes here
})
| Event name | Javascript Constant | Details |
|---|---|---|
ready | YocoSDK.Events.READY | Triggered when the inline payment form has been loaded onto your page and the user can interact with it. |
change | YocoSDK.Events.CHANGE | The status of one of our fields has changed. |
validity_change | YocoSDK.Events.VALIDITY_CHANGE | The validity of our inline form has changed. |
card_tokenized | YocoSDK.Events.CARD_TOKENIZED | You can listen for successful tokenization events |
Actions
| Signature | Description | Returns |
|---|---|---|
mount(elementId) | The inline.mount method attaches the inline form to the DOM. inline.mount accepts either a CSS Selector (e.g., '#inline-form') or a DOM element.Example: inline.mount('#inline-element'); | undefined |
createToken() | Submits the card form if all form values are valid. Example: inline.createToken().then(function(){}) | Promise |