Skip to content

Instantly share code, notes, and snippets.

@ziyadparekh

ziyadparekh/safepay-angular.js

Created July 15, 2019 02:20
Show Gist options
  • Save ziyadparekh/62f04992b544566a9dc01181bf21b3e1 to your computer and use it in GitHub Desktop.
Save ziyadparekh/62f04992b544566a9dc01181bf21b3e1 to your computer and use it in GitHub Desktop.
Download ZIP
Safepay Checkout Angular Demo
Raw
safepay-angular.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular.js"></script>
<script src="https://storage.googleapis.com/safepayobjects/api/safepay-checkout.min.js"></script>
<script>
window.safepay.Button.driver('angular', window.angular);
window.angular.module('app', ['safepay-button']).controller('appController', function($scope) {
$scope.opts = {
// Either sandbox or production
env: 'production',
amount: "6800.57",
currency: "PKR",
client: {
sandbox: '<YOUR SANDBOX API KEY>',
production: '<YOU PRODUCTION API KEY>'
},
// Optionally pass along customer information to
// Safepay Checkout to prefill their data
customer: {
"first_name": "Ziyad",
"last_name": "Parekh",
"email": "[email protected]",
"phone": "03008287540"
},
// Optionally pass along customer billing information
// to Safepay Checkout to prefill this data
billing: {
"name": "Default Address",
"address_1": "12/1 7th South Street DHA Phase 2",
"address_2": "",
"city": "Karachi",
"province": "Sindh",
"postal": "75500",
"country": "PK"
},
payment: function(data, actions) {
return actions.payment.create({
transaction: {
amount: 6800.57,
currency: 'PKR'
}
})
},
onCancel: function (data, actions) {
console.log(data)
console.log(actions)
},
onCheckout: function(data, actions) {
console.log(data)
console.log("You completed the payment!");
}
};
});
</script>
<body ng-app="app" ng-controller="appController">
<safepay-button
env="opts.env"
amount="opts.amount"
currency="opts.currency"
client="opts.client"
customer="opts.customer"
billing="opts.billing"
payment="opts.payment"
commit="opts.commit"
on-cancel="opts.onCancel"
on-checkout="opts.onCheckout">
</safepay-button>
</body>
@muneebriaz
Copy link

Hey, I'm trying to use this with angular 9 but I can't set customer object for prefilled detail; I'd appreciate if you give an insight.

safepayPopup() {
    var that = this;
    window.safepay.Button.render(
      {
        env: "sandbox",
        amount: that.totalAmount,
        first_name: 'Muneeb',
        client: {
          sandbox: "XXXXXXXXXXXXXXXXXX",
          //   "production": "<YOUR_CLIENT_KEY>"
        },
        customer: {
          "first_name": "Ziyad",
          "last_name": "Parekh",
          "email": "[email protected]",
          "phone": "03008287540"
        },
        payment: (data, actions) => {
          return actions.payment.create({
            transaction: {
              amount: this.totalAmount,
              currency: "PKR",
            },
          });
        },

        onCancel: function (data, actions) {
          console.log(data);
          console.log(actions);
        },

        onCheckout: function (data, actions) {
          console.log(data);
          console.log("You completed the payment!", actions);
        },
      },
      "#safepay-button-container",
    );
  }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment