The easy and fast way to integrate eGiftCertificate is using our Javascript Widget.

Simply add the following script in your site:

<script type='text/javascript' src='https://egiftcert-widget.paynup.com/index.js'></script>

Then in your checkout page start the payment, that’s all:

<script type='text/javascript'>
    eGiftCertificate.start({
        "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJqdGkiOjEyMzQ1NiwiaXNzIjoiQTUyQzIxMTdSNTdCODQ0Q0EzNzgiLCJpYXQiOjE1OTA0MzUwODgsImV4cCI6MTU5MDQ0OTQ4OH0.TcRt0wpU-x4SQ15DQmKs0PatSzDsh4gdhsl7oMzaOn0",
        "orderNumber": 123456,
        "amount": "20.50",
        "receiptEmail": "harveryc@example.com",
        "customerName": "Harvey Coulter",
        "customerPhone": "+13051231234",
        "billingAddress": "3383  Richland Avenue",
        "billingZipCode": "77565",
        "billingCity": "Kemah",
        "billingState": "TX",
        "redirectUrl": "https:\/\/www.example.com\/checkout\/order-received\/123456",
        "IPNHandlerUrl": "https:\/\/www.example.com\/egift-ipn\/",
        "autoRedirect": true,
        "autoRedeem": true,
        "allowRedeem": true,
        "qrCode": true
    });
</script>

Check all available widget options

Once the payment has been completed the widget automatically redirect the client to given redirectUrl.

Now you are ready to listen for server side events and integrate the Instant Payment Notification Handler to mark you order based on certificate status.

Using Promise

If you don’t have a redirection page or simply want to show payment completed message in the same place, can use the Promise returned by the start() method.

<script type='text/javascript'>
    eGiftCertificate.start({
        "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJqdGkiOjEyMzQ1NiwiaXNzIjoiQTUyQzIxMTdSNTdCODQ0Q0EzNzgiLCJpYXQiOjE1OTA0MzUwODgsImV4cCI6MTU5MDQ0OTQ4OH0.TcRt0wpU-x4SQ15DQmKs0PatSzDsh4gdhsl7oMzaOn0",
        "orderNumber": 123456,
        "amount": "20.50",
        "receiptEmail": "harveryc@example.com",
        "customerName": "Harvey Coulter",
        "customerPhone": "+13051231234",
        "billingAddress": "3383  Richland Avenue",
        "billingZipCode": "77565",
        "billingCity": "Kemah",
        "billingState": "TX",
        "IPNHandlerUrl": "https:\/\/www.example.com\/egift-ipn\/",
        "autoRedirect": true,
        "autoRedeem": true,
        "allowRedeem": true,
        "qrCode": true
    }).then(function(payment){
        // payment completed
    }).catch(function(error) {
        // payment failed
    });
</script>

The Payment object returned by the promise contains the following fields:

name	description
remoteDevice	`true` if the transaction has been processed in a remote device using QR code
transaction	Pay’nUp Transaction number
amount	amount of the order used to match order amount with paid amount
total	total amount including payment fees
pin	eGiftCertificate PIN number
status	Status of the certificate, can be SOLD or USED

Never use the above object and the promise as the only way to CONFIRM a success completed payment, this object and the promise should be used only for better user experience. The secure way to know the real payment status is using the Instant Payment Notification Handler using server side events.

Client Events

The eGiftCertificate widget trigger some events based on user interactions, you can listen these events using the onEvent method.

<script type='text/javascript'>
    eGiftCertificate.onEvent(function (e) {
        switch (e.name) {
            case 'CLOSE':
                // widget closed or payment cancelled
                break;
            case 'QR_CODE_SCANNED':
                // the user scan the QR code to start the payment in the phone
                break;
            case 'PROCESSING':
                // processing the payment
                break;
            case 'PURCHASE_PIN_FAILED':
                // the payment has been failed
                break;
            case 'PURCHASE_PIN_COMPLETED':
                // the payment has been completed
                console.log(e.data); // payment object
                break;
            case 'REDIRECT_TO_STORE':
                // redirecting to given `redirectUrl`
                break;
        }
    }).start({...});
</script>

The onEvent method is called every time an event is being triggered and contains one parameter with a Event object. This object contains the name of the event and optionally any extra data related with the event.

Never use these clients events as the only way to CONFIRM a success completed payment, these events should be used only for better user experience. The secure way to know the real payment status is using the Instant Payment Notification Handler using server side events.

Submit Payment Widget Integration

Using Promise

Client Events