Mypay.js Javascript Library

Mypay JavaScript implementation removes compliance responsibilities, allows you to fully customize the end-user experience, and unlocks the power of Mypay API without having worries about PCI Compliance. This would require minimal development effort from your side. With Mypay.js javascript library you can collect sensitive information from the user and create representative Tokens for safely sending that data to your servers. All sensitive information is handled by Mypay. js, which is fully PCI Compliant.

To get started, include this script on your html page:

<script src="https://api.mypay.gr/Content/js/v1/mypay.js"></script>

There are 2 different scenarios available to use.

1^st Scenario: Checkout page will appear on your website using pop up:

In this scenario you have to add your Company, your Project, set up a payment method and create a checkout page on Mypay dashboard. Checkout pages are created automatically when you create a product, but you can create your own checkout page manually, as well. The second step will be to run the following script on your html page:

<script>
    Mypay.Checkout({
        publicCheckoutPageID: YOUR_CHECKOUT_PAGE_ID
    });
</script>

You can find your checkout page ID by visiting your check out page on Mypay dashboard.

Note that if you are planning to add paypal on you custom checkout form using javascript library you have to put the following tag on your html page:

<div id="YOUR_DIV_ID"></div>

After doing this step, you have to put the following script, as well:

<script>
    Mypay.Paypal({
        divID: 'YOUR_DIV_ID',
        publicCheckoutPageID: YOUR_CHECKOUT_PAGE_ID,
        productID: YOUR_PRODUCT_ID,
        productQuantity: YOUR_PRODUCT_QUANTITY,
        customerToken: 'YOUR_CUSTOMER_TOKEN',
        showOnlyPaymentUI: true
    });
</script>

The following parameters can be used in JavaScript function Mypay.Checkout:

Parameter name	Parameter description
long projectID	When provided, checkout will use your first checkout page or create one if none found
long invoiceID	When provided, checkout will prefill products, customer
long publicCheckoutPageID	The id of your checkout page
long productID	Specify a product by id
int productQuantity	Specify the product’s quantity
string currency	Specify a 3-letter currency code to display checkout amounts (e.g USD)
decimal? amount	When provided, a specific amount to charge the customer (a dummy product will be created)
string firstName	When provided, prefill customer info
string lastName	When provided, prefill customer info
string email	When provided, prefill customer info
string company	When provided, prefill customer info
string phone	When provided, prefill customer info
string billingAddress1	When provided, prefill customer info
string billingAddress2	When provided, prefill customer info
string billingCountry	When provided, prefill customer info
string billingState	When provided, prefill customer info
string billingCity	When provided, prefill customer info
string billingZip	When provided, prefill customer info
bool shippingSameAsBilling	When provided, prefill customer info
string shippingAddress1	When provided, prefill customer info
string shippingAddress2	When provided, prefill customer info
string shippingCountry	When provided, prefill customer info
string shippingState	When provided, prefill customer info
string shippingCity	When provided, prefill customer info
string shippingZip	When provided, prefill customer info
bool issueInvoice	When provided, we create and send an invoice to customer
bool capture	When provided, if false we just authorize the transaction, if true we both authorize-capture the transaction
long[] vendorID	When provided, we show products associated with these vendor IDs
bool hideHeaderFooter	When provided, we show/hide the checkout header/footer
string merchantUniqueID	When provided, we set this unique id to the transaction metadata
string customerToken	When provided, a specific customer is used*
bool collectCustomerInfo	When provided, customer details are required to be collected
bool hideCookieNotice	When provided we hide the accept cookies notice
string uniqueCustomerID	When provided, a specific customer is used
long businessID	When provided we assign a specific customer business to the transaction
decimal tax	When provided, we override the default project/product tax rate
string checkoutToken	When provided, we use data for checkout created previously via api/Checkout/CreateToken
bool showOnlyPaymentUI	When provided, we show only the main payment UI (credit card, paypal button etc.)
long paymentTypeID	When provided, we pre-select a payment type if it is available. List of available payment types: 1 Paypal 5 Sepa 12 ACH
long paymentMethodID	When provided, we pre-select a payment method

*You can find customer token by checking customer panel on Mypay dashboard or via API.

2nd Scenario: Checkout page will appear directly on your website using custom button and passes a Mypay token to a JavaScript callback:

Any merchant or service merchant provider who want to use this scenario has to be PCI – DSS compliant (SAQ A). To securely collect card details from your customers, you need to place the “data-mypay” tag to each of your fields containing customer and credit card details, as the example below:

<input type="email" data-mypay="email" placeholder="e-mail">
<input type="text" data-mypay="firstName" placeholder="first name">
<input type="text" data-mypay="lastName" placeholder="last name">
<input type="text" data-mypay="billingAddress" placeholder="billing address">
<input type="text" data-mypay="zip" placeholder="zip">
<input type="number" data-mypay="number" placeholder="number">
<input type="number" data-mypay="month" placeholder="month">
<input type="number" data-mypay="year" placeholder="year">
<input type="number" data-mypay="cvv" placeholder="cvv">

The following parameters can be used in order to create token:

Name	Required	Type	Description
subdomain		string	Your Mypay subdomain
amount		decimal	May be required when you are processing with 3D Secure (e.g: 25.55)
currency		string	May be required when you are processing with 3D Secure (e.g: USD)
email	X	string	Customer email
firstName	X	string	Customer first name
lastName	X	string	Customer last name
billingAddress	X	string	Customer billing address
zip	X	string	Customer billing zip
vatCountry		string	Customer vat country code (e.g: DE)
vatNumber		string	Customer vat number (e.g: 123456789)
number	X	string	Credit card number
month	X	int	Credit card expiration month
year	X	int	Credit card expiration year
cvv	X	int	Credit card CVV/CVC code
paymentMethodID		long?	When provided, we pre-select a payment method

The payment details collected using our library can then be converted into a token, using a handler function like this one:

<script>
    function createToken() {
        Mypay.SetPublicKey('YOUR_PUBLIC_KEY');

        Mypay.CreateToken().done(function (token) {
            console.log(token);
        }).fail(function (error) {
            console.log(error);
        });
    }
</script>

Go to Mypay dashboard -> Management console -> Security and copy the Public Key.

Paste the Public Key on the javascript. Sends billing information to Mypay to store as a token, sending that the credit card token back to you. Once Mypay.js has stored your customer’s sensitive data and given you a credit card token, you will have 30 minutes to use it in our API. Expired tokens are permanently removed from the Mypay servers. In case you want to process multiple charges manually (for example using usage based billing scenarios), you have to use a permanent token which is created the same time with the temporary token. There are 2 different ways to obtain a permanent token:

1. Go to https://api.mypay.gr/docs/index#!/Charge/Charge_Post and send request using the temporary token.

2. Go to https://api.mypay.gr/docs/index#!/Customers/Customers_Get and add the customer ID into search field.

An API callback is always required. Visit https://api.mypay.gr/docs/index#!/Charge/Charge_Post in order to complete this step.

Alternatively, you can use Direct credit card tokenization using JS:

You can use any of the parameters as above

In this case go to Mypay dashboard -> Management console -> Security and copy the Public Key. Paste the Public Key on the following javascript:

<script>
    function createTokenDirect() {
        Mypay.SetPublicKey('YOUR_PUBLIC_KEY');

        var data = {
            email: 'john@example.com',
            firstName: 'John',
            lastName: 'Doe',
            billingAddress: '1st Street 77',
            zip: '12345',
            number: '4242424242424242',
            month: '10',
            year: '2020',
            cvv: '735'
        };

        Mypay.CreateToken(data).done(function (token) {
            console.log(token);
        }).fail(function (error) {
            console.log(error);
        });
    }
</script>

Checkout page examples:

– Product selection

<script>
    Mypay.Checkout({
        'PublicCheckoutPage.ID': 1
    });
</script>

– Customer info (with selected product)

<script>
    Mypay.Checkout({
        'PublicCheckoutPage.ID': YOUR_CHECKOUT_PAGE_ID,
        'CartProducts[0].ID': YOUR_PRODUCT_ID,
        'CartProducts[0].Quantity': YOUR_PRODUCT_QUANTITY
    });
</script>

– Payment method selection (with selected product and customer)

<script>
    Mypay.Checkout({
        'PublicCheckoutPage.ID': YOUR_CHECKOUT_PAGE_ID,
        'CartProducts[0].ID': YOUR_PRODUCT_ID,
        'CartProducts[0].Quantity': YOUR_PRODUCT_QUANTITY,
        'Customer.Token': YOUR_CUSTOMER_TOKEN
    });
</script>

– Payment method selection (with selected new products, customer and vendor with custom amount/percent)

<script>
    Mypay.Checkout({
        'PublicCheckoutPage.ID': YOUR_CHECKOUT_PAGE_ID,
        'CartProducts[0].ProductType': YOUR_PRODUCT_TYPE,
        'CartProducts[0].Title': YOUR_PRODUCT_TITLE,
        'CartProducts[0].Description': YOUR_PRODUCT_DESCRIPTION,
        'CartProducts[0].Price': YOUR_PRODUCT_PRICE,
        'CartProducts[0].Quantity': YOUR_PRODUCT_QUANTITY,
        'CartProducts[0].Vendors[0].ID': YOUR_VENDOR_ID,
        'CartProducts[0].Vendors[0].CommisionAmountOverride': YOUR_VENDORS_AMOUNT,
        'CartProducts[1].ProductType': YOUR_PRODUCT_TYPE,
        'CartProducts[1].Title': YOUR_PRODUCT_TITLE,
        'CartProducts[1].Description': YOUR_PRODUCT_DESCRIPTION,
        'CartProducts[1].Price': YOUR_PRODUCT_PRICE,
        'CartProducts[1].Quantity': YOUR_PRODUCT_QUANTITY,
        'CartProducts[1].Vendors[0].ID': YOUR_VENDOR_ID,
        'CartProducts[1].Vendors[0].CommisionPercentOverride': YOUR_VENDORS_PERCENT,
        'Customer.Token': YOUR_CUSTOMER_TOKEN
    });
</script>

<script> Mypay.Paypal({ divID: 'YOUR_DIV_ID', publicCheckoutPageID: YOUR_CHECKOUT_PAGE_ID, productID: YOUR_PRODUCT_ID, productQuantity: YOUR_PRODUCT_QUANTITY, customerToken: 'YOUR_CUSTOMER_TOKEN', showOnlyPaymentUI: true }); </script>

Parameter name

Parameter description

long projectID

When provided, checkout will use your first checkout page or create one if none found

long invoiceID

When provided, checkout will prefill products, customer

long publicCheckoutPageID

The id of your checkout page

long productID

Specify a product by id

int productQuantity

Specify the product’s quantity

string currency

Specify a 3-letter currency code to display checkout amounts (e.g USD)

decimal? amount

When provided, a specific amount to charge the customer (a dummy product will be created)

string firstName